Learning Management System (LMS) Agentic

A modern, comprehensive Learning Management System built with Flask (backend) and React 18 + TypeScript (frontend), featuring role-based access control, assignment management, attendance tracking, and an AI-powered chatbot assistant with LangGraph.

✨ Key Highlights

Modern UI/UX: Gradient-based design with smooth animations and responsive layouts
Unified Dashboard: All users (Admin, Teacher, Student) land on a centralized dashboard after login
Static Navigation: Fixed sidebar and navbar with scrollable content area for better UX
AI-Powered Assistant: Built-in chatbot widget accessible from any page
Real-time Notifications: Toast notifications and notification center
Expandable Features: Interactive feature cards with detailed descriptions on homepage

🚀 Features

UI/UX Features

Modern Homepage:
- Gradient hero section with animated backgrounds
- Expandable feature cards with detailed capability lists
- Problem-solution narrative layout
- Role-based feature showcase
- Security highlights section
Unified Dashboard: Single dashboard for all user roles with role-specific quick actions
Static Layout: Fixed sidebar and navbar, scrollable content area only
Responsive Design: Mobile-first approach with collapsible sidebar
Enhanced Visuals: Gradient cards, hover animations, shadow effects
Toast Notifications: Real-time user feedback
Notification Center: Bell icon with dropdown for announcements and events

Core Features

Role-Based Access Control: Three distinct user roles (Admin, Teacher, Student) with different permissions
User Management: Create, update, and manage students, teachers, and admins
Course Management: Create and manage courses, subjects, and sections
Assignment System: Create assignments, submit work, and grade submissions
Attendance Tracking: Mark and track student attendance
Results Management: Record and manage student results
Announcements: Post announcements to specific sections
Events: Create and manage school events
Enrollment: Enroll students in courses
AI Chatbot: Intelligent assistant powered by LangGraph and Groq API

User Roles

Admin

Manage all users (students, teachers, admins)
Create and manage sections
Create and manage courses
Create and manage subjects
Manage enrollments
View all system data

Teacher

Create and manage assignments
View and grade student submissions
Mark attendance
Record results
Create announcements
View assigned courses and subjects

Student

View assigned courses and subjects
View and submit assignments
View attendance records
View results
View announcements
Access AI chatbot

🛠️ Tech Stack

Backend

Flask: Lightweight Python web framework
SQLAlchemy: ORM for database operations with relationship mapping
PyMySQL: MySQL database connector
Flask-JWT-Extended: JWT-based authentication and authorization
Flask-Bcrypt: Secure password hashing
Marshmallow: Data validation, serialization, and deserialization
Flask-CORS: Cross-origin resource sharing configuration
LangGraph: State-based AI agent orchestration framework
LangChain: LLM integration and prompt management
LangChain-Groq: Groq API integration for fast LLM inference
python-dotenv: Environment variable management

Frontend

React 18: Latest React with hooks and concurrent features
TypeScript: Full type safety and better developer experience
Vite: Lightning-fast build tool and HMR dev server
React Router DOM v6: Modern client-side routing
Axios: Promise-based HTTP client with interceptors
Tailwind CSS 3: Utility-first CSS with custom design system
Lucide React: Modern icon library (350+ icons)
React Hot Toast: Beautiful toast notifications
React Markdown: Markdown rendering for chatbot responses
Remark GFM: GitHub Flavored Markdown support

Database

MySQL: Relational database

📁 Project Structure

