All Projects
In ProductionLead Engineer & DesignerFlagship · Advanced

Student Manager

Every student. Every record. One platform.

Student Manager replaces the chaos of spreadsheets, paper registers, and disconnected systems with a single, real-time administrative platform — giving institutions complete visibility over enrollment, academics, and performance.

Live Demo
Student Manager

The Story

Why this exists.

The Problem

Most colleges manage student data across Excel sheets, WhatsApp groups, and legacy software that doesn't talk to each other. Admission offices lose track of enrollment stages. Faculty can't access attendance or marks in one place. Administrators spend hours generating reports manually.

Why It Matters

Institutional inefficiency directly impacts student experience. When a college can't track who is enrolled, who is at-risk academically, or who hasn't paid fees — students fall through the cracks. A unified system changes outcomes, not just workflows.

The Solution

A full-stack Next.js platform with role-based access for Admins, Faculty, and Students. Admissions, attendance, marks, fee tracking, and analytics live in one dashboard backed by MongoDB and secured with JWT auth.

Product Features

What it does.

Enrollment Management

Track the complete student lifecycle from application to graduation — admission stage, documents, fee status, and academic standing in one view.

Enrollment Management

Academic Analytics Dashboard

Visualise batch-level performance trends, subject-wise pass rates, and individual student progress over semesters with exportable reports.

Attendance Tracking

Faculty mark attendance digitally. The system auto-calculates percentages and flags students below the minimum threshold with alerts.

Attendance Tracking

Role-Based Access Control

Admins see everything. Faculty see their assigned subjects and students. Students see only their own records. All enforced at the API layer.

Report Generation

One-click PDF export for mark sheets, attendance registers, and fee receipts — formatted to institutional standards.

System Architecture

How every layer connects.

FrontendNext.js 14 + TypeScriptDashboard UI, data tables, chart visualisations, PDF export
BackendNext.js API RoutesREST endpoints for all CRUD operations, auth middleware
DatabaseMongoDB AtlasStudents, courses, attendance, marks, fees collections
AuthJWT + NextAuthRole-based session management — Admin, Faculty, Student
ChartsRechartsPerformance analytics visualisations
DeploymentVercelEdge CDN, serverless API routes

Technical Deep Dive

Under the hood.

Role-Based Access Architecture

Every API route checks the JWT payload for role. Admin routes are gated with an adminOnly middleware. Faculty routes verify that the requesting user is assigned to the subject or batch they're querying. Students can only read their own document — enforced by matching the JWT userId against the record's studentId field. No client-side guard can bypass this because all data fetching goes through the API.

Attendance Calculation Engine

Attendance is stored as individual session records (date, subjectId, studentId, present: boolean). A MongoDB aggregation pipeline computes the percentage per student per subject on demand — no denormalised counters that can drift out of sync. The pipeline groups by studentId, sums presents and totals, and returns the percentage in a single query.

db.attendance.aggregate([
  { $match: { subjectId: ObjectId(subjectId) } },
  { $group: {
      _id: "$studentId",
      total:   { $sum: 1 },
      present: { $sum: { $cond: ["$present", 1, 0] } }
  }},
  { $addFields: {
      percentage: { $multiply: [{ $divide: ["$present", "$total"] }, 100] }
  }}
])

Engineering Decisions

Challenge → Decision → Result.

Server vs. client-side rendering for data-heavy dashboards

Decision

Server Components + streaming for tables, client Components for charts

Why

Tables with hundreds of rows benefit from SSR (no layout shift, faster FCP). Charts need client-side state for interactivity.

Result

Dashboard LCP under 1.8s on 4G.

Report PDF generation — client-side vs. server-side

Decision

Server-side with @react-pdf/renderer

Why

Client-side PDF libraries are slow on large datasets and expose raw data to the browser. Server-side rendering keeps data secure and is faster.

Result

PDF generation < 1.2s for 200-student mark sheets.

Performance & Scale

By the numbers.

500+Students Managedin pilot institution
1.8sDashboard LCPon 4G mobile
< 1.2sPDF Generation200-student mark sheet
< 120msAPI Responsep95 across all routes

Deployment & Infrastructure

Production setup.

Deployment

Next.js on Vercel with serverless API routes. MongoDB Atlas M10 cluster. Environment-based role configs for production vs. staging. Vercel preview deployments for every PR.

CI/CD

GitHub Actions — ESLint + TypeScript check on PR, auto-deploy to Vercel on merge to main.

Monitoring

Vercel Analytics for Core Web Vitals. MongoDB Atlas alerts for slow queries above 200ms.

Challenges & Failures

What broke — and how I fixed it.

Challenge

Concurrent faculty marking attendance for the same session caused duplicate records.

Fix

Added a unique compound index on (subjectId, date, studentId) in MongoDB — duplicate inserts are rejected at the DB level.

Challenge

PDF export timing out for large batches.

Fix

Moved PDF generation to a background job with a polling endpoint — UI shows a progress indicator instead of blocking.

What I Learned

Key takeaways.

Future Roadmap

Where this is going.

v2.0 — 2026

  • AI-driven at-risk student detection based on attendance and marks trends
  • Parent portal with read-only access to ward's academic records
  • Bulk import via CSV for legacy data migration

Screenshots

The product.

Student Manager dashboard

Admin dashboard — enrollment overview

Attendance tracking

Faculty attendance marking interface

Technology Stack

Built with.

Frontend

Next.js 14TypeScript

Database

MongoDB Atlas

Auth

NextAuth

Visualisation

Recharts

Deployment

Vercel

Ready to dive in?

This isn't just a project.
It's a system I designed,
engineered, and shipped.

Live Demo ← All Projects