Full Stack · Portfolio Project
Stop-Motion Tracker
A full-stack web app for tracking every shot in a stop-motion production, from set build through to sound design.
| Scene | Shot | Status | Frames |
|---|---|---|---|
| 01 | 01 | Done | 288 |
| 01 | 02 | Sound Design | 192 |
| 02 | 01 | Shooting | 96 |
| 02 | 02 | Set Build | 0 |
Every Shot, Frame by Frame
Rather than build another to-do app, I modelled a real production workflow. Each shot moves through six stages:
How It Fits Together
A request travels from the React UI through a typed fetch layer to a REST API, then down to the database.
The TypeScript Shot interface mirrors the C# model exactly, so mismatches between frontend and backend are caught at compile time.
Challenges
SQL Server needed Docker and extra setup on my M1 Mac.
Switched to SQLite, an almost one-line change thanks to EF Core.
The browser blocked requests from the React dev server to the API.
Added a CORS policy for the Vite dev server.
Shot statuses sent as strings failed validation, as .NET expects enums as numbers.
Registered JsonStringEnumConverter on the API.
Next Steps
Drag-and-drop status updates, filtering by scene or animator, real-time team updates, authentication and deployment.