Build your first app (Todos)

1# Web (WASM SQLite) or Supabase (cloud Postgres)
2npm i @vibecode-db/client @vibecode-db/sqlite-web
3# Supabase adapter is bundled in @vibecode-db/client (no extra package)

1# .env
2VITE_VIBECODE_ADAPTER=sqlite   # or: supabase
3VITE_SUPABASE_URL=...          # only if using Supabase
4VITE_SUPABASE_ANON_KEY=...

1// db/schema.ts
2import { vibecodeTable, col, references, defineSchema } from '@vibecode-db/client'
3
4export const users = vibecodeTable('users', {
5  id: col.integer(),
6  name: col.varchar(),
7  email: col.varchar(),
8})
9
10export const todos = vibecodeTable('todos', {
11  id: col.varchar(),
12  title: col.varchar({ length: 256 }),
13  completed: col.boolean(),
14  created_at: col.timestamp(),
15  updated_at: col.timestamp(),
16  user_id: references(col.integer('user_id'), () => users.id), // M→1
17})
18
19export const db = defineSchema({ users, todos })

1// db/spec.ts
2import type { DBSpec } from '@vibecode-db/client'
3import { db } from './schema'
4
5export const dbSpec: DBSpec<typeof db.zodBundle.shape> = {
6  schema: db.zodBundle,
7  relations: db.relations,
8  seed: {
9    users: [
10      { id: 1, name: 'Ada',  email: 'ada@example.com' },
11      { id: 2, name: 'Alan', email: 'alan@example.com' },
12    ],
13    todos: [
14      {
15        id: 't1',
16        title: 'Wire the UI',
17        completed: false,
18        user_id: 1,
19        created_at: new Date(),
20        updated_at: new Date(),
21      },
22    ],
23  },
24}

1// db/migrations.ts
2export const migrations: string[] = [
3  `CREATE TABLE IF NOT EXISTS "users" (
4     "id"      INTEGER PRIMARY KEY,
5     "name"    TEXT,
6     "email"   TEXT
7   );`,
8
9  `CREATE TABLE IF NOT EXISTS "todos" (
10     "id"          TEXT PRIMARY KEY,
11     "title"       TEXT,
12     "completed"   INTEGER,
13     "created_at"  TEXT,
14     "updated_at"  TEXT,
15     "user_id"     INTEGER,
16     FOREIGN KEY("user_id") REFERENCES "users"("id")
17   );`,
18
19  `CREATE INDEX IF NOT EXISTS "todos_created_at_idx" ON "todos" ("created_at");`,
20]

1// db/client.ts
2import { createClient } from '@vibecode-db/client'
3import { SupabaseAdapter } from '@vibecode-db/client/adapters/supabase'
4import { SQLiteWebAdapter, type SQLiteWebAdapterOptions } from '@vibecode-db/sqlite-web'
5import { dbSpec } from './spec'
6import { migrations } from './migrations'
7
8const which = import.meta.env.VITE_VIBECODE_ADAPTER as 'sqlite' | 'supabase'
9
10const sqliteOpts: SQLiteWebAdapterOptions = {
11  wasmUrl: 'node_modules/sql.js/dist/sql-wasm.wasm', // ensure this asset is served
12  migrations,
13  enableForeignKeys: true,
14  seedBehavior: 'upsert',
15}
16
17export const db = createClient({
18  dbSpec,
19  adapter: (ctx) => {
20    if (which === 'supabase') {
21      return new SupabaseAdapter(ctx, {
22        url: import.meta.env.VITE_SUPABASE_URL as string,
23        key: import.meta.env.VITE_SUPABASE_ANON_KEY as string,
24      })
25    } else {
26      return new SQLiteWebAdapter(ctx, sqliteOpts)
27    }
28  },
29})

1// Read users (projection + order)
2const users = await db
3  .from('users')
4  .order('name', { ascending: true })
5  .select('id, name, email')

1// Read todos for a user (one-level M→1 relation in projection)
2const todos = await db
3  .from('todos')
4  .eq('user_id', 1)
5  .order('created_at', { ascending: false })
6  .limit(10)
7  .select('id, title, completed, user_id, created_at, updated_at, users(name, email)')

1// Insert a todo
2await db.from('todos').insert({
3  id: crypto.randomUUID(),
4  title: 'New task',
5  completed: false,
6  user_id: 1,
7  created_at: new Date(),
8  updated_at: new Date(),
9})

1// Toggle (update) a todo
2await db.from('todos').eq('id', 't1').update({ completed: true, updated_at: new Date() })

1// Delete a todo
2await db.from('todos').eq('id', 't1').delete()