T# 🎓 SkillShare Hub
A modern, full-stack online learning platform built with Next.js 15, PostgreSQL, Prisma, and Tailwind CSS. Share knowledge, learn new skills, and grow together!
- Modern UI/UX: Beautiful, responsive design with Tailwind CSS v4 and shadcn/ui components
- Authentication: Secure authentication with NextAuth.js (credentials & OAuth)
- Role-Based Access: Three user roles (User, Instructor, Admin) with appropriate permissions
- Course Management: Full CRUD operations for courses with materials and categories
- Enrollment System: Seamless course enrollment with progress tracking
- Payment Integration: Chapa payment gateway for paid courses
- Reviews & Ratings: Students can rate and review courses
- Search & Filters: Advanced filtering by category, price, and popularity
- Browse and search thousands of courses
- Enroll in free and paid courses
- Track learning progress
- Access course materials (videos, PDFs, etc.)
- Write reviews and ratings
- Earn certificates upon completion
- Personal dashboard with enrolled courses
- Create and manage courses
- Upload course materials
- Track student enrollments
- View course analytics
- Manage course pricing
- Monitor reviews and feedback
- User management (roles, permissions)
- Course moderation and approval
- Platform analytics and statistics
- Content management
- Payment oversight
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Database: PostgreSQL
- ORM: Prisma
- Authentication: NextAuth.js
- Styling: Tailwind CSS v4
- UI Components: shadcn/ui + Radix UI
- Icons: Lucide React
- Forms: React Hook Form + Zod
- Payment: Chapa
skillsharehub/
├── app/ # Next.js App Router
│ ├── api/ # API routes
│ │ ├── auth/ # NextAuth routes
│ │ └── chapa/ # Payment integration
│ ├── courses/ # Course pages
│ │ ├── [id]/ # Course detail & materials
│ │ └── page.tsx # Course listing
│ ├── dashboard/ # User dashboards
│ │ ├── instructor/ # Instructor dashboard
│ │ └── page.tsx # Student dashboard
│ ├── admin/ # Admin panel
│ │ ├── users/ # User management
│ │ └── courses/ # Course moderation
│ ├── profile/ # User profile
│ ├── components/ # Page-specific components
│ │ ├── auth/ # Auth components
│ │ ├── courses/ # Course components
│ │ ├── layout/ # Layout components
│ │ └── payments/ # Payment components
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Homepage
│ └── globals.css # Global styles
├── components/ # Reusable UI components
│ └── ui/ # shadcn/ui components
├── lib/ # Utilities & configs
│ ├── auth.ts # NextAuth config
│ ├── prisma.ts # Prisma client
│ └── utils.ts # Helper functions
├── prisma/ # Database
│ └── schema.prisma # Database schema
├── public/ # Static assets
├── middleware.ts # Auth & role middleware
└── package.json # Dependencies
- Node.js 18+ and npm
- PostgreSQL database
- Chapa account (for payments)
- Clone the repository
git clone <your-repo-url>
cd skillsharehub- Install dependencies
npm install- Set up environment variables
Create a .env file in the root directory:
# Database
DATABASE_URL="postgresql://user:password@localhost:5432/skillshare"
# NextAuth
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key-here"
# Chapa Payment
CHAPA_SECRET_KEY="your-chapa-secret-key"
CHAPA_WEBHOOK_SECRET="your-chapa-webhook-secret"- Set up the database
npx prisma generate
npx prisma migrate dev --name init- Run the development server
npm run dev- Open your browser
Visit http://localhost:3000
Modern landing page with hero section, featured courses, and call-to-actions.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.