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 full-stack expense tracker built with React + Hono + SQLite on Val Town.
- Add expenses — amount, description, category, and date
- Summary cards — total spending, this month's total, transaction count
- Category breakdown — visual bars showing spending by category
- Filter by category — clickable chips to filter the expense list
- Delete expenses — remove entries with one click
- Persistent storage — all data saved in val-scoped SQLite
Click the val's HTTP endpoint URL 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 layout, data fetching, state
SummaryCards.tsx ← Total / this month / transaction count
ExpenseForm.tsx ← Add new expense form
ExpenseList.tsx ← Expense list with category filter + delete
CategoryBreakdown.tsx ← Spending by category with progress bars
| Method | Route | Description |
|---|---|---|
| GET | /api/expenses | List all expenses |
| POST | /api/expenses | Create a new expense |
| DELETE | /api/expenses/:id | Delete an expense |
| GET | /api/stats | Summary stats + category totals |