1Based on React Hono Starter
2
3[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.
6import { Batch, sqlite, Statement } from "https://esm.town/v/std/sqlite?v=4";
7
8// --- Database Initialization ---
9// (Best effort initialization, errors are ignored if tables already exist)
10sqlite.batch([
9- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/App.tsx`.
10
11[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.
13 const navLinks = [
14 { name: "Farcaster SDK", path: "/" },
15 { name: "Database", path: "/db" },
16 { name: "About", path: "/about" },
17 ];
35 <Routes>
36 <Route path="/" element={<FarcasterMiniApp />} />
37 <Route path="/db" element={<Database />} />
38 <Route path="/about" element={<About />} />
39 <Route path="/neynar" element={<Neynar />} />
50 <div className="">✷ Hono + React + Tailwind</div>
51 <div className="">✷ React Router + React Query</div>
52 <div className="">✷ Built-in database (blob storage)</div>
53 <div className="">✷ Farcaster mini app manifest + webhook + embed metadata</div>
54 <div className="">✷ Farcaster notifications (storing tokens, sending recurring notifications, ...)</div>
66}
67
68function Database() {
69 const queryFn = () => fetch("/api/counter/get").then((r) => r.json());
70 const { data, refetch } = useQuery({ queryKey: ["counter"], queryFn });
71 return (
72 <Section className="flex flex-col items-start gap-3 m-5">
73 {/* <h2 className="font-semibold">Database Example</h2> */}
74 <div className="">Counter value: {data}</div>
75 <Button variant="outline" onClick={() => fetch("/api/counter/increment").then(refetch)}>
198```
199├── backend/
200│ ├── database/
201│ │ ├── migrations.ts # Schema definitions
202│ │ ├── queries.ts # DB query functions
257 ```
258
259### Database Patterns
260- Run migrations on startup or comment out for performance
261- Change table names when modifying schemas rather than altering
9- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/App.tsx`.
10
11[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.
351 // If using sitename parameter, fetch from Neocities API
352 if (sitename) {
353 // Create the database key using sitename.neocities.org format
354 const dbKey = `${sitename}.neocities.org`;
355
357 const neocitiesData = await fetchNeocitiesStats(sitename);
358
359 // Get the current count from database (either fresh or cached)
360 const count = await getCount(dbKey);
361
362 // If API fetch successful, update the database
363 if (neocitiesData && neocitiesData.result === "success") {
364 // Extract the hits value
365 const hits = neocitiesData.info.hits || 0;
366
367 // Store the value in our database for tracking
368 await setCount(dbKey, hits);
369 } else {
7import exampleCallout from "./routes/example-callout.ts";
8import exampleChildPages from "./routes/example-child-pages.ts";
9import exampleDatabasePage from "./routes/example-database-page.ts";
10import exampleDatabasePages from "./routes/example-database-pages.ts";
11import exampleGuestWelcome from "./routes/example-guest-welcome.ts";
12import propertyInjections from "./routes/property-injections.ts";
24
25// Mount route modules
26app.route("/example/database/pages", exampleDatabasePages);
27app.route("/example/database/page", exampleDatabasePage);
28app.route("/example/child_pages", exampleChildPages);
29app.route("/example/callout", exampleCallout);
30 // if the block associated to this blob no longer exists in notion
31 // the blob should be deleted; the block id is in lastRun.id
32 // and can be either a callout block or a child_database
33 const block = await notion.blocks.retrieve({ block_id: lastRun?.id });
34 // console.log(block);
3This val.town project catches webhooks from Notion, makes changes to the data payload, and sends those changes back to Notion as page updates.
4
5Here's one of the examples, which uses val.town to update database pages with favicons from the web:
6
7