\n \n \n \n\n","label",[183,68],"frontend","pulls","branches","forks","envVars",{"_191":26,"_193":26},"connections",{"_191":26,"_192":26},"count","unfilledCount","emptyCount",{"_33":278,"_13":183,"_66":175,"_43":-5,"_35":36,"_176":40,"_177":97,"_37":279,"_39":26,"_69":275,"_179":-5,"_70":24,"_181":-5,"_211":280,"_17":281},{"_33":273,"_13":248,"_66":242,"_43":175,"_35":36,"_176":40,"_177":97,"_37":274,"_39":26,"_69":275,"_179":-5,"_70":24,"_181":-5,"_211":276,"_17":277},{"_33":265,"_13":266,"_66":267,"_43":242,"_35":36,"_176":268,"_177":97,"_37":269,"_39":40,"_69":225,"_179":270,"_70":24,"_181":-5,"_211":271,"_17":272},{"_33":257,"_13":258,"_66":259,"_43":242,"_35":36,"_176":260,"_177":97,"_37":261,"_39":26,"_69":225,"_179":262,"_70":24,"_181":-5,"_211":263,"_17":264},{"_33":249,"_13":250,"_66":251,"_43":242,"_35":36,"_176":252,"_177":97,"_37":253,"_39":26,"_69":225,"_179":254,"_70":24,"_181":-5,"_211":255,"_17":256},{"_33":239,"_13":240,"_66":241,"_43":242,"_35":36,"_176":243,"_177":97,"_37":244,"_39":26,"_69":225,"_179":245,"_70":24,"_181":-5,"_211":246,"_17":247},{"_33":232,"_13":233,"_66":234,"_43":175,"_35":36,"_176":40,"_177":97,"_37":235,"_39":26,"_69":21,"_179":236,"_70":24,"_181":-5,"_211":237,"_17":238},{"_33":174,"_13":68,"_66":67,"_43":175,"_35":36,"_176":76,"_177":97,"_37":229,"_39":40,"_69":21,"_179":180,"_70":24,"_181":-5,"_211":230,"_17":231},{"_33":221,"_13":222,"_66":223,"_43":175,"_35":36,"_176":40,"_177":97,"_37":224,"_39":26,"_69":225,"_179":226,"_70":24,"_181":-5,"_211":227,"_17":228},{"_33":214,"_13":215,"_66":216,"_43":-5,"_35":36,"_176":123,"_177":97,"_37":217,"_39":40,"_69":21,"_179":218,"_70":24,"_181":-5,"_211":219,"_17":220},{"_33":205,"_13":206,"_66":95,"_43":-5,"_35":36,"_176":207,"_177":97,"_37":208,"_39":40,"_69":209,"_179":210,"_70":24,"_181":-5,"_211":212,"_17":213},"d4578a33-4efe-4df5-9d36-43604d540f15","index.ts",2,["D",1784306530932],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n// --- Database setup ---\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS expenses (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n amount REAL NOT NULL,\n category TEXT NOT NULL,\n description TEXT DEFAULT '',\n date TEXT NOT NULL\n )\n`);\n\nconst app = new Hono();\n\n// --- Serve frontend ---\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// --- API: List all expenses ---\napp.get(\"/api/expenses\", async () => {\n const result = await sqlite.execute(\n \"SELECT * FROM expenses ORDER BY date DESC, id DESC\",\n );\n return Response.json(result.rows);\n});\n\n// --- API: Add an expense ---\napp.post(\"/api/expenses\", async (c) => {\n const body = await c.req.json();\n const { amount, category, description, date } = body;\n\n if (!amount || !category || !date) {\n return c.json({ error: \"amount, category, and date are required\" }, 400);\n }\n\n const result = await sqlite.execute({\n sql: \"INSERT INTO expenses (amount, category, description, date) VALUES (?, ?, ?, ?)\",\n args: [amount, category, description ?? \"\", date],\n });\n\n return c.json({\n id: Number(result.lastInsertRowid),\n amount,\n category,\n description: description ?? \"\",\n date,\n }, 201);\n});\n\n// --- API: Delete an expense ---\napp.delete(\"/api/expenses/:id\", async (c) => {\n const id = c.req.param(\"id\");\n await sqlite.execute({\n sql: \"DELETE FROM expenses WHERE id = ?\",\n args: [id],\n });\n return c.json({ ok: true });\n});\n\n// --- API: Summary (total + breakdown by category) ---\napp.get(\"/api/summary\", async () => {\n const totalResult = await sqlite.execute(\n \"SELECT COALESCE(SUM(amount), 0) as total FROM expenses\",\n );\n const categoryResult = await sqlite.execute(\n \"SELECT category, SUM(amount) as total FROM expenses GROUP BY category ORDER BY total DESC\",\n );\n\n return Response.json({\n total: totalResult.rows[0].total,\n byCategory: categoryResult.rows,\n });\n});\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[206],"581fa8b6-5dee-4172-b516-e39d3f4412fd","README.md","019f70f4-c933-741e-92e7-4ff4f168893c",["D",1784306609926],"# 💰 Expenses Tracker\n\nA clean, full-stack expenses tracker built with React + Hono on Val Town.\n\n## Features\n\n- **Add expenses** — amount, category, description, and date\n- **Category breakdown** — visual bars showing spending by category\n- **Total spent** — running total at a glance\n- **Delete expenses** — remove entries with one click\n- **10 categories** — Food, Transport, Housing, Shopping, Entertainment, Health, Education, Work, Travel, Other\n- **Persistent storage** — all data saved in SQLite\n\n## Live URL\n\nClick the val's HTTP endpoint to open the app in your browser.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts (Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Form[\"ExpenseForm.tsx\"]\n App -->|renders| List[\"ExpenseList.tsx\"]\n App -->|renders| Summary[\"Summary.tsx\"]\n App -->|\"GET /api/expenses\"| Hono\n App -->|\"POST /api/expenses\"| Hono\n App -->|\"DELETE /api/expenses/:id\"| Hono\n App -->|\"GET /api/summary\"| Hono\n Hono --> SQLite[\"SQLite (expenses table)\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + data fetching)\n ExpenseForm.tsx ← Form to add new expenses\n ExpenseList.tsx ← List of expenses with delete buttons\n Summary.tsx ← Total spent + category breakdown bars\n```\n\n## API\n\n| Method | Route | Description |\n|--------|-------|-------------|\n| GET | `/api/expenses` | List all expenses (newest first) |\n| POST | `/api/expenses` | Add an expense (`amount`, `category`, `date`, `description?`) |\n| DELETE | `/api/expenses/:id` | Delete an expense |\n| GET | `/api/summary` | Total + breakdown by category |\n",[],[215],"91d94ec7-bb5d-4251-886c-ed35a192397c","index.tsx","019f70f4-c933-741e-92e7-46c1c300e105",["D",1784306518202],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[183,222],["D",1784306587016],[],[183,68],"8c513f2c-a950-42a1-841c-ad8834f7d86e","favicon.svg","019f70f4-c933-741e-92e7-3e527ce95521",["D",1784306518202],"\n",[],[183,233],"48e2ce3e-80dc-4931-98ee-0f410d0d33ad","Summary.tsx","8c9865c0-81fe-11f1-a62f-1607ee4eb77e","019f70f4-c933-741e-92e7-39049856c834",6,["D",1784306570513],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface CategoryTotal {\n category: string;\n total: number;\n}\n\ninterface SummaryProps {\n total: number;\n byCategory: CategoryTotal[];\n}\n\nconst BAR_COLORS = [\n \"bg-blue-500\",\n \"bg-emerald-500\",\n \"bg-amber-500\",\n \"bg-purple-500\",\n \"bg-pink-500\",\n \"bg-cyan-500\",\n \"bg-rose-500\",\n \"bg-indigo-500\",\n \"bg-teal-500\",\n \"bg-gray-400\",\n];\n\nexport function Summary({ total, byCategory }: SummaryProps) {\n const maxCategory = byCategory.length > 0\n ? Math.max(...byCategory.map((c) => c.total))\n : 0;\n\n return (\n

