Student Management System

In this phase of development, I built a “Total Students” dashboard page for my Student Management System. The goal of this module is to provide a clear, structured overview of student distribution across different academic levels, along with real-time statistics and export functionality.
Objective

The main objective was to design a clean, responsive UI that displays:

Total number of students
Breakdown by education levels (Pre-Primary to Higher Secondary)
Class-wise distribution of boys and girls
Easy data export for reporting purposes

I created a set of top summary cards showing:
Pre-Primary, Primary, Lower Secondary, Secondary, Higher Secondary
Grand Total students

These values are dynamically calculated using data stored in localStorage.
Whenever new students are added, the stats automatically update.

Data Handling via Local Storage

Instead of using a backend, I used:

localStorage.getItem(‘students’) to fetch student data
JSON parsing to manage records

Each student is mapped to a class using a CLASS_MAPPING object, which organizes them into levels like:

Nursery → Pre-Primary
Class 1–5 → Primary
Class 6–8 → Lower Secondary
etc.

This allows automatic grouping and counting.

Gender Detection Logic

A simple function was implemented to determine gender:

Based on the last letter of the student’s name
const girlNames = [‘a’, ‘i’, ‘y’, ‘e’];

While not perfect, this approach helps quickly estimate gender distribution without extra input fields.

Tab-Based Navigation System

I implemented a tab system to switch between levels:

Pre-Primary
Primary
Lower Secondary
Secondary
Higher Secondary

Each tab dynamically shows:

Grade cards
Detailed student table

This improves usability and keeps the UI clean.