Frontend Mentor - E-commerce product page

Solution preview 😎

website link

The challenge

The challenge is to build out E-commerce product page and get it looking as close to the design as possible, and i added my own feature as bonus 😎

Overview

• Design reference found in /design.
• In src/page/product you will find md files for each item easily edit and add product.
• src/layout/Product.astro template design for all product using astro component .
• In src/store using the amazing nanostores for state managing and moving logic from components to stores.
• Store your items and price calculation are kept in local store until you delete an item.
• UseMediaQuery.jsx hook for component with conditional rendering element based on their device's screen size.
• See hover states for all interactive elements on the page.

Tools I used

• Astor Build
• Preact
• Tailwind
• Gsap 3
• Nanostores
• Nanostores / persistent

Learning outcomes

My focus for this project is to practices using Astro Build as it a still new technology but powerful workflow. I was able to implement:

1. Manging shopping Cart and keep items even when site is closed.
2. How to write Astro Layout template for each product with the right end-point.
3. Making the image gallery and light-box without any fancy library and fully interactive.
4. tailwindcss Dark mode and how to use tailwindcss config file for customization.
5. Styling with tailwindcss for mobile.
6. Mobile nav animations using Gsap 3.
7. Keep each Component everything in on concise file.

My profile at Frontendmentor

Artmade

👀 Want to know more about my work?

Feel free to check Twitter for more works