Edu-Manage

Project Overview

EduManage Pro is a web-based Student Management System designed to efficiently manage student records in educational institutions. The system allows users to store, manage, and organize student information such as personal details, course enrollment, grades, and attendance.
This project is developed using frontend technologies only and uses the browser’s LocalStorage for data persistence, eliminating the need for a backend database while still ensuring data is saved permanently.

Screenshots

Key Features

Add, edit, and delete student records
Search students by name, student ID, or email
Filter students based on course and grade
Dashboard displaying total students, average attendance, and average grade
View detailed student information in a modal window
Export student records as a CSV file
Fully responsive user interface for mobile, tablet, and desktop devices
Persistent data storage using browser LocalStorage

Functionality

Student Management¹
Users can add new student records and update or delete existing records. The system prevents duplicate student IDs by validating entries before saving.
Search and Filter
The application provides a search feature that allows users to find students using name, student ID, or email. Course-wise and grade-wise filters help users quickly narrow down the required records.
Dashboard Statistics
The dashboard dynamically displays the total number of students. It also calculates and shows the average attendance percentage and average grade based on the stored student data.
Modal-Based Operations
Student add, edit, and view actions are performed using modal windows, ensuring a smooth user experience without page reloads.
Data Storage and Export
All student records are stored in LocalStorage, ensuring data persistence even after refreshing the page. Users can export the complete student dataset as a CSV file for offline use or reporting purposes.

Technology Used

HTML5 is used to create the structure of the web pages.
CSS3 and Bootstrap 5 are used for styling, layout design, and responsiveness.
JavaScript (ES6) is used to implement application logic, form handling, data validation, and dynamic UI updates.
Font Awesome is used to display icons and enhance the visual appearance.
Browser LocalStorage is used to store student data permanently on the client side.

Why This Project Is Useful

EduManage Pro simplifies the process of managing student information by providing a centralized and digital system.
It reduces manual record-keeping, minimizes errors, and saves time for educational administrators.
For students and developers, this project is highly beneficial for understanding JavaScript CRUD operations, data handling, and the practical use of LocalStorage in real-world applications.