alexandrefpgoncalves / zustand-todo-list Goto Github PK

Personal To-Do List Project, built using Zustand as it's state management and the Container/View Pattern, the idea of this project is to gather new skills and knowledge while creating something functional.

Zustand

Have the latest LTS npm version installed on your machine from this website.

1. Clone the repository

   git clone https://github.com/AlexandreFPGoncalves/Zustand-Todo-List.git

2. Install NPM packages

   npm i

3. Run application

   npm run dev

• Initial Zustand and Architecture Story
• Mocked Todo List
• State Management - Zustand
  • Store Structure
  • New Todo Action
  • Edit Todo Action
  • Delete Todo Action
  • Complete All Todos Action
  • Clean Todos Action
• Development on a todo list using my state management
• Vercel Deployment
• Application Design
  • Removal of unused CSS
• emptyShard Component +

See the open issues for a full list of proposed features (and known issues).

1. Clsx | Creates classes variations, helps on creating conditional style classes inside a component.
   
2. @radix-ui/react-icons | Various primitive icons from radix are utilized in this project.
   
3. uuidv4 | Easily create UUIDs.
   
4. Zustand | A small, fast, and scalable bearbones state management solution. Zustand has a comfy API based on hooks. It isn't boilerplatey or opinionated, but has enough convention to be explicit and flux-like.
   
5. Tailwindcss | A utility-first CSS framework packed with styled classes that can be composed to build any design, directly in your markup.

Distributed under the MIT License. See LICENSE.txt for more information.

Alexandre Gonçalves | Linkedin | [email protected]

Project Link: Zustand-Todo-List

Thanks to Diogo Nogueira and Humberto Vieira for any help and knowledge shared.