๐ Taken from a coderpad.io template
Running at https://react-todos-woad.vercel.app/
The goal of this exercise is to create a working todo list with persistent data storage.
To start with, we have a styled todo list that supports adding todos. We also have premade styles for completed todo items. Although there's no working mechanism for "completing" a todo.
- Clicking on a todo item should toggle the "checked" state. โ
- The todo list state should be saved and loaded from local storage. โ
- Checked items should sink to the bottom of the list automatically โ
-
Allow todos to be deleted. When you hover your mouse over a todo, an X should appear on the far right side, clicking the X should remove it from the list. โ
-
Add hidden timestamps to todos (createdAt, completedAt), these will be used for sorting
- The active todos should be sorted by createdAt descending โ
- The completed todos should be sorted by completedAt ascending โ
- Add Prettier โ
- Unit tests for the sortTodos models function with vitest โ
- Add https://zod.dev/ to properly parse what's coming from localStorage โ
- Update to React 18 โ
- Add a quick Github Action to run lint / tests โ
- Add a nice icon for the delete button (taken from https://heroicons.com/) โ
- Deploy to vercel โ
Todo App Icon by Nesar Ahmad: https://dribbble.com/shots/2873686-Todo-App-Icon