Block 10 Summary: Complete CRUD UI
Block 10 Summary: Complete CRUD UI
~16 Min. Lesezeit Zuletzt aktualisiert am August 8, 2026
Block 10 is COMPLETE. aufgaben-manager-web is NOW a COMPLETE, working application – from login TO real-time-updated, editable projects with tasks and tags.
What block 10 covered
- Chapter 83: editing a project (
PATCH,setQueryData). - Chapter 84: deleting a project, confirmation dialog, 403 handling.
- Chapter 85: the
archivecustom operation as a button. - Chapter 86: a project's nested task list.
- Chapter 87: creating a task, a manually constructed
projectIRI. - Chapter 88: marking a task as done via a checkbox.
- Chapter 89: a tag multi-select as a "controlled component".
- Chapter 90: skeleton loading states instead of plain text.
- Chapter 91: optimistic updates with
onMutate/onError/onSettled.
Project state at the end of block 10
aufgaben-manager-web – state after chapter 91
web/src/ ├── api/client.ts ├── context/AuthContext.tsx ├── hooks/ │ ├── useProjects.ts, useCreateProject.ts, useUpdateProject.ts, useDeleteProject.ts │ ├── useArchiveProject.ts │ ├── useProjectTasks.ts, useCreateTask.ts, useToggleTaskDone.ts │ ├── useTags.ts │ └── useMercure.ts ├── components/ │ ├── CreateProjectForm.tsx, EditProjectForm.tsx │ ├── ArchiveProjectButton.tsx, DeleteProjectButton.tsx │ ├── TagSelector.tsx │ └── ProjectListSkeleton.tsx ├── pages/ │ ├── LoginPage.tsx, ProjectListPage.tsx, ProjectDetailPage.tsx └── types/ (project.ts, task.ts, error.ts, generated api.ts)
Apply it yourself: a status display
If the Status exercise from blocks 2/3/5 was completed: build a useStatuses() hook (EXACTLY following the pattern of useTags from chapter 89) and display the status COLORED (status.color) on the project list.
What's coming in block 11
Block 11 (chapters 93-97, the SHORTEST block of the course) introduces AUTOMATED tests: PHPUnit integration tests for the API (EXACTLY as in the Symfony course, chapters 44-46, now applied to API Platform endpoints) as well as React component tests with Vitest/Testing Library – the TRANSITION from "works when I test it manually" to "provably works, EVEN with future changes".
Tipp: A good moment for a COMPLETE manual test run: registering, logging in, creating/editing/deleting/archiving a project, adding/completing tasks, assigning tags, opening TWO tabs for Mercure real-time tests – EVERYTHING block 11 then AUTOMATES.