PRD Studio

Smoke Test App

Todo List Display — Fetch and render all todos on load, showing checkbox, text, and delete button in insertion order.

Todo List Display — Fetch and render all todos on load, showing checkbox, text, and delete button in insertion order.

  • F1.1 Fetch all todos on initial page load via GET /api/todos
    F1.1 Fetch all todos on initial page load via GET /api/todos
  • F1.2 Render each todo with checkbox, text, and delete button
    F1.2 Render each todo with checkbox, text, and delete button
  • F1.3 Strikethrough styling on completed todos
    F1.3 Strikethrough styling on completed todos
  • F1.4 Display in insertion order (oldest first)
    F1.4 Display in insertion order (oldest first)

Add Todo — Form with text input and Add button; creates a new persisted todo.

Add Todo — Form with text input and Add button; creates a new persisted todo.

  • F2.1 Text input + Add button form
    F2.1 Text input + Add button form
  • F2.2 Submit via Enter key or button click
    F2.2 Submit via Enter key or button click
  • F2.3 Reject empty or whitespace-only input
    F2.3 Reject empty or whitespace-only input
  • F2.4 POST /api/todos creates record in PostgreSQL
    F2.4 POST /api/todos creates record in PostgreSQL
  • F2.5 Clear and refocus input after successful add
    F2.5 Clear and refocus input after successful add

Complete / Uncomplete Todo — Toggle completion state via checkbox click.

Complete / Uncomplete Todo — Toggle completion state via checkbox click.

  • F3.1 Checkbox click toggles completed state
    F3.1 Checkbox click toggles completed state
  • F3.2 PATCH /api/todos/:id updates completed boolean in DB
    F3.2 PATCH /api/todos/:id updates completed boolean in DB
  • F3.3 UI updates immediately to reflect new state
    F3.3 UI updates immediately to reflect new state

Delete Single Todo — Remove a specific todo via its delete button.

Delete Single Todo — Remove a specific todo via its delete button.

  • F4.1 Delete (×) button on each todo row
    F4.1 Delete (×) button on each todo row
  • F4.2 DELETE /api/todos/:id removes record from PostgreSQL
    F4.2 DELETE /api/todos/:id removes record from PostgreSQL
  • F4.3 Todo disappears from UI immediately
    F4.3 Todo disappears from UI immediately

Clear All Completed — Bulk-delete all completed todos in one action.

Clear All Completed — Bulk-delete all completed todos in one action.

  • F5.1 'Clear completed' button visible only when completed todos exist
    F5.1 'Clear completed' button visible only when completed todos exist
  • F5.2 DELETE /api/todos?completed=true bulk-removes completed rows
    F5.2 DELETE /api/todos?completed=true bulk-removes completed rows
  • F5.3 All completed todos removed from UI in one operation
    F5.3 All completed todos removed from UI in one operation

Remaining Count — Live footer badge showing count of incomplete todos.

Remaining Count — Live footer badge showing count of incomplete todos.

  • F6.1 Footer shows 'X items left' for incomplete todo count
    F6.1 Footer shows 'X items left' for incomplete todo count
  • F6.2 Count updates immediately on every state change
    F6.2 Count updates immediately on every state change
  • F6.3 Correct singular ('1 item left') vs plural ('X items left') grammar
    F6.3 Correct singular ('1 item left') vs plural ('X items left') grammar

Data Persistence — All state stored in PostgreSQL; survives restarts and refreshes.

Data Persistence — All state stored in PostgreSQL; survives restarts and refreshes.

  • F7.1 PostgreSQL is the source of truth; no in-memory-only storage
    F7.1 PostgreSQL is the source of truth; no in-memory-only storage
  • F7.2 Data survives server restarts and browser refreshes
    F7.2 Data survives server restarts and browser refreshes

Basic Styling (NICE-TO-HAVE) — Clean, accessible visual design.

Basic Styling (NICE-TO-HAVE) — Clean, accessible visual design.

  • F8.1 Centered, readable layout
    F8.1 Centered, readable layout
  • F8.2 Strikethrough + muted color on completed items
    F8.2 Strikethrough + muted color on completed items
  • F8.3 Hover state reveals delete button
    F8.3 Hover state reveals delete button