A production-grade, role-based academic management platform — digitizing student records, teacher data, attendance workflows, and admin operations in one unified system.

🚀 Live Demo · 📖 Documentation · 🐛 Report Bug · 💡 Request Feature

---

📸 Product Gallery

---

🔐 Authentication

Login Page	Sign Up Page
Secure JWT-based login	New admin registration

---

🖥️ Admin Dashboard

Main Dashboard	Navigation & Sidebar
Real-time overview of all modules	Fast sidebar navigation

---

👨‍🎓 Student Management

Students List	Add Student	Edit Student
All student records	Add new student	Update student info

---

👩‍🏫 Teacher Management

Teachers List	Add Teacher	Edit Teacher
Full teacher directory	Create teacher record	Update teacher info

---

📋 Attendance Management

Attendance Overview	Mark Attendance
History & summary view	Daily attendance marking

---

🎬 Full Demo Video

Watch the complete platform walkthrough — login → dashboard → students → teachers → attendance

---

🧩 Why This Project Exists

Most educational institutes still manage students and attendance manually — leading to chaos, errors, and wasted time.

❌ Old Way	✅ With SMS
Manual registers & paper records	Centralized digital database
Data duplication & inconsistencies	Single source of truth
Slow attendance reporting	Real-time tracking & history
No access control	Role-based JWT authentication
Scattered teacher & student data	Unified admin dashboard

---

✨ Features at a Glance

🔐 Authentication & Security

• JWT-based secure login flow
• Password hashing with bcrypt
• Protected API routes for all sensitive operations
• Token-based session management on frontend

👨‍🎓 Student Management

• Add students with full academic profiles
• Update, delete, and fetch student records
• Clean table/list views in admin panel

👩‍🏫 Teacher Management

• Create and maintain teacher records
• Manage subject assignments
• Update or remove teacher entries from directory

📋 Attendance Management

• Mark daily attendance per student per date
• Track present / absent status
• View complete attendance history via API and UI

🖥️ Admin Dashboard

• Unified admin panel for all operations
• Fast navigation between modules
• Form-driven CRUD workflows

---

🏗️ System Architecture

┌─────────────────────────────────────────────────────────┐
│                   FRONTEND LAYER                        │
│          Next.js 14 + TypeScript + Tailwind CSS         │
│              shadcn/ui · Radix UI Components            │
└────────────────────────┬────────────────────────────────┘
                         │  HTTP / JSON (REST API)
                         ▼
┌─────────────────────────────────────────────────────────┐
│                   BACKEND LAYER                         │
│            Flask REST API + JWT Auth                    │
│        SQLAlchemy ORM · Marshmallow Schemas             │
│          Flask-Bcrypt · Flask-CORS · PyMySQL            │
└────────────────────────┬────────────────────────────────┘
                         │  SQL Queries
                         ▼
┌─────────────────────────────────────────────────────────┐
│                   DATABASE LAYER                        │
│                  MySQL 8.0 Database                     │
│                  sms_task1 Schema                       │
└─────────────────────────────────────────────────────────┘

---

🛠️ Tech Stack

Backend

Frontend

---

📁 Project Structure

SMS-Frontend-Backend/
│
├── 📂 BackEnd/
│   ├── app.py                    # Flask app entry point
│   ├── requirements.txt          # Python dependencies
│   └── src/
│       ├── __init__.py           # App factory & config
│       ├── extentions.py         # Flask extensions init
│       ├── models/               # SQLAlchemy DB models
│       ├── routers/              # API route handlers
│       │   ├── auth_router.py
│       │   ├── students_router.py
│       │   ├── teachers_router.py
│       │   ├── attendance_router.py
│       │   └── admin_router.py
│       └── schemas/              # Marshmallow serializers
│
└── 📂 FrontEnd/
    ├── app/                      # Next.js App Router pages
    ├── components/               # Reusable UI components
    ├── hooks/                    # Custom React hooks
    ├── lib/                      # Utilities & API helpers
    └── package.json

---

⚡ Quick Start

Prerequisites

Make sure you have the following installed:

Tool	Version
Python	3.10+
Node.js	18+
MySQL	8.0+
npm / pnpm	Latest

---

Step 1 — Clone the Repository

git clone https://github.com/your-username/SMS-Frontend-Backend.git
cd SMS-Frontend-Backend

---

Step 2 — Backend Setup

cd BackEnd

# Create virtual environment
python -m venv .venv

# Activate — Windows
.\.venv\Scripts\Activate.ps1

# Activate — macOS/Linux
source .venv/bin/activate

