ProjectsStockroom
Stockroom
Public demo
Stack
- Next.js
- React
- TypeScript
- Tailwind
- Zod
- TanStack Form
- TanStack Pacer
- TanStack Table
What it is
Dashboard remapped to on-hand stock and a movement ledger. Seeded public demo, not a private warehouse.
Why it exists
Outside my day job, I took a supplied personal finance design through implementation and deployment to keep growing my frontend craft, then adapted it to inventory. Building it gave me the idea for a finance app of my own.
How it works
Overview metrics derive from an append-only stock-movement ledger. The public host answers on-hand quantity and why it changed from seeded fictional inventory. No personal warehouse and no shared finance data.
Story
I wanted to see where things were going.
Outside my day job, I took a supplied personal finance design and built it into a working app to keep growing my frontend craft. Building it gave me an idea for myself. I wanted the same kind of picture of my own money: what comes in, what goes out and the patterns behind both. That would help me think about investing and notice where money went into things that lost value.
The first job was turning the design into a working app. I chose Next.js with TypeScript, asked for semantic, accessible markup and reviewed the work against my checklist. AI coding agents wrote the code.
Then I adapted it into Stockroom, an inventory app. The overview and searchable history carried over well. The rules behind the numbers didn't. Moving stock between locations changes each location's quantity without changing the total. Reusing the layout couldn't settle that.
So I kept the interaction structure and based the overview on stock movements. Every total on the overview traces back to a movement in the ledger. Finance pages like saving pots and recurring bills stayed out. In testing, a receipt changed the metrics, and an attempt to take stock below zero was rejected without losing what had been typed.
A second review turned up three problems. The selected page number was white text on a white background, the select arrows sat against the border, and the direction filter changed the URL without narrowing the rows. All three are fixed on the live app.
Where it stands: the demo uses fictional inventory and resets on refresh.
Stockroom gave me an app where every total on the overview can be traced back to the movements that changed it. The idea it gave me became Ledger, the app I now run my monthly money through.
Design: Frontend Mentor's Personal Finance App (opens in a new tab). Inventory adaptation and build: Royer Adames, with AI agents.