Tour the generated project
View as MarkdownA Sapporta app is a pnpm workspace with a Hono API, a React frontend, and a shared package for API contracts and wire types.
task-app/ sapporta.json package.json pnpm-workspace.yaml .env.development data/ packages/ api/ app/ authz/ migrations/ project-auth/ schema/ frontend/ src/ shared/ src/ contracts/ scripts/ Dockerfile DEPLOYMENT.mdThe API and frontend can import the shared package. The shared package contains browser-safe contracts and wire types, with no server, database, or React I/O.
The main extension points are:
packages/api/schema/for table definitionspackages/api/migrations/for generated SQLpackages/api/app.tsfor mounting project routespackages/api/authz/for abilities and request authoritypackages/frontend/src/App.tsxfor navigation and public or protected routes
The welcome screen
Section titled “The welcome screen”The new project’s /welcome screen contains starter prompts that show how to
begin building with Sapporta.
Choose Task Management and copy the prompt into a coding agent started from the root of the Sapporta project.
Task Management prompt
Section titled “Task Management prompt”Build a simple task management application.
Use Sapporta, the database framework for TypeScript, and ensure the Sapporta skill is installed. Follow the setup instructions at https://sapporta.com/docs/getting-started/introduction/.
Keep the first version focused and easy to understand: include the core workflows that make the app useful, and avoid exhaustive features or deep customization.
Use workspaceGlobal tables with this exact contract: people(id, name, email), projects(id, name, description, status), tasks(id, title, description, status, priority, due_date, assignee_id, project_id), labels(id, name, color), task_labels(id, task_id, label_id), comments(id, task_id, author_id, body). Use status values open, in_progress, blocked, done; priorities low, normal, high; and project statuses active, paused, complete. Do not expose workspace_id, workspaceId, scoped_to_user_id, or scopedToUserId in clients, CLI commands, or agent prompts.
Include workflows for creating a task, assigning it, changing its status, and adding a comment. Include reports for open tasks, overdue tasks, tasks by assignee, and tasks by project. Populate the application with realistic sample projects, people, tasks, labels, and comments so the first run shows an active todo app.
Before changing the app, review:
- README.md
- AGENTS.md
- Sapporta coding-agent skill
Try the generated app
Section titled “Try the generated app”After the agent finishes, stop and restart the development server if needed:
pnpm buildpnpm devAdd a few tasks and inspect the generated table screens. The next tutorial pages build the same application step by step, beginning with Define projects and tasks.