BoilerTrack

BoilerTrack is a Purdue-themed student productivity platform for tracking GPA, courses, assignments, to-dos, notes/resources, and future GPA planning.

The current version is a local-only MVP. Data is saved in the browser with localStorage, and the app supports both portfolio-safe Demo Mode and blank Personal Mode for real local academic planning.

Project Overview

BoilerTrack brings common student planning workflows into one academic dashboard:

• GPA tracking with Purdue-style grade point rules
• Completed, current, and dropped course organization
• Current-semester GPA what-if planning based on in-progress courses
• Assignment tracking connected to courses
• Broader to-do tracking for school, internships, certifications, projects, and personal tasks
• Notes and resource link organization by course
• Local data import/export and demo reset tools

I built BoilerTrack to practice building a realistic, multi-page productivity app with clean TypeScript models, reusable React components, local persistence, and security-conscious data boundaries.

Why I Built It

Students often track academic planning across separate spreadsheets, LMS pages, notes folders, and task lists. BoilerTrack is a portfolio project that explores what a focused student dashboard could look like, especially for Purdue-style coursework and GPA planning.

The project also demonstrates how to build a useful MVP without a backend first: local data helpers and hooks isolate browser storage so a future Supabase or authenticated database layer can be added later without rewriting every page.

Features

• Purdue-specific GPA scale and GPA calculations
• Completed, in-progress, and dropped course management
• Current-semester GPA what-if planner for testing possible final grades
• Editable assignment tracker connected to local courses
• Editable to-do list for broader academic and career tasks
• Notes and resource link organization by course
• Local data import/export as JSON
• Reset controls for portfolio-safe demo data
• Personal Mode for starting blank and importing a transcript locally
• Local-only data management settings page
• Responsive Purdue black/gold dashboard UI

Tech Stack

• Next.js
• React
• TypeScript
• Tailwind CSS
• Browser localStorage
• GitHub
• Future deployment target: Vercel

Screenshots

Dashboard

GPA Tracker

Courses

Assignments

Future GPA Planner

Settings

Local Setup

Install dependencies:

npm install

Run the development server:

npm run dev

Open the app:

http://localhost:3000

Run lint:

npm run lint

Run a production build with webpack:

npm run build -- --webpack

Note: the default Turbopack build may fail in some sandboxed environments because of a port-binding restriction unrelated to app code. The webpack build command above is the verified build path for this project.

Usage

1. On first launch, choose Public Demo Mode or Personal Mode.
2. Public Demo Mode loads portfolio-safe sample data for screenshots and public demos.
3. Personal Mode starts blank so real academic data can stay local to the browser.
4. Add or edit courses on the Courses page, or import a text-based unofficial transcript locally.
5. Track GPA from completed courses on the GPA Tracker page.
6. Use the Future GPA Planner to test possible final grades for in-progress courses and estimate an end-of-semester GPA.
7. Add assignments, to-dos, and course resource links.
8. Use Settings to switch between Public Demo Mode and Personal Mode, export local data, import a backup, reset demo data, or clear local app data.

Mode switching is handled locally in the browser. Switching to Public Demo Mode replaces saved local data with portfolio-safe demo data. Switching to Personal Mode clears the local workspace so real academic records can be added or imported privately.

Personal Mode

Personal Mode is intended for private use on a trusted device.

• Starts with empty courses, assignments, to-dos, and resources.
• Lets you upload a text-based unofficial transcript PDF from the Courses page.
• Parses the transcript in the browser and saves only selected course records.
• Does not save the raw transcript PDF in localStorage.
• Does not upload transcript, GPA, course, assignment, to-do, or resource data anywhere.
• Can be backed up with Settings export/import.
• Can be switched back to Public Demo Mode from Settings, which restores portfolio-safe demo data.

Keep personal transcript PDFs and exported JSON backups outside the Git repo when possible. The .gitignore includes extra safeguards for common BoilerTrack personal data filenames, but the safest workflow is to store real academic files somewhere private, such as a personal documents folder.

Data and Privacy

BoilerTrack currently stores data locally in the browser using localStorage.

• No real GPA, course, assignment, to-do, or resource data is uploaded to GitHub.
• Demo data is fake and portfolio-safe for screenshots and public presentation.
• Personal academic data should not be committed to GitHub.
• Personal Mode data is local to the current browser and device.
• Settings can switch between Public Demo Mode and Personal Mode; each switch affects only the current browser's local data.
• Clearing browser storage can remove saved BoilerTrack data.
• Import/export can be used to back up and restore local app data.

Security-Conscious Design Notes

• Local-only storage for the MVP keeps real student data off remote services.
• No secrets or API keys are required for the current app.
• No real student data is included in demo mode.
• Data access is separated through storage helpers and React hooks.
• Future authentication and database support can be added behind the existing data layer.
• If Supabase/auth is added later, user data isolation and private access controls should be implemented before storing real academic records remotely.

Project Structure

src/
  app/          Route pages and app layout
  components/   Reusable UI and feature components
  hooks/        Client-side data hooks
  lib/          Shared types, demo data, GPA logic, storage helpers, navigation

Key areas:

• src/app: Next.js App Router pages for Dashboard, GPA Tracker, Courses, Assignments, To-Dos, Notes & Resources, Future GPA Planner, and Settings.
• src/components: App shell, dashboard widgets, forms, cards, sections, badges, and shared UI primitives.
• src/hooks: Local data hooks such as useCourses, useAssignments, useTodos, and useResources.
• src/lib: TypeScript types, GPA calculation helpers, demo data, local storage helpers, and navigation metadata.

Vercel Deployment Preparation

BoilerTrack is ready to be deployed as a public demo through Vercel when desired. Deployment has not been performed from this repo yet.

Recommended Vercel flow:

1. Push the project to GitHub.
2. Create a new Vercel project and connect the GitHub repository.
3. Let Vercel detect the Next.js app automatically.
4. Use the default install command, npm install.
5. Use the production build command npm run build -- --webpack.

Public demo notes:

• BoilerTrack is local-only today. Data is stored in each visitor's browser and will not sync between devices.
• Demo data is portfolio-safe and suitable for screenshots.
• Do not commit personal GPA, course, assignment, to-do, or private resource link data to GitHub.
• No environment variables are required for the current app.
• Add environment variables only when future backend integrations require them.

See docs/deployment.md for more deployment and public-demo safety notes.

Future Improvements

• Supabase database integration
• Authentication and private user accounts
• Google Drive API integration
• Calendar reminders
• Assignment notifications
• Mobile navigation improvements
• Private Brightspace iCalendar import for personal-use assignments
• Weekly schedule and calendar refinements
• Dark mode