Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
A clean, full-stack expenses tracker built with React + Hono on Val Town.
- Add expenses — amount, category, description, and date
- Category breakdown — visual bars showing spending by category
- Total spent — running total at a glance
- Delete expenses — remove entries with one click
- 10 categories — Food, Transport, Housing, Shopping, Entertainment, Health, Education, Work, Travel, Other
- Persistent storage — all data saved in SQLite
Click the val's HTTP endpoint to open the app in your browser.
Rendering mermaid diagram...
index.ts ← Hono backend (serves frontend + API routes)
frontend/
index.html ← HTML shell (loads Twind + React)
index.tsx ← React entrypoint
favicon.svg ← App icon
components/
App.tsx ← Root component (layout + data fetching)
ExpenseForm.tsx ← Form to add new expenses
ExpenseList.tsx ← List of expenses with delete buttons
Summary.tsx ← Total spent + category breakdown bars
| Method | Route | Description |
|---|---|---|
| GET | /api/expenses | List all expenses (newest first) |
| POST | /api/expenses | Add an expense (amount, category, date, description?) |
| DELETE | /api/expenses/:id | Delete an expense |
| GET | /api/summary | Total + breakdown by category |