localStorage persistence
A to-do list that forgets everything on refresh is useless. Adding localStorage persistence with a single useEffect hook made the app actually useful while teaching me about the React lifecycle and side effects.
To-Do List App
A React task manager with Tailwind CSS — add, complete, and delete tasks with a clean, minimal interface.
React.js
Tailwind CSS
CSS
JavaScriptReact
Framework
Tailwind CSS
Styling
CRUD App
Type
Why I built this
Every developer builds a to-do list at some point — the question is what you learn from it. I built this to understand React hooks (useState, useEffect) properly, and to see how Tailwind CSS pairs with component-based architecture. Rather than rushing through it, I focused on making it feel polished: smooth interactions, clear visual hierarchy, and persistent state.
How it works
The app uses React's useState to manage the task list — each task has an id, text, and completed status. Adding a task appends to the array; completing one toggles the boolean; deleting removes by id. useEffect syncs the task list to localStorage so tasks survive a page refresh. Tailwind handles all styling with utility classes, including the strikethrough on completed tasks and the hover states on buttons.
Key decisions
Design choices
Immutable state updates
Directly mutating the tasks array was tempting but wrong. I deliberately used spread operators and array methods (map, filter) to produce new arrays on every update — building the functional programming instincts that matter in larger React codebases.
Challenges
Problems solved
Unique ID generation without a library
Tasks need unique IDs for React's key prop and for deletion logic. Rather than importing uuid, I used Date.now() combined with a counter to generate IDs — a simple but effective approach that also taught me why a proper ID strategy matters as state grows.
What I learned
The to-do list is deceptively simple. By the time I added persistence, proper deletion, and completion toggling, I had touched nearly every core React concept — state, props, effects, and event handling. I came away with a solid mental model of how React re-renders work and why immutability matters.