23- Optimistic updates
24- Server-side data injection
25- Type-safe database operations
26
27## Project Structure
29```
30โโโ backend/ # Hono server running on Val Town
31โ โโโ database/ # Drizzle schema, migrations, and queries
32โ โโโ index.ts # Main Hono application
33โโโ frontend/ # React app running in browser
4
5* `index.ts` - this is the **entrypoint** for this whole project
6* `database/` - this contains the code for interfacing with the app's SQLite database table
7
8## Hono
26## CRUD API Routes
27
28This app has two CRUD API routes: for reading and inserting into the messages table. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. These routes are called from the React app to refresh and update data.
29
30## Errors
1# Database
2
3This app uses [Val Town SQLite](https://docs.val.town/std/sqlite/) to manage data. Every Val Town account comes with a free SQLite database, hosted on [Turso](https://turso.tech/). This folder is broken up into two files:
4
5* `migrations.ts` - code to set up the database tables the app needs
6* `queries.ts` - functions to run queries against those tables, which are imported and used in the main Hono server in `/backend/index.ts`
7
8## Migrations
9
10In `backend/database/migrations.ts`, this app creates a new SQLite table `reactHonoStarter_messages` to store messages.
11
12This "migration" runs once on every app startup because it's imported in `index.ts`. You can comment this line out for a slight (30ms) performance improvement on cold starts. It's left in so that users who fork this project will have the migration run correctly.
13
14SQLite has much more limited support for altering existing tables as compared to other databases. Often it's easier to create new tables with the schema you want, and then copy the data over. Happily LLMs are quite good at those sort of database operations, but please reach out in the [Val Town Discord](https://discord.com/invite/dHv45uN5RY) if you need help.
15
16## Queries
17
18The queries file is where running the migrations happen in this app. It'd also be reasonable for that to happen in index.ts, or as is said above, for that line to be commented out, and only run when actual changes are made to your database schema.
19
20The queries file exports functions to get and write data. It relies on shared types and data imported from the `/shared` directory.
4import { MESSAGE_LIMIT } from "../../shared/utils.ts";
5
6// This will create the database table if it doesn't exist.
7// This will run every time the app starts up. You can
8// comment out this line for a modest (30ms) performance improvement
9// on cold starts. It's left in to ensure the database tables are
10// automatically set up correctly for users who fork this app.
11await createTables();
1import { Hono } from "https://esm.sh/hono@3.11.7";
2import { readFile, serveFile } from "https://esm.town/v/std/utils@85-main/index.ts";
3import { runMigrations } from "./database/migrations.ts";
4import recipesRoutes from "./routes/recipes.ts";
5import parseRoutes from "./routes/parse.ts";
12});
13
14// Initialize database on startup
15await runMigrations();
16
27app.get('/api/test-delete', async (c) => {
28 try {
29 const { createRecipe, deleteRecipe, getAllRecipes } = await import('./database/queries.ts');
30
31 // Create a test recipe
39 if (!recipeId) {
40 console.error('Failed to get recipe ID from insert result:', recipeResult);
41 throw new Error('Failed to create recipe: no ID returned from database');
42 }
43
47 if (isNaN(numericRecipeId) || numericRecipeId <= 0) {
48 console.error('Recipe ID is not a valid number:', recipeId);
49 throw new Error('Failed to create recipe: invalid ID returned from database');
50 }
51
7 updateRecipe,
8 deleteRecipe
9} from "../database/queries.ts";
10
11const app = new Hono();
5
6export async function runMigrations() {
7 console.log('Running database migrations...');
8
9 // Create recipes table
51 `);
52
53 console.log('Database migrations completed');
54}
55
21- **Frontend**: React with TypeScript, TailwindCSS
22- **Backend**: Hono API framework
23- **Database**: SQLite for recipe storage
24- **AI**: OpenAI GPT-4 for intelligent recipe parsing
25- **File Processing**: PDF parsing and image OCR capabilities
29```
30โโโ backend/
31โ โโโ database/
32โ โ โโโ migrations.ts # Database schema
33โ โ โโโ queries.ts # Database operations
34โ โโโ routes/
35โ โ โโโ recipes.ts # Recipe CRUD operations
28
29 // For now, just log the configuration
30 // In a real implementation, you might store this in a database or environment variable
31 console.log(`๐ Refresh frequency updated to: ${refreshFrequency}`);
32