For this weeks practice you will Create a simple task manager where tasks are managed using Zustand and theme (dark/light mode) is managed using React's useContext.
Once 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
-
Zustand Installation:
- Zustand isn't included in the boiler plate. You'll need to install it using
npm install zustand
.
- Zustand isn't included in the boiler plate. You'll need to install it using
-
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.
- The
create
function from Zustand is your starting point. It accepts a setter function to help you define the state and its updater functions.
-
Theme Management with
useContext
:- The
useContext
hook in React allows you to access values from a context without prop-drilling. For this exercise, you're using it to manage a theme (light/dark mode). - Define a context using
createContext()
. Remember to export both the context and a custom hook (e.g.,useTheme
) to make it easier to access the theme in your components.
- The
-
Integrating Components:
- In your main
App.jsx
, integrate both the task manager and theme toggler. This is where you'll see the interplay of Zustand anduseContext
. - Ensure that the
ThemeProvider
wraps your entire application so that the theme context is accessible everywhere.
- In your main
-
Testing:
- Before pushing to GitHub, test your application thoroughly. Add tasks, remove them, and toggle the theme. Ensure everything works seamlessly.
-
Committing and Pushing:
- Use
git add .
to stage your changes, followed bygit commit -m "Your commit message here"
to commit them. - Push your changes to the GitHub repository using
git push origin main
.
- Use
-
Collaboration:
- If working in pairs or groups, consider using feature branches for different parts of the exercise. This way, you can review each other's code through pull requests.