https://fmcshoppingcart.netlify.app/
This is a mock shopping page as part of the TOP curriculum with an emphasis on the shopping cart aspect. The main focus is client sided routing of the shopping cart and practicing previousy learned React concepts.
- Use React Router for client side routing
- Practice test driven development with vitest
- Get familiar with css modules
- Fetch fake store data
- Create add-to-cart functionality and quantity adjustments
- Use conditional rendering for dynamic pages
Retreiving data and rendering on page. Users can add desired items to their cart with a quantity of up to 9 items.
Items are stored in a cart (utilizing useState).
Conditional rendering is used throughout the project (some classes included).
My favorite project so far! I've enjoyed using React a lot. Learning new concepts has been a joy and I couldn't have thought of a better project to put some of the new ones I learned to the test. The most difficult area of the project was doing the tests using vitest. I'm sure my tests aren't perfect but I'm glad to be getting familiar with it at the very least. I used outlets in this project alongside React Router so it made for a really easy experience. No project is completed without difficulty and errors along the way, and I can assure you I had some here and there. What I gained from this project was just to simply stick with it. Whether it's asking for help or googling, there's always an option to progress. Grit is the key.