Project
SkillSphere
A full-stack e-learning platform with Google auth, course management, and a modern dashboard. Built with Next.js and MongoDB.
Next.js
React
Tailwind CSSHero UIBetter Auth
Google Auth
MongoDB
About the Project
SkillSphere is a full-stack e-learning platform that makes online education accessible without complicated sign-ups or barriers. Students can browse a structured course catalog, enroll instantly using their Google account, and access learning content through a clean, responsive dashboard. Instructors can publish and manage courses while the platform enforces protected routes to ensure only enrolled or authenticated users can access paid content. Built with Next.js App Router, Better Auth, and MongoDB, SkillSphere handles session management, role-based access control, and a fully responsive UI using HeroUI and Tailwind CSS — delivering a consistent learning experience across mobile and desktop.
⚡ What Was Hard
- 01Resolving production auth cookie issues caused by the __Secure- prefix in Better Auth when deploying to Vercel.
- 02Fixing Next.js 15 async searchParams breaking changes that affected course filtering and search functionality.
- 03Eliminating hydration mismatches caused by theme and session state differences between server and client renders.
- 04Handling session race conditions during page load where protected content briefly flashed before auth resolved.
- 05Building a responsive navbar drawer that worked smoothly across all breakpoints without layout shifts.
🚀 What is Next
- 01Add video lesson support with progress tracking per lecture.
- 02Introduce a certificate generation system upon course completion.
- 03Build an instructor analytics dashboard with enrollment and engagement metrics.
- 04Add a course review and rating system visible to prospective students.
- 05Implement a discussion forum or comment section per lesson for community learning.