Personalized Learning Path Platform

A comprehensive learning management system that provides personalized educational roadmaps and AI-powered assessments to help users achieve their learning goals. Built with modern technologies and featuring a polished, responsive UI.

🌟 Features

📚 Learning Management

• Personalized Roadmaps: Custom learning paths based on user goals and skill levels
• Progress Tracking: Visual progress indicators and milestone tracking with interactive charts
• Goal Setting: Set and monitor learning objectives with progress visualization
• Dashboard: Comprehensive overview with statistics, recent activity, and quick actions
• User Profile: Detailed profile management with learning history

🧠 AI-Powered Assessment System

• Dynamic Quiz Generation: Create quizzes on any topic using Google's Gemini AI
• Interactive Quiz Interface: Modern, user-friendly quiz taking experience with navigation
• Detailed Results: Comprehensive feedback with correct/incorrect answer explanations
• Performance Analytics: Score tracking, performance insights, and visual score indicators
• Retake Options: Ability to retake quizzes or try different topics
• Question Navigation: Easy navigation between questions with progress indicators

🔐 Authentication & Security

• User Registration & Login: Secure user authentication system with modern UI
• Password Reset: Email-based password recovery with styled forms
• Protected Routes: Secure access to learning content with route guards
• JWT Authentication: Token-based authentication for API security
• Form Validation: Client-side and server-side validation

🎨 Modern User Interface

• Tailwind CSS: Modern utility-first CSS framework for consistent styling
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• Dark Theme: Beautiful dark gradient theme with consistent color scheme
• Interactive Components: Engaging buttons, cards, and form elements
• Loading States: Smooth loading animations and disabled states
• Accessibility: Keyboard navigation, focus states, and screen reader support
• Unified Design System: Consistent button styles, form elements, and layouts

🚀 Tech Stack

Frontend

• React 18: Modern React with hooks and functional components
• React Router: Client-side routing and navigation
• Tailwind CSS: Utility-first CSS framework for rapid UI development
• Axios: HTTP client for API communication
• Vite: Fast build tool and development server
• PostCSS: CSS processing for Tailwind compilation

Backend

• Node.js: JavaScript runtime environment
• Express.js: Web application framework
• MongoDB: NoSQL database for data storage
• Mongoose: MongoDB object modeling
• JWT: JSON Web Token for authentication
• Google Gemini AI: AI-powered quiz generation
• Nodemailer: Email service for password reset

📁 Project Structure

personalized-learning-path/
├── Backend/
│   ├── Controllers/          # API route handlers
│   │   ├── Auth.js
│   │   ├── roadmapController.js
│   │   ├── userRoadmapcontrollers.js
│   │   └── passwordResetController.js
│   ├── Middleware/           # Authentication middleware
│   │   └── middlewareAuth.js
│   ├── Models/              # Database models
│   │   ├── Users.js
│   │   ├── Raodmap.js
│   │   ├── userRoadmap.js
│   │   ├── passwordReset.js
│   │   └── ProgressSchema.js
│   ├── Routes/              # API routes
│   │   ├── auth.js
│   │   ├── userAuth.js
│   │   ├── roadmapRoutes.js
│   │   ├── assessmentRoute.js
│   │   ├── userRoadmapRoutes.js
│   │   ├── progressRoutes.js
│   │   ├── dashboardRoute.js
│   │   ├── profile.js
│   │   └── resetPassword.js
│   ├── Service/             # External services
│   │   └── emailService.js
│   ├── scripts/             # Database population scripts
│   │   └── populateRoadmaps.js
│   └── server.js            # Main server file
├── Frontend/
│   ├── src/
│   │   ├── Components/      # React components
│   │   │   ├── Auth/        # Authentication components
│   │   │   │   ├── LoginForm.jsx
│   │   │   │   ├── RegisterForm.jsx
│   │   │   │   ├── ForgotPassword.jsx
│   │   │   │   └── ResetPassword.jsx
│   │   │   ├── Dashboard/   # Dashboard components
│   │   │   │   ├── Dashboard.jsx
│   │   │   │   ├── profile.jsx
│   │   │   │   ├── LearningPathCurve.jsx
│   │   │   │   └── ProgressBar.jsx
│   │   │   ├── Roadmap/     # Roadmap components
│   │   │   │   ├── RoadmapSelector.jsx
│   │   │   │   └── VisualRoadmap.jsx
│   │   │   └── Assessement/ # Assessment components
│   │   │       ├── Assessement.jsx
│   │   │       ├── QuizInterface.jsx
│   │   │       └── Results.jsx
│   │   ├── Api/            # API service layer
│   │   │   ├── authApi.jsx
│   │   │   └── assessmentApi.jsx
│   │   ├── Context/        # React context providers
│   │   │   └── authContext.jsx
│   │   ├── util/           # Utility components
│   │   │   └── PrivateRoute.jsx
│   │   ├── index.css       # Global styles with Tailwind
│   │   └── main.jsx        # Application entry point
│   ├── tailwind.config.js  # Tailwind CSS configuration
│   ├── package.json        # Frontend dependencies
│   └── public/             # Static assets
└── README.md

🛠️ Installation & Setup

Prerequisites

• Node.js (v16 or higher)
• MongoDB (v4.4 or higher)
• npm or yarn package manager