LMS Agentic/
├── backend/
│   ├── app.py                 # Flask application entry point
│   ├── requirements.txt       # Python dependencies
│   ├── .env.example          # Environment variables template
│   └── src/
│       ├── __init__.py        # Flask app factory with CORS config
│       ├── db.py              # Database configuration
│       ├── extention.py       # Flask extensions (JWT, Bcrypt)
│       ├── models/            # SQLAlchemy models (14 models)
│       │   ├── admin.py
│       │   ├── student.py
│       │   ├── teacher.py
│       │   ├── course.py
│       │   ├── assignment.py
│       │   └── ... (9 more)
│       ├── routes/            # API route handlers (15 blueprints)
│       │   ├── auth.py
│       │   ├── admin.py
│       │   ├── student.py
│       │   ├── chatbot.py
│       │   └── ... (11 more)
│       ├── schemas/           # Marshmallow schemas for validation
│       ├── services/          # Business logic layer
│       └── agent/             # AI chatbot implementation
│           ├── main.py        # LangGraph agent workflow
│           ├── tools.py       # 26 AI tools for database operations
│           ├── tools_list.py  # Tool registry
│           └── prompts.py     # System and role-specific prompts
│
└── frontend/
    ├── package.json           # Node.js dependencies
    ├── vite.config.ts         # Vite configuration
    ├── tailwind.config.js     # Tailwind CSS with custom colors
    ├── tsconfig.json          # TypeScript configuration
    └── src/
        ├── main.tsx           # React entry point
        ├── App.tsx            # Main app with routing (20+ routes)
        ├── index.css          # Global styles with custom animations
        ├── components/        # Reusable components
        │   ├── Layout.tsx     # Main layout with sidebar & navbar
        │   ├── ProtectedRoute.tsx
        │   ├── ChatbotWidget.tsx
        │   └── ...
        ├── contexts/          # React contexts
        │   └── AuthContext.tsx
        ├── pages/             # Page components
        │   ├── Homepage.tsx   # Landing page with features
        │   ├── Login.tsx      # Authentication page
        │   ├── Dashboard.tsx  # Unified dashboard
        │   ├── admin/         # Admin pages (7 pages)
        │   ├── teacher/       # Teacher pages (5 pages)
        │   └── student/       # Student pages (4 pages)
        ├── services/          # API service layer
        │   └── api.ts         # Axios instance with interceptors
        ├── types/             # TypeScript type definitions
        │   └── index.ts
        └── utils/             # Utility functions
            ├── jwt.ts
            └── errorHandler.ts

📋 Prerequisites

Before you begin, ensure you have the following installed:

Python 3.13
Node.js 16+ and npm or yarn
MySQL 5.7+ or MariaDB 10.3+
Git

🔧 Installation & Setup

1. Clone the Repository

git clone https://github.com/GenAIwithMS/LMS
cd "LMS Agentic"

2. Backend Setup

Install Python Dependencies

cd backend
pip install -r requirements.txt

Database Configuration

Create a MySQL database:

CREATE DATABASE llm_LMS;

Create a .env file in the backend/ directory:

# Database Configuration
DATABASE_URI=mysql+pymysql://username:password@localhost/llm_LMS

# JWT Configuration
JWT_SECRET_KEY=your-secret-key-here

# Flask Configuration
FLASK_DEBUG=True
PORT=5000

# Groq API (Optional - for chatbot)
GROQ_API_KEY=your-groq-api-key-here

Note: Replace username and password with your MySQL credentials.

Run Database Migrations

The database tables will be created automatically when you first run the application.

Start the Backend Server

python app.py

The backend will run on http://localhost:5000

3. Frontend Setup

Install Dependencies

cd frontend
npm install

Start the Development Server

npm run dev

The frontend will run on http://localhost:5173 (or another port if 5173 is busy)

🌐 API Endpoints

The API is organized by resource. All endpoints are prefixed with /api/.

Authentication

POST /api/login - User login
POST /api/logout - User logout (if implemented)

Admin Endpoints

POST /api/add/admin - Create admin
GET /api/get/admin - Get admin(s)
PUT /api/update/admin - Update admin
DELETE /api/delete/admin - Delete admin

Student Endpoints

POST /api/add/student - Create student
GET /api/get/student - Get student(s)
PUT /api/update/student - Update student
DELETE /api/delete/student - Delete student

Teacher Endpoints

POST /api/add/teacher - Create teacher
GET /api/get/teacher - Get teacher(s)
PUT /api/update/teacher - Update teacher
DELETE /api/delete/teacher - Delete teacher

Course Endpoints

POST /api/add/course - Create course
GET /api/get/courses - Get course(s)
PUT /api/update/course - Update course
DELETE /api/delete/course - Delete course

Assignment Endpoints

POST /api/create/assignments - Create assignment
GET /api/get/assignments - Get assignment(s)
PUT /api/update/assignments/ - Update assignment
DELETE /api/delete/assignments/ - Delete assignment

