Frontend Mentor - Product list with cart solution

This is a solution to the Product list with cart challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

This was one of my first projects built with React. I also used an unstyled component library, useContext, useEffect, and React Router all for the first time.

The challenge

Users should be able to:

• Add items to the cart and remove them
• Increase/decrease the number of items in the cart
• See an order confirmation modal when they click "Confirm Order"
• Reset their selections when they click "Start New Order"
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Screenshots

Links

• Live Site URL: Just Desserts

Built with

• React
• React Router
• Headless UI - for the modal only

What I learned

I learned a lot about breaking a website up into to components and how to manage state across those components.

Continued Development

I hope to build many more projects with React and improve my architecture, accessibility, clean code practices. I plan to learn SCSS and Tailwind and try those in some projects.

Useful resources

• React Router Tutorial - This helped me get React Router set up. I also used the docs to figure out how to use the useNavigation hook.
• Why you shouldn't pass state as a prop - I started this project before learning useContext so this helped me understand why passing state and state setters as props is not a best practice.

Author

• Website - Visual Fraction Library - I don't have a portfolio yet but this is my first portfolio project built in Vanilla JS.
• Frontend Mentor - @mathematiCode
• BlueSky - @math-coder