I built a TodoList app that works like a simple digital notepad for everyday tasks. It lets users add, edit, delete, and mark tasks as completed, while keeping everything organized into two sections: “To study” and “Completed.” The app also shows an empty state when there are no tasks yet, and it saves the list in the browser so the data stays available after refreshing the page.
The most challenging part was managing the task flow in a clean and organized way, especially handling the add/edit logic through the same dialog and keeping the state synchronized across the app with React Context. Making the data persist in localStorage and keeping the interface simple but clear also required careful attention.
I’m proud of how modular the project is. I separated the interface into reusable components, which made the code easier to read, maintain, and expand. I also liked building a user experience that feels practical and lightweight, while still being functional and organized.
To test the project, just open the app and click the plus button to add a new task. You can edit a task with the pencil icon, delete it with the trash icon, and mark it as completed using the checkbox. If you refresh the page, your tasks should still be there because they are saved in localStorage. If the list is empty, you will see the empty state message.
