Skip to content

to-do list web application built using zustand and container/view design pattern

License

MIT, MIT licenses found

Licenses found

MIT
LICENSE
MIT
LICENSE.txt
Notifications You must be signed in to change notification settings

AlexandreFPGoncalves/Zustand-Todo-List

Repository files navigation

Contributors Forks Stargazers Issues MIT License

Table of Contents
  1. About The Project
  2. Getting Started
  3. Roadmap
  4. Packages Used
  5. License
  6. Contact
  7. Acknowledgments

About The Project

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.

Built With

React Typescript Tailwindcss Vite Npm Git Zustand

Getting Started

Prerequisites

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

Installation

  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

Roadmap

  • 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).

Packages used

  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.

License

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

Contact

Alexandre Gonçalves | Linkedin | [email protected]

Project Link: Zustand-Todo-List

Acknowledgments

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