Overview
ClassTrack is my MERN capstone project for teachers in Pakistani schools. A teacher logs in, manages classes and student rosters, marks attendance with one tap per student, and views a monthly register with percentages. Attendance marked offline is queued in the browser and syncs automatically when connectivity returns.
Challenge
Teachers take attendance on paper registers, absences surface too late, and parent communication depends on word of mouth. School wifi is unreliable, so the tool has to work offline.
My role
I designed and built ClassTrack as the second project of my MERN capstone — the backend API, the React frontend, offline sync, and the Urdu/English toggle.
Implementation
Express + MongoDB API with JWT auth and teacher-scoped data; React + Vite frontend with Tailwind; one-tap Present/Absent/Leave grid, CSV roster import, monthly register matrix with percentages; IndexedDB outbox queues offline saves and drains on reconnect; service worker caches the app shell; English/Urdu toggle with full RTL flip. Still in progress: WhatsApp absence alerts (currently log-only, no provider wired yet), grades page (API done, UI pending), live deployment.
Live project
In development — live demo coming soon.
View the source code on GitHub →
Technologies
- React
- Vite
- Tailwind CSS
- Node.js
- Express
- MongoDB
- Mongoose
- JWT
- IndexedDB
- Service Worker