A modern, full-stack e-learning platform where learners can explore, enroll in, and master skill-based courses — from Web Development to AI, Design, Marketing, and beyond.
SkillSphere is a fully responsive, production-ready online learning platform built with Next.js 15 App Router and TypeScript. Users can browse an extensive catalog of expert-led courses, filter by category or level, and enroll after authentication. The platform supports both email/password and Google OAuth login, persistent dark/light mode, and smooth page animations.
- 8+ Expert Courses across Web Development, UI/UX Design, Digital Marketing, AI & Machine Learning, Cloud Computing, Cybersecurity, and more
- Smart Filtering — search by title, filter by category and level, sort by rating or price
- Course Detail Pages — full course overview, curriculum, instructor info, and enrollment
- Trending Courses Section — dynamically highlighted popular courses
- Top Instructors Showcase — browse courses by featured instructors
- Email & password registration and login via BetterAuth
- Google OAuth sign-in with one click
- Protected routes — course details and profile require authentication
- Session persistence across page reloads
- Dark / Light Mode — persistent theme toggle stored in preferences
- Hero Carousel — animated Swiper.js slider with Motion transitions
- Fully Responsive — optimised layouts for mobile, tablet, and desktop
- Toast Notifications — real-time feedback on all user actions
- Custom 404 Page — branded not-found experience
- View and update display name and avatar
- Access enrolled course history
- Manage account settings
| Layer | Technology | Version |
|---|---|---|
| Framework | Next.js (App Router) | ^15.3.1 |
| Language | TypeScript | ^5 |
| Styling | Tailwind CSS | ^4 |
| UI Components | DaisyUI | ^5.0.35 |
| Authentication | BetterAuth | ^1.2.7 |
| Database | MongoDB | ^6.21.0 |
| Animations | Motion | ^12.7.4 |
| Carousel | Swiper.js | ^12.1.4 |
| Notifications | React Hot Toast | ^2.5.2 |
| Icons | React Icons | ^5.5.0 |
- Node.js v18+
- A MongoDB Atlas account (or local MongoDB)
- A Google Cloud Console project with OAuth 2.0 credentials
git clone https://github.com/devlowper/SkillSphere.git
cd SkillSpherenpm installIf you encounter peer dependency conflicts, use
npm install --legacy-peer-deps
npm run devOpen http://localhost:3000 in your browser.
SkillSphere/
├── public/ # Static assets (images, icons)
├── src/
│ ├── app/
│ │ ├── layout.tsx # Root layout — Navbar + Footer
│ │ ├── page.tsx # Home page
│ │ ├── courses/ # Course listing & detail pages
│ │ │ └── [id]/ # Dynamic course detail route
│ │ ├── login/ # Login page
│ │ ├── register/ # Registration page
│ │ ├── my-profile/ # User profile & settings
│ │ ├── not-found.tsx # Custom 404 page
│ │ └── api/
│ │ └── auth/ # BetterAuth API handler
│ ├── components/ # Reusable UI components
│ │ ├── Navbar.tsx
│ │ ├── Footer.tsx
│ │ ├── CourseCard.tsx
│ │ ├── HeroSlider.tsx
│ │ └── ...
│ ├── lib/ # Auth config, DB connection, utilities
│ └── data/
│ └── courses.json # Static course data
├── .env.example # Environment variable template
├── next.config.ts
├── tailwind.config.js
├── tsconfig.json
└── package.json
| Variable | Required | Description |
|---|---|---|
BETTER_AUTH_SECRET |
✅ | Random secret for session signing (min. 32 chars) |
BETTER_AUTH_URL |
✅ | Server-side base URL of your app |
NEXT_PUBLIC_BETTER_AUTH_URL |
✅ | Client-side base URL of your app |
GOOGLE_CLIENT_ID |
✅ | Google OAuth 2.0 Client ID |
GOOGLE_CLIENT_SECRET |
✅ | Google OAuth 2.0 Client Secret |
MONGODB_URI |
✅ | MongoDB Atlas connection string |
- Push your repo to GitHub
- Import the project at vercel.com/new
- Add all environment variables in the Vercel dashboard
- Deploy — Vercel auto-detects Next.js and configures the build
Contributions, issues, and feature requests are welcome!
- Fork the project
- Create your feature branch —
git checkout -b feature/your-feature - Commit your changes —
git commit -m 'Add: your feature description' - Push to the branch —
git push origin feature/your-feature - Open a Pull Request
Md. Rakib Hossen
- GitHub: @devlowper
- LinkedIn:https://www.linkedin.com/in/vectorpointgrafix/
- Email: vectorpointit@gmail.com
This project is open source and available under the MIT License.
Built with ❤️ by Md. Rakib Hossen