Todo App — Full-Stack with Persistence (Next.js)
Build a full-stack todo application in Next.js (TypeScript) that persists data, exposes a JSON HTTP API, and renders server-side HTML. This problem now spins up a sandbox with a default Next.js template preloaded.
TEMPLATE
When the sandbox starts, it contains a minimal Next.js app (no Python at all):
›`package.json` with Next.js + React (pure Node, uses built-in `node:sqlite`)›`lib/db.ts` helper that already creates SQLite file `todos.db` via `node:sqlite`›`app/page.tsx` server component (currently empty, `force-dynamic`)›API routes: `app/api/todos/route.ts`, `app/api/todos/[id]/route.ts`, `app/api/todos/[id]/toggle/route.ts`›Duplicate compat routes: `app/todos/...` so both `/todos` and `/api/todos` work.Your job is to complete the TODOs to make tests pass.
REQUIREMENTS
Your server MUST listen on host `0.0.0.0` port `5001` (scripts do `-p 5001 -H 0.0.0.0`, which also covers `127.0.0.1`). Implement:
PERSISTENCE
›Use SQLite file `todos.db` in the current working directory (where Next.js runs).›Schema: `todos(id INTEGER PRIMARY KEY AUTOINCREMENT, text TEXT NOT NULL, completed INTEGER NOT NULL DEFAULT 0)`›Data must survive process restart. Do NOT use in-memory structures as primary store. `lib/db.ts` already ensures table exists.HTTP API (JSON) - SUPPORT BOTH /API/TODOS AND /TODOS FOR COMPATIBILITY
›`GET /api/todos` (and `GET /todos`) → 200 JSON array of objects `{id, text, completed: bool}`›`POST /api/todos` (and `POST /todos`) body JSON `{ "text": "..." }` → 201 create, return created object. 400 if missing/empty text.›`POST /api/todos/<id>/toggle` (and `/todos/<id>/toggle`) → 200 toggle completed flag, return updated object. 404 if not found.›`DELETE /api/todos/<id>` (and `/todos/<id>`) → 204 delete. 404 if not found.›All other error cases return appropriate 4xx JSON `{error: ...}`FRONTEND
›`GET /` → 200 HTML page rendered server-side from database state (not client JS local storage).›Must list todos with text and completed status visible in HTML source.›Use server component reading via `getDb()`. Simple template is fine; no SPA required, but HTML must reflect current server todos on each request.PROJECT STRUCTURE
Starter provides Next.js scaffold. You may modify all files. Run with `npm run dev` (already configured for 5001) or `npm run build && npm run start`.
Hidden tests will:
›Start your server (`npm run dev` or `npm start`), verify API contract including error cases on both /api/todos and /todos.›Verify frontend HTML reflects server state after API mutations.›Kill server, restart, verify data persisted via `todos.db`.›Fail any in-memory-only, API-only, or frontend-only implementation.Implement correctly to pass.