Masterly is a modern, fast, and interactive learning platform that offers personalized paths to master skills. Built with the MERN stack and tailored for developers and learners seeking structure and engagement.
🌐 Access it live here:: Masterly
Here's a quick look at the Masterly homepage
Interactive UI
- 🔐 Secure Authentication (Email/Password + Google OAuth)
- 🧠 Interactive DSA Course with video lectures, quizzes, and coding problems
- 📈 User Progress Tracking (concept-wise + topic-wise)
- 🎯 Personalized dashboards with statistics & quick actions
- 🧑🏫 Instructor profiles & course ratings
- 🗂️ Modular & scalable course structure (concepts → topics → content)
- 📝 Adaptive Quiz System with anti-cheating measures
- 🎯 Mock Tests and Course Assessments
- ⏱️ Timed Assessments with real-time monitoring
- 📊 Detailed Performance Analytics
- 🔄 Retake Options with different question sets
- 🖥️ Integrated Code Editor with syntax highlighting
- 🐍 Multi-language Support (Python, Java, C++, JavaScript)
- ✅ Automated Test Execution
- 📋 Problem-solving Interface
- 🎯 Real-time Code Validation
- 📈 Progress Visualization with charts and graphs
- 🎯 Learning Path Recommendations
- 📊 Performance Metrics and mastery scores
- 📅 Study Time Tracking
- 🏆 Achievement System with badges and rewards
- 🧠 Personalized Learning Paths based on user progress
- 🎯 Adaptive Content Recommendations
- 📚 Smart Concept Sequencing
- 🔍 Intelligent Search across courses and concepts
- 📈 Predictive Analytics for learning outcomes
| Tech | Purpose |
|---|---|
| Next.js 15 | App Router + React 19 support |
| Express.js | Backend API & Auth |
| MongoDB Atlas | Data storage (Courses, Users) |
| Mongoose | ODM for MongoDB |
| Tailwind CSS | Styling and UI |
| Zustand | Global state (auth) |
| Vercel + Render | Deployment |
| React 19 | Frontend Framework (UI/UX) |
| TypeScript | Static typing, cleaner codebase |
| Radix UI | Accessible component library |
| OpenAI API | AI-powered recommendations |
| JWT + Passport | Authentication & authorization |
Masterly/frontend/
├── app/ # Next.js 15 App Router
│ ├── dashboard/ # User dashboard & analytics
│ ├── courses/ # Course browsing & enrollment
│ ├── quiz/ # Quiz platform & assessments
│ ├── coding-platform/ # Code editor & problems
│ ├── learning-paths/ # AI-generated learning paths
│ ├── admin/ # Admin panel
│ ├── auth/ # Authentication pages
│ └── [other routes] # Profile, settings, help, etc.
├── components/ # Reusable UI components
│ ├── ui/ # Radix UI components (50+)
│ ├── quiz-platform.tsx # Advanced quiz system
│ ├── problem-solver.tsx # Coding interface
│ ├── DSAQuizEngine.tsx # DSA-specific quiz engine
│ └── [other components] # Sidebars, auth guards, etc.
├── lib/ # Utilities & API client
├── hooks/ # Custom React hooks
└── [config files] # Package.json, configs, etc.
Masterly/backend/
├── src/
│ ├── models/ # MongoDB schemas (12 models)
│ │ ├── userModel.ts # Comprehensive user model
│ │ ├── courseModel.ts # Course & content model
│ │ └── [other models] # Progress, assessment, etc.
│ ├── routes/ # API endpoints (12 routes)
│ │ ├── authRoutes.ts # Authentication
│ │ ├── courseRoutes.ts # Course management
│ │ └── [other routes] # Quiz, admin, dashboard, etc.
│ ├── controllers/ # Business logic
│ ├── middlewares/ # Auth & validation
│ ├── config/ # Configuration files
│ └── utils/ # Helper functions
└── [config files] # Package.json, scripts, etc.
- Node.js 18+
- MongoDB Atlas account
- OpenAI API key (for AI features)
cd Masterly/frontend
npm install
npm run devcd Masterly/backend
npm install
npm run dev# Frontend (.env.local)
NEXT_PUBLIC_API_URL=http://localhost:5000
# Backend (.env)
PORT=5000 //The port for your local Express server
MONGO_URI= // The connection string to your cloud database on MongoDB Atlas
JWT_SECRET=your_super_secret_and_long_string_for_jwt
CLIENT_URL=http://localhost:3000
# --- NEW OAUTH 2.0 VARIABLES ---
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_CALLBACK_UR=http://localhost:5000/api/auth/google/callback
# --- EMAIL VARIABLES ---
# These are the credentials from your Mailtrap Sandbox inbox
EMAIL_HOST=
EMAIL_PORT=
EMAIL_USER=
EMAIL_PASSWORD=
EMAIL_FROM=
- Profile: Personal info, avatar, bio, social links
- Subscription: Plan details, billing, payment methods
- Stats: Study time, progress, achievements, streaks
- Preferences: Learning settings, notifications, privacy
- Enrollments: Course progress, certificates, ratings
- Content: Title, description, instructor, pricing
- Structure: Concepts, topics, videos, articles
- Stats: Students, ratings, completion rates
- Metadata: Tags, requirements, learning outcomes
- Quizzes: Questions, answers, explanations
- Tests: Mock tests, course assessments
- Progress: User attempts, scores, time tracking
- Analytics: Performance metrics, mastery scores
- JWT Authentication with secure token management
- Google OAuth 2.0 integration
- Password Hashing with bcrypt
- CORS Protection with whitelisted origins
- Input Validation with express-validator
- Anti-cheating Measures in quiz platform
- Rate Limiting on API endpoints
- Secure Cookie Management
- Next.js 15 with App Router for optimal routing
- React 19 with concurrent features
- MongoDB Indexing for fast queries
- Image Optimization with Next.js Image component
- Code Splitting and lazy loading
- CDN Integration for static assets
- Caching Strategies for API responses
- TypeScript for type safety
- ESLint for code quality
- Prettier for code formatting
- Input Validation on all forms
- Error Handling with proper logging
- API Testing with comprehensive endpoints
- UI Testing with component isolation
- Automatic deployments from Git
- Edge functions for API routes
- Global CDN for fast loading
- Environment variable management
- Automatic scaling based on traffic
- Health checks and monitoring
- SSL certificate management
- Database connection pooling
🌐 Live Frontend: https://masterly-deploy-henna.vercel.app/
🔗 Live Backend API: https://masterly.onrender.com
- Next.js Team for the amazing framework
- Vercel for seamless deployment
- MongoDB for reliable database
- OpenAI for AI capabilities
- Radix UI for accessible components
- Tailwind CSS for beautiful styling
Built with ❤️ by the Masterly Team