The Student Management System (SMS) is a modern, role-based, and modular web application designed to streamline academic and administrative operations within educational institutions. It features a centralized dashboard to manage student data, academic records, resources, and institutional services.
The system is organized into independently functional modules with role-based access control (alumni
, faculty
, student
, parent
). All data is managed on the frontend using localStorage
, offering a fully interactive experience without a backend.
- 🎓 Admission Management – Enroll and manage student admissions dynamically.
- 👩🏫 Faculty Management – Manage faculty profiles, roles, and subjects.
- 📝 Examination Management – Conduct exams, manage results, analyze performance.
- 📄 Marksheet Management – Generate and manage student report cards.
- 📊 Grading System – Assign grades with visual performance analysis.
- 📅 Time Table Management – Plan weekly academic schedules per class/role.
- 🏠 Hostel Management – Room allotment, availability calendar, alerts, auto-assignment.
- 🍽 Canteen Management – Menu tracking, digital orders, and cashless transactions.
- 🚌 Transportation Management – Assign routes/vehicles with CSV export and live search.
- 💳 Fees & Payment Management – Track and record fee payments, export records, generate alerts.
- 💼 Internship & Placement – Log internship/job details, search/sort/export opportunities.
- 🎓 Scholarship Management – Register applicants, manage awards, filter analytics.
- 📚 Library Management – Issue/return books, calculate fines, generate overdue alerts.
- 🆔 ID Card & Certificate Generation – Generate QR-embedded cards & PDFs with e-signatures.
- 📩 Mass SMS System – Send role-based announcements and alerts via simulated SMS interface.
- 🎉 Event Management – Schedule and coordinate institutional events and notices.
- 🎓 Alumni Management – Store and manage alumni records and institutional engagement.
- 🔐 Role-Based Access Control – Each module adjusts dynamically based on user role (alumni/faculty/student/parent).
- 📱 Responsive Design – Built with mobile-first principles using Tailwind CSS / Bootstrap (where applicable).
- 📤 Data Export – CSV & PDF export support for all key modules.
- 📈 Analytics – Charts and summary views for academic and operational insights.
- 🖨 Print-Ready Documents – Stylized ID cards, certificates, and mark sheets are PDF and printer-friendly.
- 📦 Frontend-Only Architecture – All features work without a backend; data is stored in the browser via
localStorage
.
- Frontend: HTML5, CSS3, JavaScript ES6+
- Styling: Tailwind CSS, Bootstrap (select modules)
- Data Handling: Browser
localStorage
, JSON - Export Libraries:
jsPDF
,html2canvas
, custom CSV generation
student-management-system/
│
├── index.html # Landing / authentication page
├── dashboard.html # Main dashboard after login
│
├── admission-section.html
├── attendance-management.html
├── alumni-management.html
├── canteen-management.html
├── event-management.html
├── examination-management.html
├── faculty-management.html
├── grading-section.html
├── hostel-management.html
├── id-card-certificate.html
├── internship-placement.html
├── library-management.html
├── marksheet-section.html
├── mass-sms-system.html
├── payment-section.html
├── scholarship-management.html
├── time-table-section.html
├── transportation-management.html
│
├── assets/
│ └── img/ # Static image resources
- Clone the repository
git clone https://github.com/your-username/student-management-system.git
cd student-management-system
-
Open
index.html
in your browser
This is the entry point with user login and role selection. -
Log in using a mock role
- Choose:
Admin
,Faculty
,Student
, orParent
- Based on the role, the dashboard will show authorized modules only.
- Choose:
- 🌐 Firebase or Node.js backend integration
- 🔄 Real-time sync and cloud storage
- 📲 Progressive Web App (PWA) setup
- 🔔 Push notifications for alerts/reminders
Thanks to open-source tools and libraries used in this system:
Tailwind CSS
, Bootstrap
, jsPDF
, html2canvas
, and the JavaScript developer community!