https://github.com/thehelpfultipper/frontendmentor_ecommerce_page
Solution walkthrough for Frontend Mentor's E-commerce product page.
https://github.com/thehelpfultipper/frontendmentor_ecommerce_page
frontend-mentor frontendmentor-challenge reactjs vite
Last synced: about 2 months ago
JSON representation
Solution walkthrough for Frontend Mentor's E-commerce product page.
- Host: GitHub
- URL: https://github.com/thehelpfultipper/frontendmentor_ecommerce_page
- Owner: thehelpfultipper
- Created: 2024-05-20T14:45:07.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-07-09T03:54:15.000Z (almost 2 years ago)
- Last Synced: 2025-12-19T09:31:04.921Z (6 months ago)
- Topics: frontend-mentor, frontendmentor-challenge, reactjs, vite
- Language: JavaScript
- Homepage: https://thehelpfultipper.com/frontendmentor_ecommerce_page/
- Size: 822 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - E-commerce product page solution
This is a solution to the [E-commerce product page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/ecommerce-product-page-UPsZ9MJp6). This E-commerce product page is built with React and Vite, and it’s designed to create a sleek, responsive product page that includes features like a lightbox gallery, cart management, and adaptive layouts for different screen sizes.
[Demo link](https://thehelpfultipper.com/frontendmentor_ecommerce_page/).
## Objective
This project aims to build an e-commerce product page that looks as close to the provided design as possible. The responsive application provides an optimal layout for different device screen sizes and includes interactive elements with hover states.
### The challenge
Users should be able to:
- View the optimal layout for the site depending on the device 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
**View tutorial:** [How to Build an E-commerce Product Page with React and Vite](https://thehelpfultipper.com/how-to-build-an-e-commerce-product-page-with-react-and-vite/)
## Features
- **Lightbox Gallery**: Open a lightbox by clicking on the large product image.
- **Thumbnail Navigation**: Switch the large product image by clicking on the small thumbnail images.
- **Add to Cart**: Add items to the cart and view the cart details.
- **Responsive Design**: View optimal layouts for different screen sizes.
- **Interactive Elements**: See hover states for all interactive elements.
## Technologies Used
- Vite
- React
- CSS Modules
- React Context
- Custom Hooks
## Credits
[Frontend Mentor](https://www.frontendmentor.io/): Project idea and specifications.
## License
This project is licensed under the MIT License. Feel free to use the code for personal or commercial projects.
For detailed tutorials, visit the [blog](https://thehelpfultipper.com/).