Magento 2 Experten — Hyvä Theme, Tailwind CSS & SEO aus einer Hand ›

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 archive custom operation as a button.
  • Chapter 86: a project's nested task list.
  • Chapter 87: creating a task, a manually constructed project IRI.
  • 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.