LearnFlow Frontend

A modern learning management system built with React, TypeScript, and Tailwind CSS.

Features

• Role-based Authentication: Student, Instructor, and Admin roles
• Modern UI: Built with shadcn/ui components and Tailwind CSS
• Responsive Design: Works on desktop and mobile devices
• Real-time Updates: Live notifications and updates
• Course Management: Create, edit, and manage courses
• Assignment System: Submit and grade assignments
• Dashboard Analytics: Performance tracking and insights

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• MongoDB database
• Backend API running on port 5000

Setup Instructions

1. Install Dependencies

npm install
# or
yarn install

2. Environment Configuration

Create a .env file in the root directory:

VITE_LOCAL_API_URL=http://localhost:5000

3. Start the Development Server

npm run dev
# or
yarn dev

The application will be available at http://localhost:8080

Authentication Flow

User Registration

1. Navigate to /signup
2. Choose your role (Student or Instructor)
3. Fill in your details
4. Submit the form
5. You'll be automatically redirected to your role-specific dashboard

User Login

1. Navigate to /login
2. Enter your email and password
3. Submit the form
4. You'll be redirected to your role-specific dashboard

Role-based Access

• Students: Access to /student/dashboard and /my-assignments
• Instructors: Access to /instructor/dashboard, /instructor/courses, etc.
• Admins: Access to /admin/dashboard

Project Structure

src/
├── components/          # Reusable UI components
│   ├── ui/             # shadcn/ui components
│   ├── admin/          # Admin-specific components
│   ├── dashboard/      # Dashboard components
│   └── ...
├── pages/              # Page components
├── hooks/              # Custom React hooks
├── lib/                # Utility functions and configurations
├── types/              # TypeScript type definitions
└── ...

Key Features Implemented

Authentication System

• ✅ User registration with role selection
• ✅ User login with automatic role-based redirection
• ✅ Protected routes with role-based access control
• ✅ JWT token management with cookies
• ✅ Automatic logout on token expiration

Role-based Routing

• ✅ Student dashboard and assignments
• ✅ Instructor dashboard and course management
• ✅ Admin dashboard
• ✅ Automatic redirection based on user role

UI/UX Improvements

• ✅ Loading states during authentication
• ✅ Form validation and error handling
• ✅ Responsive design for all screen sizes
• ✅ Modern UI with shadcn/ui components

Testing the Authentication

1. Start the Backend

Make sure your backend is running on port 5000 with MongoDB connected.

2. Test Registration

1. Go to http://localhost:8080/signup
2. Create a new account as a Student
3. Verify you're redirected to /student/dashboard

3. Test Login

1. Go to http://localhost:8080/login
2. Login with your credentials
3. Verify you're redirected to the correct dashboard

4. Test Role-based Access

1. Try accessing /instructor/dashboard as a student
2. Verify you're redirected to /student/dashboard
3. Try accessing /admin/dashboard as a student
4. Verify you're redirected to /student/dashboard

Troubleshooting

Common Issues

1. CORS Errors: Ensure the backend CORS configuration includes http://localhost:8080
2. Authentication Failures: Check that the backend is running and MongoDB is connected
3. Route Access Issues: Verify user roles are properly set in the database

Debug Mode

Enable debug logging by checking the browser console for:

• API request/response logs
• Authentication state changes
• Route redirection logs

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is licensed under the MIT License.