UI workflow
Scenario
API-Seeded Task Board
A real REST API (create/list/update/delete tasks) backing a live board UI. Seed or verify data through the API directly, then confirm the UI reflects it — the API-plus-UI pattern real hybrid test suites rely on.
How this works
- · A real REST API backs the board — GET/POST/PATCH/DELETE against /api/scenarios/tasks — the board UI is just a client of that same API, not a separate mock underneath it.
- · Data lives in your session cookie, so seeding via curl and then reloading the page shows the seeded tasks immediately — a good way to practice verifying API-created state through the UI.
- · No database — a server restart or the reset endpoint wipes it back to the three seed tasks.
What you'll practice
- Calling a real REST API directly (GET / POST / PATCH / DELETE) to seed or verify data
- Confirming the UI reflects state that was created entirely through the API, not through the UI
- Creating and moving tasks through the UI, then verifying via the API that the change actually persisted
- Handling a 400/404 error response from the API, not just the happy path
API reference
GET /api/scenarios/tasks
→ { tasks: Task[] }
POST /api/scenarios/tasks
body { title: string } → { task: Task } (201)
PATCH /api/scenarios/tasks/:id
body { status: 'todo'|'in-progress'|'done' } → { task: Task }
DELETE /api/scenarios/tasks/:id
→ { ok: true }
Try it: curl -X POST https://playground.krishanchawla.com/api/scenarios/tasks -H "Content-Type: application/json" -d '{"title":"Test from curl"}' — then open the Board and refresh. Your task will
be there, created entirely through the API.
- 1 Board