# Install dependencies
pip install -r requirements.txt

---

Step 3 — Database Setup

-- Run in MySQL client
CREATE DATABASE sms_task1;

Then update the DB URI in BackEnd/src/__init__.py:

# Replace with your MySQL credentials
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:YOUR_PASSWORD@localhost/sms_task1'

---

Step 4 — Frontend Setup

# From project root
cd FrontEnd

npm install
# or
pnpm install

Create .env.local file in FrontEnd folder:

NEXT_PUBLIC_API_BASE_URL=http://localhost:5000/api

---

Step 5 — Run the Application

Terminal 1 — Start Backend:

cd BackEnd
python app.py
# Running on http://localhost:5000

Terminal 2 — Start Frontend:

cd FrontEnd
npm run dev
# Running on http://localhost:3000

🎉 Open http://localhost:3000 in your browser!

---

🔌 API Reference

All routes are prefixed with /api

Module	Prefix	Description
Auth	/api/auth	Login, token management
Students	/api/students	CRUD for student records
Teachers	/api/teachers	CRUD for teacher records
Attendance	/api/attendance	Mark & view attendance
Admin	/api/admin	Admin management

---

🔧 Troubleshooting

⚠️ Hydration Warning in Frontend

• Test in Incognito / Private mode
• Temporarily disable browser extensions

⚠️ CORS / API Connectivity Issue

• Confirm backend is running on port 5000
• Check NEXT_PUBLIC_API_BASE_URL matches backend URL exactly

⚠️ MySQL Connection Error

• Verify MySQL service is running
• Confirm sms_task1 database exists
• Double-check credentials in BackEnd/src/__init__.py

---

🔒 Security Note

⚠️ Current config has JWT secret and DB URI hardcoded for development.
Before deploying to production, move all sensitive values to environment variables (.env).

---

🗺️ Roadmap & Future Vision

✅ Currently Implemented

• JWT Authentication & bcrypt password hashing
• Student CRUD — full profile management
• Teacher CRUD — directory & subject management
• Attendance Tracking — mark & view history
• Admin Dashboard — unified control panel
• REST API with modular router structure

---

🔰 Phase 2 — Coming Soon (Basic Enhancements)

• Environment-based config via .env
• Role-based UI route guards on frontend
• 📊 Reports & Analytics — attendance %, monthly summaries, PDF export
• 🔍 Search & Filter — find students by name, class, or roll number
• 📁 Student Result Management — enter marks, generate result cards
• 🌙 Dark Mode — light/dark theme toggle
• 📤 Bulk Import via Excel/CSV — add multiple students at once
• Unit & integration tests
• Docker deployment setup
• Swagger / OpenAPI documentation

---

🟡 Phase 3 — Growth Features (Mid Term)

• 👨‍👩‍👧 Parent Portal — parents view child's attendance & results
• 📧 Email Notifications — auto email to parents on absence
• 🏫 Multi-Class & Section Support — manage multiple classes simultaneously
• 📅 Timetable Management — weekly class schedule builder
• 💳 Fee Management — fee records, due dates, payment history tracking
• 📱 Fully Responsive Mobile UI — optimized for all screen sizes

---

🤖 Phase 4 — AI-Powered Features (Advanced)

Powered by LangChain · LangGraph · Generative AI

• 🤖 AI Admin Chatbot — ask "Who had less than 50% attendance this month?" and get instant answers
• 📈 Dropout Risk Prediction — AI flags students at risk based on attendance patterns
• 🧠 Smart Report Generation — generate reports using natural language commands
• 📝 Auto Performance Analysis — AI identifies weak areas per student and suggests improvements
• 🗣️ Voice Attendance — mark attendance via voice commands

---

🏆 Phase 5 — SaaS & Scale (Long Term Vision)

• 🏫 Multi-School SaaS Platform — onboard multiple institutions on one platform
• 💰 Subscription Tiers — Free / Basic / Pro plans for institutes
• 📲 Mobile App — React Native iOS & Android app
• 📊 Super Admin Dashboard — platform-wide analytics across all schools
• 🔗 Third-Party Integrations — connect with LMS platforms and government portals

---

💡 This project is actively growing. New features are added regularly based on real institute needs and community feedback. Star ⭐ the repo to stay updated!

---

👨‍💻 Author

Muzammil Hussain

AI & Backend Developer | Generative AI | Agentic AI Systems

---

⭐ If this project helped you, please give it a star! It means a lot.

Built with ❤️ by Muzammil Hussain — Pakistan 🇵🇰