Learning Management System

Project overview

Your role

• Frontend Developer, designed and implemented 8 role based dashboards
• Super Admin Dashboard (Vite + React + TypeScript + Redux)
• Admin Panel, Finance, Academic, Operations, General (Next.js 15 App Router)
• Role Base Dashboard, Teacher, Student, Guardian (Next.js 15 App Router)
• Role prefixed routing and protected routes
• permission driven UI (sidebar, forms, actions show/hide)
• API integration with Axios and JWT
• Dashboards, CRUD screens, calendars, charts, and PDF export
• Context API and Redux state management
• Responsive UI with Tailwind CSS 4

Tech stack used

• Frontend: Next.js 15.3, Vite 6, React 19, JavaScript + TypeScript, Tailwind CSS 4
• State: React Context API (Admin, Role Base), Redux Toolkit (Super Admin)
• HTTP & Auth: Axios, JWT Bearer auth, jwt-decode, localStorage tokens
• UI Libraries: Recharts, FullCalendar, Framer Motion, Lucide React, React Icons
• Export: html2canvas + jsPDF
• Backend (integrated): Node.js, Express 4.x, MongoDB, Mongoose, JWT, bcrypt, AWS S3
• Security: Helmet, CORS, rate limiting, sanitization

Key features

• JWT based login across all dashboards
• Role based route guards and module level permissions
• Dynamic sidebar showing only allowed modules
• Student and teacher CRUD with performance tracking
• Class scheduling via FullCalendar (day/week/timegrid views)
• Attendance tracking and learning materials distribution
• Invoice creation, family billing, and payment tracking
• Financial reports with PDF export
• Room management, teacher availability, and task management
• Feedback system across teacher, student, and guardian flows
• Notifications and WhatsApp integration (backend)
• Super Admin oversight, admin CRUD, roles, permissions, system reports

Platform modules

User roles

Target audience

• Tutoring centers and coaching institutes
• Private learning academies
• Institutes where students, teachers, parents, and multiple admin departments work together

Code structure & architecture

LMS/
└── Admin-panel/lms-admin/
    ├── lms-backend-3.0/
    │   └── lms-2.0-backend/
    │       ├── models/          (23 Mongoose models)
    │       ├── routes/
    │       ├── controllers/
    │       ├── middlewares/
    │       └── utils/
    ├── admin-dashboard/lms-admins/   ← 4 Admin roles (Next.js)
    │   └── src/app/
    │       ├── academic/
    │       ├── finance/
    │       ├── operations/
    │       └── general/
    ├── super/lms-super-admin/        ← Super Admin (Vite + Redux)
    └── LMS-role base/lms-role base/    ← Teacher / Student / Guardian
        └── src/app/dashboard/

Architecture:
┌─────────────────┐  ┌─────────────────┐  ┌──────────────────────┐
│ Super Admin     │  │ Admin Panel     │  │ Role Base (T/S/G)    │
│ Vite + Redux    │  │ Next.js + Ctx   │  │ Next.js + Context    │
└────────┬────────┘  └────────┬────────┘  └──────────┬───────────┘
         └────────────────────┼───────────────────────┘
                              │  Axios + JWT Bearer
                    ┌─────────▼─────────┐
                    │  Express REST API │
                    └─────────┬─────────┘
                              │
                    ┌─────────▼─────────┐
                    │  MongoDB          │
                    └───────────────────┘

Performance optimizations

• Dashboard data cache with 5 minute TTL (DashboardContext.js)
• Axios request throttling with 1 second interval (AxiosConfig.js)
• Duplicate request cancellation (AxiosConfig.js)
• 429 retry with exponential backoff (AxiosConfig.js)
• Debounced calendar API calls (FullCalendarComponent.jsx)
• useCallback and useMemo in contexts and list components
• Search debouncing on teacher and student lists
• Turbopack dev server on Role Base app (next dev --turbopack)
• Framer Motion viewport={{ once: true }} for scroll animations
• Redux normalized state in Super Admin slices
• Backend gzip, rate limiting, MongoDB indexes, and pagination

• Role prefixed routing, same components across four admin URL prefixes
• permission driven UI with hasPermission(module, action) for buttons and sidebar
• Nested Context Provider composition (Auth → Dashboard → Student → …)
• Feature based API modules, StudentsApi.js, TeacherApi.js, and related services
• Client-side route guards with JWT and role checks
• Redux feature slices for Super Admin domain wise CRUD flows
• 23 MongoDB models on backend including User, Student, Family, Class, Invoice, and more

Challenges & solutions

• Eight roles sharing the same modules with different permissions.

  Role prefixed route trees, shared components, and hasPermission() checks.

• Four admin roles with duplicate page trees.

  Single Next.js app with /academic, /finance, /operations, and /general prefixes for code reuse.

• Dynamic sidebar per role.

  Fetch permissions from API and build nav items from moduleNavMap.

• API rate limiting and duplicate calls.

  Axios throttling, pending request tracking, and 429 retry logic.

• Heavy calendar with many classes.

  Debounced fetch on date range change.

• Multiple frontend apps connected to one API.

  Consistent JWT auth and feature based API modules across all frontends.

• Super Admin vs Admin state complexity.

  Redux for complex CRUD flows vs Context API for simpler admin and role base flows.

• Guardian vs Family naming mismatch across stack.

  Mapped backend guardian and /parent API to frontend /dashboard/family routes.

Results

• Delivered 8 complete role based dashboards from Super Admin to Student and Guardian.
• Built 3 frontend applications (Next.js × 2, Vite × 1) on one unified REST API.
• RBAC across 10 modules with granular actions and permission driven UI.
• Full institute workflow, enrollment, scheduling, attendance, billing, and feedback.
• Production ready patterns, JWT auth, route guards, API throttling, caching, and pagination.
• Modern stack, React 19, Next.js 15, Tailwind CSS 4, TypeScript (Super Admin).
• Rich UI, FullCalendar scheduling, Recharts analytics, PDF export, Framer Motion animations.