Submission Endpoints

POST /api/submit/assignment - Submit assignment (Student only)
GET /api/get/submissions/by/student - Get student submissions
GET /api/get/submissions/by/assignment - Get assignment submissions
PUT /api/update/submission - Update submission (Teacher only)
DELETE /api/delete/submission - Delete submission

Other Endpoints

Sections, Subjects, Enrollments, Attendance, Results, Announcements, Events
See backend/API_DOCUMENTATION.md for complete API documentation

Note: Most endpoints require JWT authentication. Include the token in the Authorization header:

Authorization: Bearer <your-jwt-token>

🔐 Authentication

The application uses JWT (JSON Web Tokens) for authentication:

Login with Email and password
Receive a JWT token
Include the token in subsequent requests via the Authorization header
Tokens are stored in localStorage on the frontend

🎨 Frontend Features

Modern Design System:
- Gradient backgrounds and cards
- Custom animations (fade-in-up, shimmer, pulse)
- Glassmorphism effects
- Smooth hover transitions
Responsive Layout: Works seamlessly on desktop, tablet, and mobile
Fixed Navigation: Sidebar and navbar stay static while content scrolls
Unified Dashboard: Single landing page for all user roles after login
Interactive Homepage: Expandable feature cards with detailed information
Toast Notifications: Instant user feedback for all actions
Notification Center: Real-time announcements and events dropdown
Protected Routes: Role-based route protection with automatic redirects
Error Handling: Comprehensive error handling with user-friendly messages
Type Safety: Full TypeScript coverage for better developer experience
Loading States: Skeleton loaders and spinners for better UX
Form Validation: Client-side validation before API calls

🤖 AI Chatbot

The system includes an intelligent AI-powered chatbot accessible from any page via a floating button:

Features

Role-Aware Context: Chatbot adapts responses based on user role
26 Database Tools: Complete CRUD operations via natural language
LangGraph Workflow: State-based agent with tool calling
Markdown Rendering: Rich formatting for chatbot responses
Persistent Widget: Accessible from any page without navigation
Conversation History: Maintains context within session

Capabilities by Role

Admin Tools

User management (create, update, delete students/teachers)
Course and subject creation
Section and enrollment management
Event creation and management
System-wide data queries

Teacher Tools

Assignment creation and management
Submission grading and feedback
Attendance marking and tracking
Result recording
Announcement posting

Student Tools

Assignment submission
Grade and attendance viewing
Course information queries
Announcement viewing
Schedule information

Technical Implementation

LangGraph: Orchestrates agent workflow with state management
Groq API: Fast LLM inference (llama-3.3-70b-versatile model)
Tool Binding: 26 Python functions exposed as tools
Error Handling: Graceful fallbacks and error messages

Note: Requires GROQ_API_KEY in environment variables. Application runs without it, but chatbot will be unavailable.

🚦 Running the Application

Development Mode

Start the Backend (Terminal 1):
```
cd backend
python app.py
```
Backend runs on http://localhost:5000
Start the Frontend (Terminal 2):
```
cd frontend
npm run dev
```
Frontend runs on http://localhost:5173
Access the Application:
- Open http://localhost:5173 in your browser
- Login redirects all users to /dashboard
- Navigate using the fixed sidebar

First-Time Setup

Create Admin User (via API or database):

# Use API endpoint or insert directly into database
# Default credentials should be created in database

Login Flow:
- Visit homepage → Click "Get Started" or "Login"
- Enter credentials
- Automatically redirected to unified dashboard
- Access role-specific features from sidebar

Production Build

Backend

The Flask app can be deployed using:

Gunicorn
uWSGI
Docker
Any WSGI-compatible server

Frontend

Build the frontend for production:

cd frontend
npm run build

The built files will be in the dist/ directory.

🧪 Testing

Backend Testing

cd backend
flask run --debug

Frontend Testing

cd frontend
npm run dev

📝 Environment Variables

Backend (.env)

# Database Configuration
DATABASE_URI=mysql+pymysql://username:password@localhost/llm_LMS

# JWT Configuration
JWT_SECRET_KEY=your-secret-key-here-change-this-in-production