Backend Setup

1. Navigate to backend directory

   cd Backend

2. Install dependencies

   npm install

3. Environment Configuration Create a .env file in the Backend directory:

   MONGODB_URI=mongodb://localhost:27017/learning-path
   JWT_SECRET=your_jwt_secret_key
   GEMINI_API_KEY=your_google_gemini_api_key
   CLIENT_ORIGIN=http://localhost:5173
   EMAIL_USER=your_email@gmail.com
   EMAIL_PASS=your_app_password
   PORT=3002

4. Start the server

   npm start

Frontend Setup

1. Navigate to frontend directory

   cd Frontend

2. Install dependencies

   npm install

3. Environment Configuration Create a .env file in the Frontend directory:

   VITE_API_BASE_URL=http://localhost:3002

4. Start the development server

   npm run dev

🎯 Usage

Getting Started

1. Register: Create a new account with the modern registration form
2. Login: Access your account with the styled login interface
3. Dashboard: View your learning progress, statistics, and quick actions
4. Profile: Manage your profile and view learning history
5. Roadmaps: Browse and select learning paths with visual cards
6. Assessment: Take AI-generated quizzes on any topic

Taking an Assessment

1. Click "Take Assessment" from the dashboard
2. Enter any topic you want to be tested on (e.g., "React", "Machine Learning", "History")
3. Wait for AI to generate questions (loading animation included)
4. Navigate through questions using the progress bar and question indicators
5. Select answers with the modern radio button interface
6. Submit when all questions are answered
7. Review detailed results with color-coded feedback
8. Retake the quiz or try a different topic

Managing Learning Paths

1. Navigate to "Browse Roadmaps" from the dashboard
2. Use category filters to find relevant roadmaps
3. Select a roadmap that matches your learning goals
4. View roadmap details including difficulty, duration, and steps
5. Start learning and track your progress
6. Complete milestones and advance to the next level

User Interface Features

• Dark Theme: Beautiful gradient backgrounds with consistent dark theme
• Responsive Design: Works perfectly on desktop, tablet, and mobile
• Interactive Elements: Hover effects, loading states, and smooth transitions
• Navigation: Easy navigation between different sections
• Accessibility: Keyboard navigation and focus states for better accessibility

🔧 API Endpoints

Authentication

• POST /api/auth/register - User registration
• POST /api/auth/login - User login
• GET /api/auth/verify - Token verification
• POST /api/password-reset/request - Request password reset
• POST /api/password-reset/reset - Reset password

Roadmaps

• GET /api/roadmaps - Get all roadmaps
• GET /api/roadmaps/:id - Get specific roadmap
• POST /api/user-roadmaps - Assign roadmap to user
• GET /api/user-roadmaps - Get user's roadmaps

Assessment

• POST /api/assessment - Generate quiz for topic
• POST /api/assessment/submit - Submit quiz answers

User Dashboard

• GET /api/user/stats - Get user statistics
• GET /api/user/recent-activity - Get recent activity
• GET /api/user/learning-path - Get learning path

🎨 Customization

Adding New Assessment Topics

The assessment system uses Google's Gemini AI to generate questions. Simply enter any topic in the assessment interface, and the AI will create relevant questions.

Styling

The application uses Tailwind CSS for styling. To customize the appearance:

• Global Styles: Modify Frontend/src/index.css for global styles and CSS variables
• Tailwind Config: Update Frontend/tailwind.config.js for custom colors, fonts, and theme
• Component Styles: Use Tailwind utility classes directly in components
• Custom Components: Add custom CSS classes in index.css for complex styling needs

Design System

The application follows a unified design system with:

• Color Palette: Dark theme with slate/blue accent colors
• Typography: Consistent font sizes and weights
• Button System: Unified button classes (.btn, .btn-primary, .btn-secondary, etc.)
• Form Elements: Consistent form inputs and labels
• Cards: Standardized card components with hover effects

Adding New Roadmaps

1. Use the populate script: Backend/scripts/populateRoadmaps.js
2. Add new roadmap data to the database
3. Update the roadmap display components

🚀 Deployment

Backend Deployment

1. Set up MongoDB Atlas or local MongoDB instance
2. Configure environment variables for production
3. Deploy to platforms like Heroku, Railway, or AWS
4. Ensure CORS is properly configured for your frontend domain

Frontend Deployment

1. Build the production version: npm run build
2. Deploy to platforms like Vercel, Netlify, or AWS S3
3. Update API base URL for production environment

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-feature
3. Commit your changes: git commit -am 'Add new feature'
4. Push to the branch: git push origin feature/new-feature
5. Submit a pull request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

For support and questions:

• Create an issue in the GitHub repository
• Check the documentation for common solutions
• Review the API endpoints for integration help

🔮 Future Enhancements

• Social learning features (study groups, forums)
• Advanced analytics and reporting
• Integration with external learning platforms
• Gamification elements (badges, leaderboards, achievements)
• Multi-language support
• Offline mode for assessments
• Advanced quiz types (fill-in-the-blank, matching)
• Study reminders and notifications
• Learning streak tracking
• Export progress reports

🙏 Acknowledgments

• Google Gemini AI for quiz generation
• React community for excellent documentation
• MongoDB for database services
• All contributors and testers

---

Happy Learning! 🎓