Daily Habit Tracker

\n\n

Add New Habit

\n setNewHabitName(e.target.value)}\n placeholder=\"e.g., Drink 8 glasses of water\"\n />\n \n Add Habit\n \n

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

Log Daily Habit

\n setSelectedHabitId(Number(e.target.value))}\n >\n {habits.map((habit) => (\n \n ))}\n \n \n Log Today's Habit\n \n

\n )}\n\n {selectedHabitId !== null && chartData && (\n

Habit Streak: {habits.find(h => h.id === selectedHabitId)?.name}

\n \n

\n )}\n\n

\n View source\n

\n );\n}\n",[208,111,88],"pulls","branches","forks","envVars",{"_84":26,"_222":26},"connections",{"_84":26,"_221":26},"unfilledCount","emptyCount",{"_36":284,"_13":208,"_75":201,"_46":-5,"_38":39,"_202":43,"_203":24,"_40":285,"_42":26,"_78":112,"_205":-5,"_80":30,"_206":-5,"_238":286,"_17":287},{"_36":200,"_13":111,"_75":110,"_46":201,"_38":39,"_202":43,"_203":24,"_40":281,"_42":26,"_78":112,"_205":-5,"_80":30,"_206":-5,"_238":282,"_17":283},{"_36":210,"_13":88,"_75":87,"_46":110,"_38":39,"_202":104,"_203":24,"_40":278,"_42":85,"_78":79,"_205":212,"_80":30,"_206":-5,"_238":279,"_17":280},{"_36":271,"_13":272,"_75":273,"_46":201,"_38":39,"_202":43,"_203":24,"_40":274,"_42":26,"_78":21,"_205":275,"_80":30,"_206":-5,"_238":276,"_17":277},{"_36":264,"_13":265,"_75":266,"_46":201,"_38":39,"_202":43,"_203":24,"_40":267,"_42":26,"_78":21,"_205":268,"_80":30,"_206":-5,"_238":269,"_17":270},{"_36":256,"_13":257,"_75":258,"_46":201,"_38":39,"_202":259,"_203":24,"_40":260,"_42":43,"_78":79,"_205":261,"_80":30,"_206":-5,"_238":262,"_17":263},{"_36":249,"_13":250,"_75":251,"_46":-5,"_38":39,"_202":43,"_203":24,"_40":252,"_42":26,"_78":21,"_205":253,"_80":30,"_206":-5,"_238":254,"_17":255},{"_36":241,"_13":242,"_75":243,"_46":-5,"_38":39,"_202":244,"_203":24,"_40":245,"_42":26,"_78":79,"_205":246,"_80":30,"_206":-5,"_238":247,"_17":248},{"_36":232,"_13":233,"_75":125,"_46":-5,"_38":39,"_202":234,"_203":24,"_40":235,"_42":85,"_78":236,"_205":237,"_80":30,"_206":-5,"_238":239,"_17":240},"8ac3d7bd-c153-4bd6-a20d-74aa3b3fc72c","index.ts",6,["D",1782850877429],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { db } from \"./db.ts\";\n\nconst app = new Hono();\n\napp.use(\"/*\", async (ctx, next) => {\n await db.init();\n return next();\n});\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n\n// API routes\napp.post(\"/api/habit\", async (c) => {\n const { name } = await c.req.json();\n try {\n await db.execute(\\`INSERT INTO habits (name) VALUES (?) \\`, [name]);\n return c.json({ success: true });\n } catch (error) {\n if (error.message.includes(\"UNIQUE constraint failed\")) {\n return c.json({ success: false, error: \"Habit already exists\" }, 409);\n }\n return c.json({ success: false, error: error.message }, 500);\n }\n});\n\napp.post(\"/api/habit-entry\", async (c) => {\n const { habitId, date } = await c.req.json();\n try {\n await db.execute(\\`INSERT INTO habit_entries (habit_id, date) VALUES (?, ?)\\`, [habitId, date]);\n return c.json({ success: true });\n } catch (error) {\n return c.json({ success: false, error: error.message }, 500);\n }\n});\n\napp.get(\"/api/habits\", async (c) => {\n const habits = await db.execute(\\`SELECT * FROM habits\\`);\n return c.json(habits.rows);\n});\n\napp.get(\"/api/habit-entries/:habitId\", async (c) => {\n const { habitId } = c.req.param();\n const entries = await db.execute(\\`SELECT date FROM habit_entries WHERE habit_id = ?\\`, [habitId]);\n return c.json(entries.rows);\n});\n","children",[],[233],"84426482-7aa0-4f4c-a489-347323cfab9b","db.ts","3d1cd2f0-74c1-11f1-9f0c-1607ee4eb77e",4,["D",1782850872763],"import { sqlite_setup } from \"https://esm.town/v/std/sqlite_setup\";\n\nexport const db = sqlite_setup.initialize({\n name: \"habits\", \n schema: `\n CREATE TABLE IF NOT EXISTS habits (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL UNIQUE\n );\n\n CREATE TABLE IF NOT EXISTS habit_entries (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n habit_id INTEGER NOT NULL,\n date TEXT NOT NULL,\n FOREIGN KEY (habit_id) REFERENCES habits(id)\n );\n `,\n});",[],[242],"38bcbbad-f9ff-4d23-9345-a3ae79dc7fff","README.md","019f1a31-47ec-77ed-aa3c-85a6dc3dfbc0",["D",1782850865039],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\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| Counter[\"Counter.tsx\"]\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 (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n",[],[250],"88d97fdd-0f92-4eb4-8e9e-f6bbafb53e7d","index.tsx","019f1a31-47ec-77ed-aa3c-7db5a31f068e",7,["D",1782850880186],"/** @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\";\nimport { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from \"npm:chart.js\";\n\nChartJS.register(\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n Title,\n Tooltip,\n Legend\n);\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[208,257],"348aeb41-c54b-4ac5-a881-877f2c108240","index.html","019f1a31-47ec-77ed-aa3c-78efaea07e91",["D",1782850865039],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[208,265],"059ba911-447d-4e41-bc77-33b6e88970a3","favicon.svg","019f1a31-47ec-77ed-aa3c-753b1d70a98b",["D",1782850865039],"\n",[],[208,272],["D",1782850893256],[],[208,111,88],["D",1782850865039],[225],[208,111],"b91c9773-4219-4649-a9d2-726e1cf0638a",["D",1782850865039],[224,226,227,228],[208],["D",1782850865039],["D",1789699879369],{"_11":12,"_167":83},{"_11":12,"_163":83,"_82":83,"_31":81,"_164":165,"_166":30},{"_42":104,"_13":16,"_36":39,"_152":114,"_153":72,"_154":155,"_156":118,"_157":158,"_159":160,"_161":14,"_162":12},"ctx",{"_55":-5,"_188":326,"_327":328,"_329":330,"_331":30,"_332":30,"_333":30,"_334":24,"_335":-5,"_336":-7,"_337":-7,"_338":26,"_339":30,"_340":30,"_341":-5,"_342":30,"_343":30,"_344":30,"_345":-5},"ENV",{"_297":298,"_299":300,"_301":16,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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 · components