ClassTrack is a comprehensive class management system designed to streamline common teaching tasks that are traditionally handled manually or through Excel spreadsheets. This repository contains the frontend implementation of ClassTrack, providing professors with an intuitive interface to manage their classes efficiently.
- Student Information Management
- Automated Grade Computation
- Custom Grading System Configuration
- Attendance Tracking
- Framework: React 19
- CSS Framework: Tailwind CSS with shadCN
- State Management: Zustand
- Routing: React Router
- Build Tool: Vite
- Authentication: Firebase
- Node.js (version compatible with React 19)
- npm (Node Package Manager)
- Clone the repository:
git clone https://github.com/HoJoeNiel/ClassTrack-Frontend.git- Navigate to the project directory:
cd ClassTrack-Frontend- Install dependencies:
npm install- Start the development server:
npm run devThe application will be available at localhost:5173
To create a production build:
npm run buildsrc/
├── components/ # Reusable UI components
├── pages/ # Application views/routes
├── store/ # State Management
│ ├── classes/ # Classes related state management
│ ├── students/ # Students related state management
│ ├── grades/ # Grades related state management
│ └── attendance/ # Attendance related state management
└── services/ # API interaction logic
The frontend interacts with a separate backend service. Authentication is handled through Firebase, with the backend validating tokens provided by the Firebase authentication system.
The project is currently in active development, with focus on:
- Implementing core website structure
- Integrating backend APIs as they become available