A modern, feature-rich E-learning platform designed to deliver a personalized, engaging, and career-focused learning experience.
SkillVerse combines structured learning, real interview preparation, gamification, analytics, certifications, and beautiful UX to simulate a real SaaS product, not just a demo app.
It is built to demonstrate real-world product thinking, combining UX psychology, frontend architecture, user engagement strategies, and career-oriented learning. This project goes beyond tutorials and focuses on how modern learning platforms are actually designed.
- 🎯 Smart Onboarding: Animated question flow to personalize your learning path.
- 📚 Structured Courses: Real learning resources, quizzes, and tracking.
- 💼 Career Mode: Company-wise interview questions, mock interviews, and career readiness scores.
- 🎮 Gamification: XP system, levels, streaks, achievement badges, and celebration animations.
- 🧠 Learning Analytics: Progress visualization, strength/weakness insights, and consistency tracking.
- 🎓 Professional Certificates: Auto-generated, beautifully designed, and downloadable PDF certificates.
- ⚙️ Customizable Settings: Profile management, learning preferences, and appearance customization.
- 🌙 Premium UI: Dark mode first, soft gradients, glassmorphism, and smooth micro-interactions.
- 🎥 Product Tour: Auto-play guided walkthrough for new users.
graph TD
Client["Client Browser (React SPA)"]
subgraph CloudRun ["Google Cloud Run (Hosting)"]
AppRouter["App.tsx (React Router)"]
subgraph UI_Modules ["UI & Application Modules"]
AuthModule["Auth.tsx & Onboarding.tsx"]
DashModule["Dashboard.tsx"]
LearnModule["CourseView.tsx & CoursesList.tsx"]
CareerModule["CareerMode.tsx"]
AIAssistant["AIAssistant.tsx"]
end
end
subgraph Firebase ["Firebase Cloud Services"]
FirebaseAuth["Firebase Auth (Identity)"]
Firestore["Firestore DB (NoSQL)"]
end
subgraph External ["External & Local Services"]
Gemini["Google Gemini API (AI Tutor)"]
PDF["jsPDF & html2canvas"]
LocalStorage["Browser LocalStorage (Cache)"]
end
Client -- "HTTP / UI Interactions" --> AppRouter
AppRouter --> AuthModule
AppRouter --> DashModule
AppRouter --> LearnModule
AppRouter --> CareerModule
LearnModule --> AIAssistant
DashModule --> PDF
AuthModule -- "Identity Verification" --> FirebaseAuth
DashModule -- "Read/Write Progress" --> Firestore
LearnModule -- "Track Completion" --> Firestore
CareerModule -- "Save Mock Scores" --> Firestore
AIAssistant -- "Contextual Prompts" --> Gemini
UI_Modules -. "State Persistence" .-> LocalStorage
Replaced basic local storage with a highly secure, scalable Firebase Authentication system:
- Supports Email/Password, Google, and GitHub Sign In.
- Strict password validation (12+ chars, special chars, no dictionary passwords).
- Verification Wall (requires email verification before dashboard access).
- Firestore integration for user document creation and last-login tracking.
Categorized subjects (Programming, DSA, Design) containing structured notes, real resources, and integrated quizzes for progress tracking.
Features 20 tech companies with at least 10 real interview questions per company. Includes difficulty tags, topic labels, trusted external resources, and a mock interview mode.
Motivation-driven UX featuring an XP system for learning and practice, levels, streaks, achievement badges, and beautiful celebration animations.
Generates professional certificates upon course completion. Features a user-friendly preview and allows users to download their certificate as a PDF using html2canvas and jsPDF.
| Category | Technology |
|---|---|
| Frontend Framework | React |
| Language | TypeScript |
| Styling | Tailwind CSS |
| Animations | Framer Motion |
| Routing | React Router |
| Authentication | Firebase Auth |
| Database | Firestore |
| Certificate Generation | html2canvas & jsPDF |
| Hosting | Vercel |
| Build Tool | Vite |
| Version Control | Git & GitHub |
git clone https://github.com/Khushi1310-nayak/SkillVerse.git
cd SkillVersenpm installCopy the example environment file:
cp .env.example .envFill in the following Firebase credentials from your Firebase project:
VITE_FIREBASE_API_KEYVITE_FIREBASE_AUTH_DOMAINVITE_FIREBASE_PROJECT_IDVITE_FIREBASE_STORAGE_BUCKETVITE_FIREBASE_MESSAGING_SENDER_IDVITE_FIREBASE_APP_ID
If you plan to use AI features, also configure the required Gemini/OpenRouter API credentials.
npm run devContributions are welcome! If you’d like to improve UI, animations, features, or performance:
- Fork the repository
- Create a new branch
- Make your changes
- Submit a pull request
Please keep code clean and well-documented ✨
Thank you to everyone who has contributed to SkillVerse!
This project is licensed under the MIT License. You’re free to use, modify, and distribute it with attribution.
🎓 Student | Full-Stack Developer | AI Product Builder
Passionate about:
- Full-Stack Architecture
- User Experience (UI/UX)
- AI Automation & Product Building
GitHub: Khushi1310-nayak
LinkedIn: Manisa Nayak