GOWTHAM C D Logo

GOWTHAM C D

SDE & Creative Technologist

Desktop Experience Recommended

gg-logoGOWTHAM C D - Portfolio

[ SYS.ARCHIVE_RECORD ] - Student-Tracking

> A comprehensive evaluation and tracking platform for Faculty to monitor student progress, attendance, skills, and daily tasks.

// INDUSTRY_TAG
EdTech / Developer Tools
// DEPLOYMENT_YEAR
// SERVICE_PROTOCOLS
Student Tracking Platform
ASSET_VIEWER_ACTIVE
Student-Tracking hero image
// PROBLEM_STATEMENT

Challenge

Develop a robust, data-intensive tracking platform for educational institutions. The system required efficient handling of bulk student data and complex metric tracking. Key obstacles included:

>Managing bulk onboarding of student records and skill reports via Excel/CSV file uploads.

>Enforcing secure authentication utilizing JWT and Google Auth integration.

>Tracking complex, multi-dimensional student metrics like daily attendance and skill matrices.

>Creating a highly responsive, modern glassmorphism UI for seamless faculty interaction.

>Ensuring accurate data mapping for class venues and student assignments without database bottlenecks.

// SYSTEM_ARCHITECTURE

Solution

High level architecture of the application.

Due to the need for efficient bulk data handling and secure access for faculty, the architecture was built as a full-stack JavaScript application utilizing a robust relational database.

Instead of manual student entry, the system integrates a dedicated file-parsing pipeline for Excel and CSV uploads, allowing administrators to seamlessly create users and update skill reports for up to 5000 records at a time.

  • #

    Auth Pipeline (Faculty & Admin-Driven): The system utilizes jsonwebtoken and google-auth-library to ensure secure authentication flows. Access is restricted and verified through middleware, protecting internal routes and sensitive student data.

  • #

    Data Ingestion & Processing: Integrated xlsx and csv-parser modules on the backend to handle large-scale document uploads. The system performs strict validation (e.g., exact case-insensitive venue matching) before committing records to the MySQL database.

  • #

    State & UI Architecture: The frontend utilizes React with Vite, employing zustand for lightweight, scalable state management, and modern CSS for a premium glassmorphism aesthetic. This ensures high performance even when rendering large data grids for attendance and skill tracking.

Visit website
// DEPLOYED_MODULES

Technologies

React (Vite) module

React (Vite)

NodeJS (Express) module

NodeJS (Express)

MySQL module

MySQL

Vanilla CSS (Glass) module

Vanilla CSS (Glass)

Zustand module

Zustand

Docker module

Docker

SYS.RELATED_ARCHIVES
main*
Go Live