It's time to put those Redux fundamentals you've learned to work, and build your first project! Your goal for this project is to build a Redux application based on a wireframe and a set of deliverables, following React and Redux principles.
Your project should demonstrate your ability to do the following:
- Create a component hierarchy to represent a UI.
- Use the configureStore() function provided by the Redux toolkit to manage global state.
- Use the useSelector() and useDispatch() hooks provided by React-Redux to access and update the store.
- Implement all CRUD actions
A rubric is provided at the bottom of this document that outlines the criteria by which your assignment will be evaluated.
For this project, you'll be creating a React-Redux Habit Tracker frontend application. You must build features that complete the following user stories:
As a user, I can…
- CRUD individual habits
- Create a new habit.
- See all of my habits in a list form.
- Update a habit.
- Remove a habit.
- Complete a daily habit.
- Bonus: See the % of total habits completed.
- Bonus: Implement testing into the project
As a rough guide for what the finished project should look like, here are some wireframes:
Styling isn't the focus of this project, and you're free to change the look and feel as you like, so long as all the user stories are represented in your application.
You should use these wireframes to design your component hierarchy following the process from [Thinking in React][thinking].
You will start your app from scratch, but we will help provide some of the boilerplate code to get you started in a little bit. Start by creating a new react app by running the following:
$ npx create-react-app <your-app-name>
Let's start by installing Redux Toolkit and React-Redux, which include all the
code needed for working with React and Redux together. If you need a refresher,
revisit
this lesson.
cd
into your app's directory and then run:
$ npm install @reduxjs/toolkit react-redux
We also want to make sure we have json-server
installed so we can persist data
in our habit tracker. Install it:
$ npm install json-server
Open up your project in your text editor to follow along with the next steps,
where we'll configure json-server
and begin scaffolding the React application.
Note: A completed version of the starter code is available in the
example-app
folder in this repository so you can compare your code when you've finished working through the setup instructions.
To start, update the scripts
section of the package.json
file so you're able
to run your React application and json-server
on separate ports:
{
"scripts": {
"start": "react-scripts start",
"server": "json-server --watch db.json --port=4000",
"build": "react-scripts build"
}
}
In the root of your project, create a new file called db.json
. This is where
our data will be stored. Add the following seed data to this file:
{
"habits": [
{
"id": "1",
"title": "code everyday",
"days": {
"sunday": false,
"monday": false,
"tuesday": false,
"wednesday": false,
"thursday": false,
"friday": false,
"saturday": false
}
},
{
"id": "2",
"title": "read for 30 minutes",
"days": {
"sunday": false,
"monday": false,
"tuesday": false,
"wednesday": false,
"thursday": false,
"friday": false,
"saturday": false
}
}
]
}
Finally, let's get the json-server
running. Run the following in your console,
and then head to http://localhost:4000/habits
in your browser.
$ npm run server
In another terminal, run the following to get your project running:
$ npm start
If all is well, you should see the React start up page on
http://localhost:3000
, and the data from the db.json
file served by
json-server
on http://localhost:4000/habits
.
In order to submit your project, you'll need to create a new GitHub repository for your code following the guide below. Since you'll be using the existing code from your local repository, don't check any of the boxes next to "Add a README", "Add a .gitignore", or "Choose a license".
Once your repository is created, follow the instructions to push an existing repository from the command line:
$ git remote add origin git@github.com:your-name/your-repo-name.git
$ git branch -M main
$ git push -u origin main
It's recommended that you commit and push up your code often.
Now that you've got the project scaffolded and have json-server
all set up,
you can start working on building features based on the user stories and
wireframes above.
Once your work is done, submit a link to your GitHub repository in Canvas for review.
Your assignment will be evaluated on a 1-4 scale for each of the following criteria:
- Create a store using Redux to manage global state.
- Does not successfully create a store using Redux.
- Creates a store using Redux that includes an initial state as well as reducers for some, but not all, of the user stories defined in the deliverables (i.e. has a reducer to create and remove habits, but not update them).
- Creates a store in Redux that has an initial state and reducers to handle all of the user stories.
- Includes additional reducers for handling bonus deliverables.
- Subscribe a component to changes in the Redux store state.
- Does not successfully subscribe a component to the Redux store.
- Successfully subscribes a component to the Redux store using the
useSelector
hook, but does not follow best practices (i.e. returns more state than needed in the component), or does not use theuseSelector
hook in the appropriate components (i.e. only usesuseSelector
in one high-level component instead of throughout the component hierarchy). - Successfully subscribes components to the Redux store using the
useSelector
hook and follows best practices, only accessing the necessary state within each component that should be subscribed to the store. - Uses the
useSelector
hook to handle bonus deliverables.
- Dispatch actions to update the Redux store state based on user events.
- Does not successfully dispatch actions to the Redux store.
- Successfully dispatches at least one action to the Redux store, but does not dispatch actions for all the user stories (i.e. dispatches actions to create and remove habits, but not update them).
- Successfully dispatches actions for all of the user stories.
- Successfully dispatches actions to handle bonus deliverables.
- Handle asynchronous actions such as API requests using Redux.
- Does not successfully handle asynchronous actions for API requests using Redux.
- Successfully handles asynchronous actions for API requests using Redux, but does not follow best practices (i.e. doesn't handle different loading/error states), or does not handle asynchronous actions for all user stories (i.e. does not persist creating/updating/deleting habits).
- Successfully handles asynchronous actions for API requests following best practices (i.e. handles different loading/error states) for all user stories.
- Successfully handles asynchronous actions for bonus deliverables.