Total Spent

\n ${total.toFixed(2)}\n

\n\n {byCategory.length > 0 && (\n

By Category

\n {byCategory.map((cat, i) => (\n

\n {cat.category}\n \n ${cat.total.toFixed(2)}\n \n

\n \n

\n ))}\n

\n )}\n

\n );\n}\n",[],[183,248,240],"components","a59edea9-13e8-44d5-ab74-988f5a106544","ExpenseList.tsx","8c91c238-81fe-11f1-99fb-1607ee4eb77e",5,["D",1784306570511],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport interface Expense {\n id: number;\n amount: number;\n category: string;\n description: string;\n date: string;\n}\n\ninterface ExpenseListProps {\n expenses: Expense[];\n onDelete: (id: number) => void;\n}\n\nfunction formatDate(iso: string): string {\n const d = new Date(iso + \"T00:00\");\n return d.toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n });\n}\n\nexport function ExpenseList({ expenses, onDelete }: ExpenseListProps) {\n if (expenses.length === 0) {\n return (\n

🧾

\n No expenses yet. Add one above to get started!\n

\n );\n }\n\n return (\n

Recent Expenses

\n \n {exp.category.split(\" \")[0]}\n \n

\n \n {exp.category.split(\" \").slice(1).join(\" \")}\n \n {exp.description && (\n \n — {exp.description}\n \n )}\n

{formatDate(exp.date)}

\n \n ${exp.amount.toFixed(2)}\n \n onDelete(exp.id)}\n class=\"text-gray-300 hover:text-red-500 transition-colors text-xl leading-none p-1\"\n title=\"Delete\"\n >\n ✕\n \n \n ))}\n

\n );\n}\n",[],[183,248,250],"cfdb9055-b99e-49c4-aa7f-d40395204771","ExpenseForm.tsx","83993d3c-81fe-11f1-b689-1607ee4eb77e",4,["D",1784306555458],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nconst CATEGORIES = [\n \"🍽️ Food\",\n \"🚗 Transport\",\n \"🏠 Housing\",\n \"🛍️ Shopping\",\n \"🎬 Entertainment\",\n \"💊 Health\",\n \"📚 Education\",\n \"💼 Work\",\n \"✈️ Travel\",\n \"📦 Other\",\n];\n\ninterface ExpenseFormProps {\n onAdd: () => void;\n}\n\nexport function ExpenseForm({ onAdd }: ExpenseFormProps) {\n const [amount, setAmount] = useState(\"\");\n const [category, setCategory] = useState(CATEGORIES[0]);\n const [description, setDescription] = useState(\"\");\n const [date, setDate] = useState(new Date().toISOString().split(\"T\")[0]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n const parsed = parseFloat(amount);\n if (!parsed || parsed <= 0) {\n setError(\"Please enter a valid amount\");\n return;\n }\n\n setLoading(true);\n setError(\"\");\n\n try {\n await fetch(\"/api/expenses\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n amount: parsed,\n category,\n description: description.trim(),\n date,\n }),\n });\n setAmount(\"\");\n setDescription(\"\");\n onAdd();\n } catch {\n setError(\"Failed to add expense. Please try again.\");\n } finally {\n setLoading(false);\n }\n }\n\n return (\n \n

➕ Add Expense

\n\n {error && (\n

{error}

\n )}\n\n

\n \n Amount\n \n

\n \n $\n \n setAmount(e.target.value)}\n placeholder=\"0.00\"\n required\n class=\"w-full pl-7 pr-3 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-400 focus:border-transparent outline-none transition\"\n />\n

\n\n

\n \n Date\n \n setDate(e.target.value)}\n required\n class=\"w-full px-3 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-400 focus:border-transparent outline-none transition\"\n />\n

