TODO-APPBrowser-Persisted Kanban Board
- Period
- Mar 2024 - Mar 2024
- Project type
- Independent Project
- Role
- Frontend Developer (Individual)
- Team
- Solo
A compact React Kanban board with editable lists and cards, cross-column drag-and-drop, and instant browser persistence for lightweight personal task organization.
Overview
TODO-APP starts with To do, In Progress, and Completed lists. Users can create, edit, delete, and reorder lists and cards, move cards between columns, and return to the same board after a reload through localStorage persistence.
Role & context
- Role
- Frontend Developer
- Team
- Solo
- Type
- Independent Project
- Period
- Mar 2024 - Mar 2024
A small solo frontend project built to explore complete Kanban interactions in React. It is separate from the Firebase-backed Master Todo project: this application stores its entire board in one browser profile and has no account or server layer.
Problem
A checklist does not show work moving through stages, while a full project-management service adds accounts and administration. This project keeps the workflow visual and immediately usable for one person on one device.
Approach & architecture
React Context owns board mutations, drag events update nested list/card state, and every successful change persists to localStorage.
Practices followed
Centralized board operations in React Context for nested list and card components
Used stable UUIDs rather than display labels as persistent object identity
Handled same-list reorder and cross-list movement as distinct drag operations
Persisted every successful mutation so the board survives a page reload
Challenges & resolutions
Cards need to move both within one list and between two independently ordered collections.
FixUsed source and destination indexes from the drag lifecycle to reorder or transfer the card before persisting the board.
Outcomes
Users can manage a complete multi-column task board entirely in the browser
List order, card order, edits, and cross-list status changes survive page reloads
The project demonstrates nested state composition, direct manipulation, and client-side persistence
Tech stack
Concepts & skills7
- React component composition
- React Context
- Nested collection state
- Kanban interaction design
- Drag-and-drop lifecycle
- Browser-local JSON persistence
- Client-generated UUIDs