G-Tracker: The Live Attendance Dashboard
A full-stack web application built for GITAM students that evolved from a simple calculator into a personalized dashboard with secure authentication and live tracking features, based on user feedback.
The Challenge
The initial version of my attendance calculator successfully automated data entry, but user feedback revealed a desire for a more robust, persistent experience. Students wanted to track their attendance over time, see a holistic dashboard, and make live adjustments (e.g., marking a class as attended/missed) without having to re-paste data from the portal for every small change.
The Goal
The objective was to evolve the tool from a single-use utility into a comprehensive, personalized attendance management dashboard. This required implementing secure user accounts, a persistent database for storing attendance data, and a dynamic UI that would allow for live tracking and "what-if" scenarios for each course.
The Approach
User Feedback & Planning
I actively gathered and analyzed feedback from users of the first version. Based on their input, I planned a V2 architecture centered around user accounts and a persistent dashboard experience.
System Design & Technology
I chose the MERN stack and integrated Firebase for its robust and easy-to-implement Authentication and Firestore database. The backend Node.js server was enhanced to handle user data and re-parsing requests securely.
Iterative Development
The front-end was completely rebuilt in React to support a component-based, card-style dashboard. I focused on creating a clean, intuitive interface where users could see their overall status and individual course progress at a glance.
Key Features
Secure Firebase Authentication
Users can create secure accounts to save their attendance data, providing a personalized and persistent experience.
Live Attendance Dashboard
An intuitive dashboard that displays overall status and a detailed breakdown for each course in organized cards.
Automated Data Parsing
The core feature remains: users paste raw data from the GITAM portal, and the backend parses it instantly to populate the dashboard.
Interactive Tracking
Users can manually mark classes as "Present" or "Absent" to see real-time updates to their percentages without needing to re-parse data.
Per-Course Goal Calculator
Each course card includes a calculator to determine exactly how many classes must be attended to reach a specific goal.
One-Click Data Update
A simple "Update Data" button allows users to refresh their attendance by pasting new data from the portal at any time.
The Result
G-Tracker evolved from a simple utility into an indispensable, personalized dashboard for GITAM students. The introduction of user accounts and live tracking dramatically increased user engagement and retention. The application now provides a complete solution for attendance management, not just calculation, making it a far more powerful and valuable tool.
What I Learned
This project was a crucial lesson in iterative development and the importance of listening to user feedback. I significantly enhanced my skills in full-stack development by integrating a third-party service like Firebase for authentication and database management. It taught me how to scale a simple idea into a full-fledged, secure, and user-centric web application.