A production-quality, frontend-only Learning Management System (LMS) — built as a portfolio-grade product with a real 3D experience, full gamification, and a complete learner journey from discovery to certificate.
https://edusphere-demo.pages.dev/
| 🌐 Interactive 3D hero | A knowledge sphere with orbital rings, floating books, and particles (React Three Fiber + Drei). Mouse parallax, floating animation, and reduced complexity on mobile. |
| 🎓 Full student journey | Explore → enroll → learn → quiz → achieve → certificate. |
| 🏆 Gamification | XP, levels, ranks, achievements (with a 3D trophy), GitHub-style activity heatmap, daily streaks, leaderboard. |
| 👥 Multi-role demo accounts | One-click login as Student, Instructor, Mentor, or Admin — each with its own dashboard and permissions. |
| 💾 Realistic product behavior | Simulated auth, loading/error/empty states, live progress tracking, toasts — everything persisted to localStorage so the demo survives refreshes. |
| 🎨 Polished theming | Dark-first design with CSS design tokens, plus a purpose-built light mode (not an inverted dark mode). |
| 📱 Responsive by design | Desktop sidebar, collapsible drawer, and a mobile bottom-nav with reflowed layouts — not just shrunk desktop UI. |
| ♿ Accessible | Semantic HTML, ARIA labels, keyboard shortcuts in the learning player (← / → / M / B / F), visible focus states, reduced-motion support. |
| ⚡ Fast | Code-split Three.js / Recharts / Framer Motion, lazy-loaded 3D, capped DPR, no heavy image assets — all visuals are inline SVG. |
Click any card on the login page to jump in instantly — no password needed:
| Role | Name | Capabilities |
|---|---|---|
| 👑 Admin | Yara Salem | Platform analytics, user management, role changes, admin-only sidebar |
| 🧑🏫 Instructor | Sarah Mitchell | Teaching dashboard, student progress, course reviews |
| 🧭 Mentor | Lina Karim | Community mentoring view |
| 🎓 Student | Ahmed Hassan | Full learner experience — courses, streaks, XP, achievements |
The regular form also works: any email + password of 6+ characters (auth is simulated entirely on the client).
| Route | Page |
|---|---|
/ |
Landing page with 3D hero |
/login · /signup |
Authentication with demo-account cards |
/dashboard |
Role-aware overview: stats, activity chart, learning path |
/my-courses |
Course management with tabs |
/explore |
Search, filters, difficulty, sort, grid/list |
/courses/:id |
Course details, curriculum, reviews |
/learn/:courseId |
Learning player — notes, bookmarks, keyboard shortcuts |
/quiz/:courseId |
Interactive quiz with results |
/learning-path |
Guided frontend learning path |
/achievements |
XP, level, rank, achievement badges |
/certificates |
Certificates with preview modal |
/community |
Discussions, study groups, leaderboard |
/profile · /notifications · /settings |
Profile, notifications, settings |
/admin |
Admin only — platform analytics + user management |
Built with care by Erorr40.
- 🌐 GitHub: github.com/erorr40
- 🖥️ Portfolio: ahmedraafat.me
MIT — free to use, learn from, and remix. ⭐