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
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

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

• Live Site URL: demo

My process

• I first created the basic UI/UX using astro and mainly react.
• I had to learn more about nanostores to create the basket state management.
• The last step I had to take was to create the modal and I used shadcn to create it.

Built with

• Astro
• React - JS library
• Shadcn - For styles
• Nanosotores - For state management

What I learned

I've learned some of the basic concepts of Astro and Nanostores and still have a lot to learn about them.

---
import Layout from '../layouts/Layout.astro';
import MainLayout from '../layouts/MainLayout.astro';
import ProductLayout from '../components/product';
import Cart from '../components/cart';
---

<Layout title="Product list with cart | Frontend Mentor">
  <main class="h-fit w-full overflow-y-auto overflow-x-hidden">
    <MainLayout>
      <ProductLayout client:visible />
      <Cart client:visible/>
    </MainLayout>
  </main>
</Layout>

Continued development

I'm going to concentrate on developing websites using astro and fewer react components to develop my knowledge of its features.

Useful resources

• Stack Overflow
• Medium

Author

• Frontend Mentor - @dmikaia

Acknowledgments

For anyone wishing to learn a new framework or even a new language, the best way is to practice right away and avoid as much as possible 'tutorial hell' you can learn more about this here. Instead, you can learn by researching and reading books.