cutaway 02 · independent project · live in production
solo build
A training tracker that turns what you logged into charts worth looking at.
- role
- Everything below — front end, API, schema and the design system. Solo, independent project.
- stack
- Next.js 16 · React 19 · MongoDB · Mongoose · Tailwind CSS 4 · GSAP · Lenis · Recharts
- runs on
- Vercel, built and served from the repository.
- status
- Live in production · source public
- see it
- Open the live app · Source
The cutaway
pick a layer to inspect its artifact & decisions
layer 01 of 04 · interface
what the person using it touches
components/AppShell.js · /dashboard/gym & /dashboard/mealAA contrast in light & dark tokens
- logging
- Meals, macros, body weight and every set as kg × reps, on one screen you can use mid-session.
- the landing page
- GSAP drives it, with Lenis for smooth scrolling.
- themes
- A shared app shell and one token set, with light and dark themes that both hold AA contrast.
- the charts
- Recharts renders the progression and trend views.
layer 02 of 04 · api
the contract between them and the data
proxy.js + app/api/* · Edge & Serverless pipelinejose JWT + lib/rate-limit.js
- sessions
- JWT verified at the edge and held in httpOnly cookies.
- passwords
- bcryptjs hashing.
- guards
- Proxy route guards, plus rate limiting on login.
- admin
- Role-based admin over meals, exercises, users and schedules.
layer 03 of 04 · data
the shape the information settles into
lib/workout-session.js · 1 write → 3 derived viewsMongoDB + Mongoose 8
- writes
- Meals, macros, weight and sets are merge-upserted per day, so logging twice in a day updates one record instead of creating two.
- personal records
- A PR is detected as a set is written, not recalculated by a job afterwards.
- progress views
- A GitHub-style activity heatmap fed by actual training volume, per-exercise PR progression, and weight-trend graphs.
layer 04 of 04 · infrastructure
what keeps it running when nobody is watching
Vercel Edge + Serverless · MongoDB Atlaslib/mongodb.js connection singleton
- deploy
- Vercel builds and serves it from the repository.
- the trade
- There is no VPS to keep patched here — which is the opposite trade to short.link, and the reason the two projects look different underneath.
Constraints
what the build had to work around
- two themes, one token set
- Light and dark both had to hold AA contrast, which constrains every colour in the system before a single component is written.
- records at write time
- Detecting a personal record as a set is written rather than in a nightly job is a decision about where the cost goes: writing does slightly more work so that reading is instant.
- one shell for four jobs
- Authentication, logging, charts and admin all live in one app shell, so the design system has to serve four quite different screens without fragmenting.
The auth model and the design system are the two things here I would carry into the next project unchanged.
Other cutaways
two more
01short.linkinspect short.link cutaway →A URL shortener where the backend was the hard part — rotating refresh tokens and a deploy that rolls itself back.01Spain Collection — a rebuild studyinspect spain collection study →A rebuild study: someone else's design, rebuilt to learn scroll choreography from the inside (2 layers).↖All work & studiesback to the showcase →