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
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

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

Links

• Solution URL: Frontend Mentor
• Live Site URL: Vercel

My process

Built with

• Vite 5.4.1
• React 18.3.1
• Typescript 5.5.3
• TailwindCSS 3.4.10
• Prettier 3.3.3
• prettier-plugin-tailwind 0.6.6
• ESLint 9.9.0
• Jotai 2.10.0

What I learned

I used this project to learn jotai. It was fun and easy to use. 10/10 would recommend.

To see how you can add code snippets, see below:

Continued development

TBC maybe I could use the payment api???

• See an order confirmation modal when they click "Confirm Order"
• Reset their selections when they click "Start New Order"

Author

• GitHub - Emmanuel Jemeni
• Frontend Mentor - @Jemeni11
• Twitter - @Jemeni11_