CRUD UI
Task board
A keyboard-friendly task board with no backend — every add, edit, and filter flow lives in local React state.
- Client: Personal
- Date: November 2024
- Role: React state practice
- Category: CRUD UI
- Timeline: 10 days
I built this to get comfortable with React state before reaching for a library. Everything lives in local state, which forced me to be deliberate about where data belongs and made the accessibility work impossible to skip.
The challenge
Without a backend, the board had to stay usable as tasks piled up — and stay predictable when a task moved between columns, got edited mid-filter, or was deleted while a form was open.
The approach
I kept the task list in one place and passed handlers down rather than duplicating state per column. Controlled forms with real validation meant every change went through the same path, which made bugs much easier to trace.
Key details
Every control has a visible label and a focus ring, actions can be reached with the keyboard alone, and empty columns explain what to do instead of showing a blank box. Filters live in the URL-free local state but reset cleanly when the board changes.
What I learned
Lifting state up early saved me a rewrite later. I also learned that accessibility basics — labels, focus order, and clear empty states — are much cheaper to build in from the start than to bolt on at the end.