Skip to content

sofia32057/exercise-w11-state-management-zustand

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React State Management Task Manager with Zustand Exercise

For this weeks practice you will Create a simple task manager where tasks are managed using Zustand.

Getting Started with the Project

Dependency Installation & Startup Development Server:

Once forked and cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.

The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.

npm i && code . && npm run dev

Looking for some hints?

  1. Zustand Installation

    • Zustand isn't included in the boiler plate. You'll need to install it using npm install zustand.
  2. State Management with Zustand

    • When setting up your Zustand store, think of it as a global state container. It should hold all the tasks and provide functions to manipulate them. Follow the naming conventions when you create folders and files. Have a look at the boilerplate if you need guidance.
    • The create function from Zustand is your starting point. It accepts a setter function to help you define the state and its updater functions. Some code has been added for you to get you started!
  3. Implement the TodoList component

    • This is the component from which you will access the global state. Create a form that will allow you to add your task to the list. Display the added tasks in a list, the user should be able to delete and complete each task.
  4. Integrating Components

    • In your main App.jsx, integrate the TodoList component.
  5. Testing

    • Before pushing to GitHub, test your application thoroughly. Add tasks, remove them, and toggle the theme. Ensure everything works seamlessly.
  6. Committing and Pushing

    • Use git add . to stage your changes, followed by git commit -m "Your commit message here" to commit them.
    • Push your changes to the GitHub repository using git push origin main.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 86.7%
  • HTML 13.3%