Student Progress Tracker
Full-stack EdTech · React · TypeScript · Supabase · Assessment data · Teacher dashboard
A full-stack classroom application for recording assessment evidence, tracking skill mastery, and helping teachers quickly identify where students need support.
Live demo: https://student-progress-tracker-sepia.vercel.app/?demo=1
All student names and records in this project are fictional. No real student information is used in the demo or repository.
Why I built it
As an educator, I routinely use assessment results to decide who has mastered a skill, who is partially there, and who needs reteaching. This project turns that classroom workflow into a database-backed application.
Instead of keeping progress in disconnected notes or spreadsheets, the app links students, skills, and dated assessment evidence and summarizes the latest mastery status in a teacher-facing dashboard.
Public portfolio demo
The demo opens without registration and uses fictional classroom data in memory. Visitors can record assessments, inspect history, update the mastery grid, and reset the samples. It does not initialize Supabase or read/write account data. Refreshing clears demo changes. Use Log in / Create account to access the authenticated application.
What the application does
- secure signup, login, logout, password reset, and session handling
- protected authenticated application routes
- create, edit, list, and delete student records
- create, edit, list, and delete skill records
- enter dated assessment evidence
- view assessment history over time
- track three mastery states: mastered, partial, needs help
- display a students × skills mastery grid using each pair's most recent status
- isolate each teacher's data through Supabase Row Level Security
- provide loading, empty, and error states for core workflows
- run automated tests for dashboard calculations, forms, authentication, and password reset
- deploy through Vercel
Tech stack
| Layer | Technology |
|---|
| Frontend | React, TypeScript, Vite |
| Styling | Tailwind CSS |
| Backend | Supabase |
| Database | PostgreSQL via Supabase |
| Authentication | Supabase Auth |
| Security | Row Level Security policies |
| Testing | Vitest, Testing Library |
| Browser testing | Playwright |
| Deployment | Vercel |
| Workflow | GitHub Issues, branches, pull requests |
Engineering highlights
Architecture at a glance
flowchart LR
UI[React and TypeScript] --> SDK[Supabase client]
SDK --> Auth[Supabase Auth]
SDK --> DB[(PostgreSQL)]
DB --> RLS[Row Level Security and tenant constraints]
CI[GitHub Actions] --> Verify[Lint, tests, browser smoke tests, build]
Verify --> Deploy[Vercel]
See the detailed architecture and data model.
Data isolation
The app uses Row Level Security so authenticated teachers can only read and write rows associated with their own user account. Composite tenant-aware foreign keys also prevent an assessment from referencing a student or skill owned by another account.
Assessment history instead of one static score
Assessment records are dated. The dashboard derives the current mastery state from the most recent evidence for each student-skill pair, while the history remains available for review.
Real deployment debugging
Several issues only became visible when moving from local development to production:
- Vite environment variables had to use the
VITE_ prefix before the deployed frontend could read the Supabase configuration.
- Tailwind was installed but not registered with Vite, so production CSS initially omitted required utility classes.
- Account deletion exposed missing cascade behavior across tables referencing
auth.users; the schema was corrected so related application records can be handled safely.
These fixes are documented because deployment and debugging are part of the engineering work, not separate from it.
Project workflow
Feature work follows a team-style process rather than being committed directly to main:
- define work in GitHub Issues
- develop on a feature branch
- test locally
- open a Pull Request
- review the change
- merge into
main
That workflow was used to build the app incrementally and to keep implementation decisions visible.
Local setup
git clone https://github.com/marsharine-cs/student-progress-tracker.git
cd student-progress-tracker
npm install
cp .env.example .env.local
npm run dev
Add your Supabase project URL and anon key to .env.local before running the application.
Database setup
- Create a Supabase project.
- Open SQL Editor in Supabase.
- Run
supabase/schema.sql.
- Add the project URL and anon key to
.env.local.
The schema creates the core tables, tenant-aware foreign keys, indexes, and per-user policies. Existing deployments can apply supabase/harden-tenant-boundaries.sql. A read-only inspection script is available at supabase/inspect.sql.
Useful scripts
npm run dev
npm test
npm run test:watch
npm run test:e2e
npm run lint
npm run build
Playwright requires a local Chromium installation. Run npx playwright install chromium before the first local browser test.
Engineering documentation
Verification boundaries
The automated suite contains 27 Vitest/Testing Library tests plus Playwright browser smoke tests for the public authentication interface. Schema regression tests verify the tenant protections checked into this repository. They do not prove that the latest SQL migration has been applied to a remote Supabase project; production migration verification requires database access and is documented separately.
Known limitations
- Live cross-account isolation still requires verification against a disposable staging or production Supabase project.
- The browser tests intentionally avoid creating accounts in the live service.
- This demonstration uses fictional records and is not presented as a FERPA-compliant student-information system.
- Operational monitoring and larger-dataset performance testing remain future work.
Current status
Core application functionality is implemented and deployed. Repository-level tenant hardening, CI, component tests, and browser smoke tests are implemented. Applying and recording the tenant-hardening migration against the live Supabase project remains a separate deployment task.
What this project demonstrates
- full-stack application development
- React and TypeScript component work
- relational data modeling
- authentication and authorization
- database-backed CRUD workflows
- assessment-data logic
- automated testing
- production debugging
- Git/GitHub collaboration practices
- EdTech product thinking grounded in a real teaching workflow
About the developer
Built by Marsharine A. Simpson — Computer Science educator, curriculum developer, EdTech builder, and technology professional.
