One state model for tasks and controls
The Redux slice holds tasks, the active filter, search text, and sort settings. The page derives its visible list from that state, so changing a filter does not modify the underlying tasks.
← Back to work
Personal project · Task management
Todo App
Create, find, and organize tasks in one view. A React and Redux task manager with search, status filters, sorting, and browser persistence.
My contribution
I implemented search and sorting, added theme controls, and wrote component and Redux tests. I added browser persistence, validated JSON backups, and visible feedback for storage failures.
Problem
Organize a task list without losing track of active and completed items. The interface combines task creation and editing with search, status filters, and ordering controls.
Interface gallery
Implementation decisions
Separate form, item, and sort components
Task entry, individual task actions, and sorting controls are separate components. The form trims the title and prevents empty submissions before dispatching an add action.
Validate stored data before restoring it
Zod checks versioned backups before they change task state. Invalid saved data is left untouched, and failed writes display a warning so the user can export a backup.
Tests alongside the implementation
The Redux slice and interface components have focused Jest tests. This separates checks of state transitions from checks of the controls that trigger them.
State and data flow
Task actions update the Redux slice. The page selects that state, filters by status and search text, then sorts the visible list. Form fields stay local until submission. A client-side boundary restores validated tasks from browser storage before rendering the workspace and saves task changes. JSON backups can be exported and imported without replacing existing task IDs. The public demo needs no account; login and signup routes redirect to the task interface.
Testing and validation
The Jest suite exercises task actions, form validation, Redux state changes, sorting, themes, and page interactions. All 106 tests across 16 suites passed locally and in GitHub Actions. Persistence tests cover reloads, malformed data, and failed storage writes.
Result
The source implements adding, editing, completing, deleting, searching, and sorting tasks, alongside light and dark theme controls.
What I would improve next
Add cross-tab conflict handling. Accounts and cross-device synchronization would require a separate backend; current storage belongs to one browser and origin.