A fully functional, role-based student management system built with React, TypeScript, Tailwind CSS, and a Shadcn/UI-style component library.
A responsive, modern student management system featuring role-based mock authentication, student data handling, attendance tracking, and grade management — all wrapped in a clean, accessible UI.
- 🔐 Role-based sign-in with dedicated interfaces for Admin, Teacher, and Student accounts
- 📊 Distinct dashboards per role — school-wide stats for admins, class-focused views for teachers, personal attendance for students
- 👨🎓 Student directory with search, grade/status filtering, and full add/edit/delete workflows (delete restricted to Admin)
- 📅 Attendance tracking with per-student present/absent/late marking, class filtering, and a bulk "mark all present" action
- 📝 Grade management to track and manage student performance
- 🧑💼 Profile pages available to every account, with role-specific editable fields
- 💾 Persistent data across navigation and page reloads (backed by
localStorage), including a live activity feed on the admin dashboard - 🧩 Reusable, accessible UI components — Button, Card, Dialog, Select, Input, Badge, Avatar, Sidebar
- 📱 Fully responsive layout with a collapsible sidebar for mobile and desktop
| Technology | Purpose |
|---|---|
| React 18 + Vite | Frontend framework and build tool |
| TypeScript | Type-safe development |
| Tailwind CSS | Styling and design tokens |
| Shadcn/UI + Radix UI | Accessible, reusable component library |
| React Router | Client-side routing |
| React Hook Form + Zod | Form handling and validation |
| Lucide Icons | Icon library |
| Context API | Mock authentication and global state |
| Vitest + Testing Library | Unit and integration tests |
| Playwright | End-to-end browser tests |
Clone the repository and install dependencies:
git clone https://github.com/pavan-dangeti/Student-Management-System.git
cd Student-Management-System
npm install
npm run devThen visit https://student-management-system-cyan-one.vercel.app/ and sign in with one of the demo accounts below (any password of 4+ characters works).
| Role | |
|---|---|
| Admin | admin@school.edu |
| Teacher | teacher@school.edu |
| Student | student@school.edu |
npm run dev # Start the dev server
npm run build # Type-check and build for production
npm run preview # Preview the production build locally
npm run test # Run unit/integration tests (Vitest)
npm run test:e2e # Run end-to-end tests (Playwright)This project builds to a static bundle via Vite and deploys as-is to Vercel, Netlify, or any static host.
npm run buildDeploy the generated dist/ folder. On Vercel: framework preset "Vite", build command npm run build, output directory dist.
Pavan Subramanyam Sai Kumar Dangeti
This project is licensed under the MIT License — see the LICENSE file for details.
🏫 Student Management System — Clean, modern, and fully functional.