\n \n \n \n\n",[18,89],"8c513f2c-a950-42a1-841c-ad8834f7d86e",["D",1784306518202],"\n",[18,95],"f50fa858-87c9-4379-80b4-c3c3f1b571d1",["D",1784306518202],[18,100],"pulls","branches","forks","envVars",{"_96":26,"_236":26},"connections",{"_96":26,"_235":26},"unfilledCount","emptyCount",{"_34":202,"_13":18,"_75":111,"_44":-5,"_36":37,"_203":41,"_204":24,"_38":307,"_40":26,"_78":101,"_206":-5,"_80":30,"_207":-5,"_254":308,"_17":309},{"_34":225,"_13":100,"_75":99,"_44":111,"_36":37,"_203":41,"_204":24,"_38":304,"_40":26,"_78":101,"_206":-5,"_80":30,"_207":-5,"_254":305,"_17":306},{"_34":296,"_13":297,"_75":298,"_44":99,"_36":37,"_203":299,"_204":24,"_38":300,"_40":41,"_78":79,"_206":301,"_80":30,"_207":-5,"_254":302,"_17":303},{"_34":289,"_13":290,"_75":291,"_44":99,"_36":37,"_203":97,"_204":24,"_38":292,"_40":26,"_78":79,"_206":293,"_80":30,"_207":-5,"_254":294,"_17":295},{"_34":281,"_13":282,"_75":283,"_44":99,"_36":37,"_203":284,"_204":24,"_38":285,"_40":26,"_78":79,"_206":286,"_80":30,"_207":-5,"_254":287,"_17":288},{"_34":273,"_13":274,"_75":275,"_44":99,"_36":37,"_203":276,"_204":24,"_38":277,"_40":26,"_78":79,"_206":278,"_80":30,"_207":-5,"_254":279,"_17":280},{"_34":221,"_13":95,"_75":94,"_44":111,"_36":37,"_203":41,"_204":24,"_38":270,"_40":26,"_78":21,"_206":223,"_80":30,"_207":-5,"_254":271,"_17":272},{"_34":217,"_13":89,"_75":88,"_44":111,"_36":37,"_203":104,"_204":24,"_38":267,"_40":41,"_78":21,"_206":219,"_80":30,"_207":-5,"_254":268,"_17":269},{"_34":213,"_13":77,"_75":76,"_44":111,"_36":37,"_203":41,"_204":24,"_38":264,"_40":26,"_78":79,"_206":215,"_80":30,"_207":-5,"_254":265,"_17":266},{"_34":257,"_13":258,"_75":259,"_44":-5,"_36":37,"_203":151,"_204":24,"_38":260,"_40":41,"_78":21,"_206":261,"_80":30,"_207":-5,"_254":262,"_17":263},{"_34":248,"_13":249,"_75":124,"_44":-5,"_36":37,"_203":250,"_204":24,"_38":251,"_40":41,"_78":252,"_206":253,"_80":30,"_207":-5,"_254":255,"_17":256},"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",[],[249],"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",[],[258],["D",1784306518202],[],[18,77],["D",1784306587016],[],[18,89],["D",1784306518202],[],[18,95],"48e2ce3e-80dc-4931-98ee-0f410d0d33ad","Summary.tsx","8c9865c0-81fe-11f1-a62f-1607ee4eb77e",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",[],[18,100,274],"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",[],[18,100,282],"cfdb9055-b99e-49c4-aa7f-d40395204771","ExpenseForm.tsx","83993d3c-81fe-11f1-b689-1607ee4eb77e",["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",[],[18,100,290],"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",[],[18,100,297],["D",1784306518202],[239,240,241,242],[18,100],["D",1784306518202],[238,243,244,245],[18],["D",1784306518202],["D",1789559472742],{"_11":12,"_168":83},{"_11":12,"_163":164,"_82":83,"_31":81,"_165":166,"_167":30},{"_40":151,"_13":16,"_34":37,"_152":113,"_153":72,"_154":155,"_156":117,"_157":158,"_159":160,"_161":14,"_162":12},"ctx",{"_53":-5,"_189":348,"_349":350,"_351":352,"_353":30,"_354":30,"_355":30,"_356":24,"_357":-5,"_358":-7,"_359":-7,"_360":26,"_361":30,"_362":30,"_363":-5,"_364":30,"_365":30,"_366":30,"_367":-5},"ENV",{"_319":320,"_321":322,"_323":16,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343,"_344":345,"_346":347},"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 · frontend