https://github.com/catevika/frontendmentor_product-page_by-catevika
This is a solution to the Multi-step-form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
https://github.com/catevika/frontendmentor_product-page_by-catevika
css jsx react-plugin react-responsive react-router-dom vite
Last synced: about 1 month ago
JSON representation
This is a solution to the Multi-step-form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Host: GitHub
- URL: https://github.com/catevika/frontendmentor_product-page_by-catevika
- Owner: Catevika
- Created: 2023-07-21T17:34:59.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-31T12:10:46.000Z (over 1 year ago)
- Last Synced: 2025-02-12T02:57:26.159Z (3 months ago)
- Topics: css, jsx, react-plugin, react-responsive, react-router-dom, vite
- Language: JavaScript
- Homepage: https://frontendmentor-product-page-catevika.netlify.app/
- Size: 847 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). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Frontend Mentor - E-commerce product page solution](#frontend-mentor---e-commerce-product-page-solution)
- [Table of contents](#table-of-contents)
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Author](#author)
## Overview
### 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
### Screenshot
### Links
- Solution URL: [https://github.com/Catevika/FrontendMentor_Product-page_by-Catevika](https://github.com/Catevika/FrontendMentor_Product-page_by-Catevika)
- Live Site URL: [https://frontendmentor-product-page-catevika.netlify.app/](https://frontendmentor-product-page-catevika.netlify.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Desktop-first workflow
- [Vite](https://vitejs.dev/) - Vite + React plugin
- [React-routeur-dom V6](https://reactrouter.com/en/main) - Client side routing for React
- [React-responsive](https://www.npmjs.com/package/react-responsive) package
### What I learned
- React-router-dom
- React Context: state management
- Session storage for persistent states during session only: see cart
- synchronization of the product quantities in the cart and in the product page
## Author
- English porfolio - [Catevika Portfolio EN](catevika.github.io/Catevika_Portfolio-EN/)
- French Portfolio - [Catevika Portfolio FR](catevika.github.io/Catevika_Portfolio-FR/)
- Frontend Mentor - [@Catevika](https://www.frontendmentor.io/profile/Catevika)
- Twitter - [@dominique_bello](https://twitter.com/dominique_bello)