208```
209โโโ backend/
210โ โโโ database/
211โ โ โโโ migrations.ts # Schema definitions
212โ โ โโโ queries.ts # DB query functions
270- Handle API calls properly with proper error catching
271
272### Database Patterns
273- Run migrations on startup or comment out for performance
274- 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.
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)}>
9- [ ] make it one click to branch off like old jp townie demos
10- [ ] opentownie as a pr bot
11- [ ] give it the ability to see its own client-side and server-side logs by building a middleware that shoves them into a SQL light database date and then give it a tool to access them
12- [ ] do a browser use or screenshot thing to give it access to its own visual output
13- [ ] Have it default to creating a new branch off main
7export const thinkTool = tool({
8 description:
9 "Use the tool to think about something. It will not obtain new information or change the database, but just append the thought to the log. Use it when complex reasoning or some cache memory is needed.",
10 parameters: z.object({
11 thought: z.string().describe("A thought to think about."),
192```
193โโโ backend/
194โ โโโ database/
195โ โ โโโ migrations.ts # Schema definitions
196โ โ โโโ queries.ts # DB query functions
251 ```
252
253### Database Patterns
254- Run migrations on startup or comment out for performance
255- Change table names when modifying schemas rather than altering
46 }
47
48 // Now it's time to upload things to database and blob storage
49 // First, add to database, and get the ID
50 const id = await sqlite.execute(
51 `INSERT INTO ${TABLE_NAME} (title, data, type, time) VALUES ($title, $data, $type, CURRENT_TIMESTAMP)`,
221. Create a Notion integration at https://www.notion.so/my-integrations
232. Get your Notion API key
243. Create a database in Notion for meeting pages with these properties:
25 - Title (title)
26 - Meeting Date (date)
27 - Attendee (rich text)
28 - Email (email)
294. Share your database with the integration
305. Get the database ID from the URL (the part after the workspace name and before the question mark)
31
32### 3. SERP API Setup (for better user information)
41- `GOOGLE_REFRESH_TOKEN`: Refresh token for your Google account
42- `NOTION_API_KEY`: Your Notion API key
43- `NOTION_DATABASE_ID`: ID of the Notion database where meeting pages will be created
44- `TEAM_DOMAIN`: Your team's email domain (e.g., "val.town")
45- `SERP_API_KEY`: Your SERP API key for enhanced user information
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)}>