Next.js task board showcasing Async React patterns: useOptimistic, Suspense boundaries, action props, form actions, and more.
See the codeREADME
Async React Demo
A Next.js task board demonstrating async React coordination — optimistic updates, transitions, pending feedback, and form state management.
App Features
- Kanban board — Three-column layout (Todo / In Progress / Done) with drag-and-drop and label filter chips
- Create task — Modal dialog with full form (title, description, status, priority, assignee, labels)
- Task detail page — Full task view with metadata, inline controls, and comment thread
- Priority cycling — Cycle task priority (low → medium → high → low)
- Assignee reassignment — Reassign tasks to team members
- Comments — Add and delete comments on any task
Async React Patterns
| Where | What happens | How |
|---|---|---|
| Task detail page | Page shell paints immediately, sections stream in as data resolves | <Suspense> boundaries with promise-passing |
| Drag-and-drop | Card moves to target column instantly, reverts on failure | useOptimistic with reducer + startTransition |
| Task card controls | Priority updates instantly on click | useOptimistic with updater function |
| Label filter | Chip highlights immediately, board dims while filtered data loads | useTransition + data-pending + action props |
| Create task modal | Button shows "Creating...", dialog closes with fresh board in one step | useActionState + key-based form reset + double startTransition |
| Comment form | New comment appears immediately while server catches up | Form action + useOptimistic list add |
| Delete button | Comment card fades to 30% opacity during deletion | useOptimistic(false) + data-pending CSS |
| Repeat navigation | Cached reads and runtime prefetch make navigations instant | 'use cache' + cacheTag + updateTag + unstable_prefetch |
See the Interactive Apps guide for a step-by-step walkthrough.
Setup
pnpm install
pnpm run dev
Tech Stack
- Next.js 16 App Router
- TypeScript
- Tailwind CSS 4
- shadcn/ui
- Geist Sans + Mono fonts
- SQLite data store (auto-seeds on first run) with simulated delays
Credits
Based on Ricky Hanlon's Async React demo from the React Conf 2025 talk. See the Async React Working Group for the latest on making Async React the default for React apps.
Contributors
96 commits
Similar repos
Languages
TypeScript
95.6%
CSS
3.5%
Next.js task board showcasing Async React patterns: useOptimistic, Suspense boundaries, action props, form actions, and more.
See the codeREADME
Async React Demo
A Next.js task board demonstrating async React coordination — optimistic updates, transitions, pending feedback, and form state management.
App Features
- Kanban board — Three-column layout (Todo / In Progress / Done) with drag-and-drop and label filter chips
- Create task — Modal dialog with full form (title, description, status, priority, assignee, labels)
- Task detail page — Full task view with metadata, inline controls, and comment thread
- Priority cycling — Cycle task priority (low → medium → high → low)
- Assignee reassignment — Reassign tasks to team members
- Comments — Add and delete comments on any task
Async React Patterns
| Where | What happens | How |
|---|---|---|
| Task detail page | Page shell paints immediately, sections stream in as data resolves | <Suspense> boundaries with promise-passing |
| Drag-and-drop | Card moves to target column instantly, reverts on failure | useOptimistic with reducer + startTransition |
| Task card controls | Priority updates instantly on click | useOptimistic with updater function |
| Label filter | Chip highlights immediately, board dims while filtered data loads | useTransition + data-pending + action props |
| Create task modal | Button shows "Creating...", dialog closes with fresh board in one step | useActionState + key-based form reset + double startTransition |
| Comment form | New comment appears immediately while server catches up | Form action + useOptimistic list add |
| Delete button | Comment card fades to 30% opacity during deletion | useOptimistic(false) + data-pending CSS |
| Repeat navigation | Cached reads and runtime prefetch make navigations instant | 'use cache' + cacheTag + updateTag + unstable_prefetch |
See the Interactive Apps guide for a step-by-step walkthrough.
Setup
pnpm install
pnpm run dev
Tech Stack
- Next.js 16 App Router
- TypeScript
- Tailwind CSS 4
- shadcn/ui
- Geist Sans + Mono fonts
- SQLite data store (auto-seeds on first run) with simulated delays
Credits
Based on Ricky Hanlon's Async React demo from the React Conf 2025 talk. See the Async React Working Group for the latest on making Async React the default for React apps.
Similar repos
Contributors
96 commits
Languages
TypeScript
95.6%
CSS
3.5%