\n\n

\n \n Category\n \n setCategory(e.target.value)}\n class=\"w-full px-3 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-400 focus:border-transparent outline-none transition bg-white\"\n >\n {CATEGORIES.map((cat) => (\n \n ))}\n \n

\n\n

\n \n Description (optional)\n \n setDescription(e.target.value)}\n placeholder=\"What was it for?\"\n class=\"w-full px-3 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-400 focus:border-transparent outline-none transition\"\n />\n

\n\n \n {loading ? \"Adding...\" : \"Add Expense\"}\n \n \n );\n}\n",[],[183,248,258],"0af3a991-805f-4743-b20a-c28e7383d045","App.tsx","019f70f4-c932-773f-882f-8386e5e772f7",7,["D",1784306587014],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { ExpenseForm } from \"./ExpenseForm.tsx\";\nimport { ExpenseList, type Expense } from \"./ExpenseList.tsx\";\nimport { Summary } from \"./Summary.tsx\";\n\nexport function App() {\n const [expenses, setExpenses] = useState([]);\n const [total, setTotal] = useState(0);\n const [byCategory, setByCategory] = useState<{ category: string; total: number }[]>([]);\n\n const fetchData = useCallback(async () => {\n const [expRes, sumRes] = await Promise.all([\n fetch(\"/api/expenses\"),\n fetch(\"/api/summary\"),\n ]);\n const expData = await expRes.json();\n const sumData = await sumRes.json();\n setExpenses(expData);\n setTotal(sumData.total);\n setByCategory(sumData.byCategory);\n }, []);\n\n useEffect(() => {\n fetchData();\n }, [fetchData]);\n\n const handleDelete = async (id: number) => {\n await fetch(`/api/expenses/${id}`, { method: \"DELETE\" });\n fetchData();\n };\n\n return (\n

\n 💰 Expenses Tracker\n

Track your spending, see where it goes.

\n\n

\n \n \n

\n\n \n

\n );\n}\n",[],[183,248,266],"f50fa858-87c9-4379-80b4-c3c3f1b571d1",["D",1784306518202],"directory",[196,197,198,199],[183,248],"d7d9f853-3e98-4d9d-ac21-54a4dd56e689",["D",1784306518202],[195,200,201,202],[183],["D",1784306518202],["D",1789559472742],{"_11":12,"_140":73},{"_11":12,"_135":136,"_72":73,"_30":71,"_137":138,"_139":24},{"_39":123,"_13":16,"_33":36,"_124":84,"_125":63,"_126":127,"_128":88,"_129":130,"_131":132,"_133":14,"_134":12},"ctx",{"_52":-5,"_161":320,"_321":322,"_323":324,"_325":24,"_326":24,"_327":24,"_328":97,"_329":-5,"_330":-7,"_331":-7,"_332":26,"_333":24,"_334":24,"_335":-5,"_336":24,"_337":24,"_338":24,"_339":-5},"ENV",{"_291":292,"_293":294,"_295":16,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · index.html