- Vite
- ReactJS
- Tailwind CSS
- Typescript
- react-hook-form
- zod for form validation
- uuid for unique id generation
Users are able to add, delete, and filter task by category. Data is stored in local storage and is retreieved upon page refresh or revisiting to the web page. There are respective error messages when there is no task in the list, or when there is not task in that category. The filtered list is rendered as a different component, while state is lifted to App.tsx file so that user can delete tasks from every components.
Zod is use for form validation. Data type involved include date, string, and also uuid for unique ids. React hook form is used for form construction. Typescript is used throughout the project for improved type safety.
Adding the filter funciton is relatively easy. However, the logic behind synchonizing update when tasks are added or deleted might be the most challenging part of this project. The final solution of rendering the filtered list as a custom components and passing filter criteria makes most sense to me.