SCHOOL PROJECT

AECS-2 Student Portal

A full-stack web app I built for Atomic Energy Central School-2, Mumbai. Students could log in with their school email to check exam results, sports prizes, CCA participation, and more.

Note: This project was originally hosted at students.aecs2mum.in and was actively used by students. It has since been taken down due to a change in school administration. The live version is not being re-hosted as it contains real student data and I don't want to put other students' information out there.

↓

Architecture

3 servers, OTP login, CSV-backed data

React + Vite
Frontend · :5173

↔

Express.js
Auth Server · :3002

↔

Express.js
Data API · :3001

↔

CSV Files
Data Store

Student enters school email → gets OTP via Gmail → OTP verified → data pulled from CSVs by roll number

Tech Stack

What I used to build this

⚛

React + TypeScript

Component-based frontend with type safety. Used Context API for theming and auth state.

⚡

Vite

Fast dev server with hot reload. Way quicker than CRA for development.

🎨

Tailwind CSS

Utility classes for styling. Made it easy to do dark/light mode across the whole app.

🔧

Express.js

Two separate servers: one handles OTP auth, the other serves student data from CSVs.

📊

Chart.js

Horizontal bar charts to show exam scores by subject. Makes it easy to see where you stand.

🔒

Nodemailer + Gmail

Sends OTPs through the school's Gmail. Also has an admin bypass for testing.

What's in the App

All the pages students could access

📈 Dashboard

Exam results with bar graphs, score cards comparing your marks to the class median and topper. You can switch between exams (HY, MCQ-1/2/3, PT-1/2) and years.

👤 Personal Details

Basic student info from the class CSV files: name, class, section, roll number, etc.

🏆 Sports Prizes

Sports achievements table with event, house, position, prize money, and points. Separate pages for primary and secondary students.

🏅 CCA Events

Co-curricular activity participation and results across years.

🚀 Clubs

Which clubs a student is part of and their activities.

📚 e-Bookshelf

Study materials and resources students could download.

📄 Circular

School circulars and notices, all in one place.

💬 Suggestions & Grievances

Students could submit feedback or complaints directly through the portal.

Screenshots

How it looked

Login Page

Enter your school email, get an OTP. That's it.

OTP Verification

4-digit OTP sent to your school email. Email is masked for privacy.

Dashboard (Light)

Bar chart with your scores, exam selector at the top, score cards below.

Dashboard (Dark)

Same thing in dark mode. Every page supports both themes.

Sports Prizes (Light)

Table showing events, positions, prize amounts, and house points.

Sports Prizes (Dark)

Dark mode version with the active page highlighted in the sidebar.

Features

The main stuff

🔒

OTP Login

No passwords. Just enter your school email, get a 4-digit code, and you're in.

🌓

Dark / Light Mode

Toggle between themes. Your choice is saved so it sticks between sessions.

📅

Multi-Year Support

Picks up the current academic year automatically and looks back up to 2 years if needed.

📊

Score Comparison

Bar charts for your marks. Score cards show how you did vs the class median and the topper.

📱

Works on Mobile

Sidebar collapses on smaller screens. Tested on phones and tablets.

🛠

Admin/Test Mode

Add -admin to any email and use OTP 0000 to get in without sending a real email.