# Flask Configuration
FLASK_DEBUG=True
PORT=5000

# Groq API (Required for AI Chatbot)
GROQ_API_KEY=your-groq-api-key-here

Frontend (No .env needed)

Frontend uses Vite's default configuration. API base URL is set in src/services/api.ts:

const API_BASE_URL = 'http://localhost:5000/api';

🐛 Troubleshooting

Backend Issues

Database Connection Error:
- Verify MySQL is running
- Check database credentials in .env
- Ensure the database exists
Import Errors:
- Ensure all dependencies are installed: pip install -r requirements.txt
- Check Python version (3.13 recommended, 3.8+ minimum)
- Install python-dotenv separately if needed: pip install python-dotenv
Port Already in Use:
- Change the port in .env or app.py
- Kill the process using the port

Frontend Issues

Cannot Connect to Backend:
- Verify backend is running on http://localhost:5000
- Check CORS configuration in backend/src/__init__.py
- Verify API base URL in frontend/src/services/api.ts
- Ensure no proxy/firewall blocking localhost connections
Build Errors:
- Clear node_modules and reinstall: rm -rf node_modules package-lock.json && npm install
- Check Node.js version (16+ required, 18+ recommended)
- Clear Vite cache: rm -rf node_modules/.vite
Login Issues:
- Check browser console for errors
- Verify JWT token is being stored in localStorage
- Clear localStorage and try again: localStorage.clear()
- Check Network tab for API response status
Styling Issues:
- Ensure Tailwind CSS is properly configured
- Check index.css is imported in main.tsx
- Rebuild with npm run build and restart dev server

📚 Additional Documentation

Backend API Documentation: backend/API_DOCUMENTATION.md
Frontend API Documentation: frontend/API_DOCUMENTATION.md
AI Agent Prompts: backend/src/agent/prompts.py
Database Models: backend/src/models/

🔄 Recent Updates

UI/UX Improvements

✅ Modern gradient-based design system
✅ Unified dashboard for all user roles
✅ Fixed sidebar and navbar with scrollable content
✅ Expandable feature cards on homepage
✅ Enhanced notification system
✅ Improved responsive design
✅ Custom animations and transitions

Features Added

✅ AI chatbot widget with 26 database tools
✅ Role-based dashboard quick actions
✅ Real-time notification center
✅ Toast notification system
✅ Markdown rendering for chatbot
✅ System status indicators (removed from dashboard)

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

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

👥 Authors

Your Name - Initial work

🙏 Acknowledgments

Flask community
React community
Tailwind CSS
LangChain and LangGraph teams

Note: This is a development version. For production deployment, ensure proper security measures, environment variable management, and database backups.

Name		Name	Last commit message	Last commit date
Latest commit History 71 Commits
backend		backend
frontend		frontend
LICENSE		LICENSE
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation

Learning Management System (LMS) Agentic

✨ Key Highlights

🚀 Features

UI/UX Features

Core Features

User Roles

Admin

Teacher

Student

🛠️ Tech Stack

Backend

Frontend

Database

📁 Project Structure

📋 Prerequisites

🔧 Installation & Setup

1. Clone the Repository

2. Backend Setup

Install Python Dependencies

Database Configuration

Run Database Migrations

Start the Backend Server

3. Frontend Setup

Install Dependencies

Start the Development Server

🌐 API Endpoints

Authentication

Admin Endpoints

Student Endpoints

Teacher Endpoints

Course Endpoints

Assignment Endpoints

Submission Endpoints

Other Endpoints

🔐 Authentication

🎨 Frontend Features

🤖 AI Chatbot

Features

Capabilities by Role

Admin Tools

Teacher Tools

Student Tools

Technical Implementation

🚦 Running the Application

Development Mode

First-Time Setup

Production Build

Backend

Frontend

🧪 Testing

Backend Testing

Frontend Testing

📝 Environment Variables

Backend (.env)

Frontend (No .env needed)

🐛 Troubleshooting

Backend Issues

Frontend Issues

📚 Additional Documentation

🔄 Recent Updates

UI/UX Improvements

Features Added

🤝 Contributing

📄 License

👥 Authors

🙏 Acknowledgments

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Contributors

Uh oh!