A comprehensive, frontend-only LMS application built with React, TypeScript, and modern web technologies. Features role-based authentication and personalized portals for different user types.
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run buildUse these credentials to explore different user roles:
| Role | Password | |
|---|---|---|
| Admin | admin@demo.app | Admin@123 |
| Tutor | tutor@demo.app | Tutor@123 |
| Student | student@demo.app | Student@123 |
| Parent | parent@demo.app | Parent@123 |
- Frontend: React 18 + TypeScript
- Styling: Tailwind CSS + shadcn/ui
- State Management: Zustand
- Routing: React Router v6
- Forms: React Hook Form + Zod
- Data: Mock JSON files + localStorage
- ✅ Role-Based Access Control (RBAC) - Dynamic interfaces based on user role
- ✅ Authentication System - Mock auth with localStorage persistence
- ✅ Responsive Design - Mobile-first approach with collapsible sidebar
- ✅ Dark/Light Theme - System preference detection
- ✅ Modern UI Components - shadcn/ui with custom design system
- ✅ Type Safety - Strict TypeScript configuration
src/
├── components/ # Reusable UI components
│ ├── auth/ # Authentication forms & guards
│ ├── common/ # Layout components (Header, Sidebar)
│ └── ui/ # shadcn/ui components
├── data/ # Mock JSON data files
├── features/ # Feature-specific code
│ ├── auth/ # Auth schemas & validation
│ └── navigation/ # Role-based navigation config
├── lib/ # Core utilities
│ ├── mocks/ # Mock API services
│ ├── store/ # Zustand stores
│ ├── types/ # TypeScript type definitions
│ └── utils/ # Helper functions
└── pages/ # Route components
├── admin/ # Admin portal pages
├── auth/ # Authentication pages
└── student/ # Student portal pages
The application features a comprehensive design system with:
- Brand Colors: Professional blue primary, warm orange secondary
- Semantic Tokens: All colors defined as HSL values in CSS variables
- Gradients: Custom gradient patterns for hero sections
- Typography: Consistent font hierarchy
- Components: Fully themed shadcn/ui components
- System overview dashboard with KPI metrics
- User management (students, tutors, parents)
- Class scheduling and enrollment
- Financial reporting and billing
- System notifications and alerts
- Personal learning dashboard
- Class schedule and upcoming sessions
- Assignment submissions and grades
- Progress tracking and analytics
- Resource library access
- Teaching dashboard
- Class management
- Assignment creation and grading
- Student progress monitoring
- Child's academic progress
- Class schedules and assignments
- Billing and payment management
- Communication with tutors
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
- Frontend Only: No backend APIs, all data mocked
- localStorage: Session persistence and data storage
- Mock Services: Simulated network delays and responses
- Type Safety: Strict TypeScript with proper type definitions
The application is fully responsive with:
- Mobile-first approach
- Collapsible sidebar navigation
- Adaptive grid layouts
- Touch-friendly interactions
To extend this application:
- Add Backend: Replace mock services with real API calls
- Database Integration: Connect to actual database
- Real Authentication: Implement JWT or OAuth
- File Uploads: Add real file handling capabilities
- Real-time Features: WebSocket integration for live updates
- Testing: Add comprehensive test coverage
- Performance: Implement code splitting and lazy loading
This project is for demonstration purposes. Built with ❤️ using modern web technologies.
Note: This is a frontend-only demo application. All data is mocked and stored in localStorage for demonstration purposes.