Back 
E-Commerce Product Page
A landing page for a mockup e-commerce site, selling sneakers. Tho much was hard coded, like the text values, the page has a responsive design depending on viewport and keyboard controls. A challenge by Frontend Mentor.
Links
Media
Desktop
Tablet
Mobile
The challenge
Users should be able to:
- View the optimal layout for the site depending on their device’s screen size
- See hover states for all interactive elements on the page
- Open a lightbox gallery by clicking on the large product image
- Switch the large product image by clicking on the small thumbnail images
- Add items to the cart
- View the cart and remove items from it
Keyboard Navigation
| Key | Action |
|---|---|
| c | Toggle cart open/closed |
| - | Decrease quantity ordered by 1 |
| + | Increase quantity ordered by 1 |
| Enter | Add ordered quantity to cart |
| ←, → | Scroll item images |
My process
Built with
- Astro: Static site generator
- Tailwind CSS: CSS framework
- SolidJS: JavaScript library
- Nanostores: State management
- Persistent Nanostores: Persistent state management
What I learned
- Sharing a store between Astro Islands using Nanostores.
- Dealing with persistent states with
@nanostores/persistent. - Having two versions of the app toggling depending on the screen size.
Author
- Website - frilly.dev
- Frontend Mentor - @hikawi