Hiring exercise for a frontend / UI role.
The backend (Next.js Pages Router, Prisma/SQLite, tRPC) is already wired. Your job is to improve the UI/UX — layout, hierarchy, interaction, and how information is shown. Data and APIs are ready to use; treat the current screens as a rough first cut.
- Timebox: aim for about 2–4 hours. Stop when you’d stop on a real ticket — depth beats coverage.
- Deliverable: a branch or PR with your changes, plus a short note (PR description or
NOTES.md) on what you did and why. - We’ll walk through the work together afterward; be ready to explain decisions.
Requires Bun.
cp .env.example .env
bun install
bun run db:push
bun run db:seed
bun run devOpen http://localhost:3000.
| Command | What it does |
|---|---|
bun run dev |
Dev server |
bun run db:seed |
Reset demo project with Thames Digital (featured) |
bun run db:reset |
Wipe DB, push schema, re-seed |
bun run db:studio |
Prisma Studio (inspect data) |
bun run lint / bun run format |
Biome |
bun run typecheck |
TypeScript |
No auth. Local-only.
- Projects — create and open projects
- Companies — add companies from a fixed sample catalog (3 companies)
- Extracts — order a company extract; status is
PENDINGfor ~10s, thenREADYwith snapshot data - Versions — each later order for the same company uses a slightly different snapshot (shareholders / share classes change over time)
- Compare — pick two ready extracts and view them side by side
Sample catalog + extract snapshots live in src/server/sample-data/companies.ts. Prefer using existing tRPC procedures over inventing new APIs unless you truly need something new. Feel free to add new APIs if it would be better to compute some data on the backend.
Start with these two — they exercise the most interesting UI problems in this app:
- Pending order UX — after you click “Order extract”, the order stays
PENDINGfor ~10s before becomingREADY. Make that wait feel clear and intentional (progress, countdown, skeleton, transition into the ready view, etc.). - Compare experience — the compare page is two bare selects + two columns. Improve how people pick versions and how differences between extracts are shown (layout, highlight what changed, optional charts).
Use Thames Digital Solutions PLC as your main playground — it has the richest extract history (new share classes, big ownership swings, a founder nearly exiting). The seed project already includes it. Order extracts v1 → v2 → v3 so the story shows up in compare.
Highland Forge Ltd and Belfast Marine Components Ltd are quieter contrasts (and Highland is part of the stretch below).
None of these are required. After the starting point (or instead, if you prefer), pick what interests you. Go deep on a few rather than skimming many, and be ready to explain trade-offs.
On Thames extracts v2+, Highland Forge Ltd appears as a shareholder. It is also a company in the sample catalog (companyNumber is set on that shareholder row in the sample data).
How would you identify that link in the UI, and let someone add Highland to the project and order an extract in one go — without sending them on a scavenger hunt through the project “add company” form?
- Ownership summary table — for a ready extract, show who owns what (shareholder × class, totals, % of class / overall)
- Share-class structure view — clearer than a plain list (rights, voting, nominal value)
- Diff on compare — highlight what changed between two extracts (added/removed shareholders, share count deltas, new share classes)
- Project overview — denser project page: company count, extract counts, last ordered, pending orders
- Ownership pie / bar chart — distribution of shares for an extract (by shareholder or by class)
- Ownership over time — after several extracts, chart how a shareholder’s stake (or class totals) moved across versions
- Compare charts — same chart side by side, or an overlay/delta view for two versions
- Empty & error states — no projects, no companies, fewer than two extracts to compare, failed requests
- Compare picker — better than two bare
<select>s (e.g. version chips, dates, “latest vs previous”) - Navigation & hierarchy — breadcrumbs, clearer page titles, less “list of links” feel
- Responsive layout — usable on laptop and narrower screens; compare especially
- Design system lite — consistent type scale, spacing, colour; don’t need a full component library
- Export / print-friendly extract view
- Filter or search companies within a project
- Light animation where it clarifies state (e.g. pending → ready), not decoration for its own sake
- Keep using tRPC for data (pages already have queries/mutations set up)
- Tailwind is available; Biome for lint/format
- Add whatever you need — chart libraries, UI kits, animation libs, icons, etc. are all fine
- Backend changes are allowed if they unblock a UI idea — keep them small and justified
- We’re evaluating UI craft and product sense, not backend architecture
Use as much AI as you want — Cursor, Copilot, ChatGPT, Claude, etc. That’s expected. We care about the quality of the result and how you explain your decisions, not whether you typed every line by hand.
Good luck.