01
TREC
Finance tool for student teams
Individual project · hackathonBeta
A finance dashboard for student teams, built for the Bolt.new × Half Baked hackathon. Placed in the top 10.
Visit the TREC website01Context
Budgeting a race car.
As CFO of Formula Student Team Delft I managed the team's finances. TREC started as the tool I wanted for my own team: one place for the budget, expenses and sponsors, made by a student team for student teams.
02Hackathon
Built in a hackathon.
TREC was made for the Bolt.new × Half Baked hackathon. It was my first “vibe-coded” project, and it still shipped as a real product with accounts, email and payments.
- Top 10Placement in the Bolt.new × Half Baked hackathon.
- FeaturedFeatured by the Bolt.new team.
- ShippedWorking sign-up, transactional email and payments.
03Design
Designed in Figma first.
The look is where most of the work went. Every screen and widget was designed in Figma before a line was generated, then the button and widget animations were built with Claude Code to match.
Department Health
Budget vs Actual Spending
Edit Department
Expenses & Income Overview
Everything here is live · hover, click, type
- primary #00b2ff
- success #01b574
- error #e31a1a
- warning #f6ad55
- accent.teal #4fd1c5
- accent.purple #7551ff
Syne 700 for headings · Plus Jakarta Sans for UI
- One homeBudget, expenses and sponsors in one place.
- WidgetsProgress at a glance, to make better decisions.
- For student teamsDepartments, groups and sponsors, the way teams actually work.
- Modern interfaceElegant and intuitive, even for first-time treasurers.
04How it works
Three steps to control.
1Create your account
Sign up and secure your profile in a few steps.
2Budget your project
Plan the budget per department, group and item.
3Link your expenses
Link each expense to a budget item and track progress.
05Try it
Log an expense.
A working slice of the dashboard. Pick a department, add an expense and watch the widgets respond.
Dashboard
Funding Status
Project fully funded
Project cost
€2,210.00
Funds acquired
€3,000.00
Department Health
Budget vs Actual Spending
Recent Expenses
- −43 gsm carbon fibrethis week · Aerodynamics-€760.00Expense
- −Motor controller cablesthis week · Powertrain-€540.00Expense
- −Steel tube stockthis week · Chassis-€910.00Expense
06Beyond the dashboard
Everything a treasurer needs.
- Structured budgetsDepartments → groups → budget items, with totals, sponsored income and team cost calculated automatically.
- Bank importImport bank transaction files and classify them, with manual overrides and an import history.
- Sponsor scenariosPlan best, expected and worst case, and compare against actual income from linked payments.
- InvoicesDrag-and-drop invoice uploads attached to each expense, with a checked/pending bookkeeping status.
- BackupsFull snapshots of all data, restorable at any point; the last 30 are kept.
- ReportsSpending per department, budget vs actual and sponsor performance over time.
07Under the hood
A real product, end to end.
Designed in Figma, generated and iterated in Bolt.new, with the animations built in Claude Code, and shipped with real accounts, email and payments.
- FigmaAll screens, widgets and states.
- Bolt.newThe app, generated and iterated.
- Claude CodeButton and widget animations.
- React + ViteTypeScript, Tailwind, Recharts.
- SupabasePostgres, auth and invoice storage.
- LoopsTransactional email.
- PolarSubscriptions, running on Stripe.
- VercelHosting and serverless webhooks.