Now we are getting to our final React application. It’s going to be a shopping cart.
This application should also have at least two routes to give you a chance to make some use of your newly acquired react-router-dom skills.
- Create a new project with
create-react-app and get rid of the boilerplate as in the previous projects.
- Think about the component and the folder structure. How could you set up your application? Which components or functionalities do you need?
- You should have at least two pages (a homepage and a shop page, which includes your shopping cart). Let a user navigate between the pages with a navigation bar, which will be shown on both routes.
- To your homepage, you can add whatever you’d like! A few images or information will be totally fine; it doesn’t have to be something fancy. The main goal of the project is to focus on setting up the shopping cart. The homepage is there to practice routing using
- On your shopping cart route, a user should see a sticky bar (it can be just a top section as well), which displays the number of items currently in the cart. You should also have a button next to it where you can go to the cart to checkout and pay (however we are not going to implement this logic here).
- Build individual card items for each of your products. Display an input field on it, which lets a user manually type in how many items they want to buy. Also, add an increment and decrement button next to it for fine-tuning. You can also display a title for each product as well as an “Add To Cart” button.
- Once a user has submitted their order, the amount on the cart itself should adjust.
- Make sure to test your app thoroughly using the React Testing Library. Take care that you don’t directly test
react-router-dom, since it is an external library and the developers working on it must have tested the library already.
- As usual, style your application so you can show it off!
- Lastly, push the project to GitHub! Follow this link for instructions on how to deploy React applications with client-side routing to Github Pages. Be aware that the page will stay blank, unless you provide a basename to the
<BrowserRouter />. For a more detailed description, read this part of the React Router docs.