SkillSphere is a modern online learning platform where users can explore courses, watch lessons, and enroll in skill-based programs like Web Development, Design, Marketing, Data Science, and more.
- Authentication — Email/password & Google login via BetterAuth
- All Courses Page — Browse all courses with category filter & search
- Protected Course Details — Only accessible to logged-in users
- My Profile — View and update name & profile photo
- Home Page — Hero section, Popular Courses, Top Instructors, Learning Tips
- Fully Responsive — Mobile, tablet & desktop
- Toast Notifications — Success/error feedback on all actions
- Loading Skeletons — Shown while data is being fetched
- Custom 404 Page — Friendly not-found page
- Swiper.js Slider — Hero banner carousel
| Package | Purpose |
|---|---|
next |
React framework (App Router) |
tailwindcss |
Utility-first CSS framework |
@heroui/react |
UI component library |
better-auth |
Authentication (email + Google) |
react-hot-toast |
Toast notifications |
react-icons |
Icon library |
swiper |
Hero section slider/carousel |
react-hook-form |
Form state management |
framer-motion |
Animations and transitions |