Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pritamtirpude/e-commerce-product-page
E-commerce product landing page.
https://github.com/pritamtirpude/e-commerce-product-page
context-api custom-hooks framer-motion javascript reactjs semantic-html tailwindcss vitejs
Last synced: 16 days ago
JSON representation
E-commerce product landing page.
- Host: GitHub
- URL: https://github.com/pritamtirpude/e-commerce-product-page
- Owner: pritamtirpude
- Created: 2023-08-07T15:32:59.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-08-15T08:51:30.000Z (over 1 year ago)
- Last Synced: 2024-11-20T21:55:55.734Z (3 months ago)
- Topics: context-api, custom-hooks, framer-motion, javascript, reactjs, semantic-html, tailwindcss, vitejs
- Language: JavaScript
- Homepage: https://e-commerce-product-page-app.vercel.app/
- Size: 1.29 MB
- Stars: 1
- 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: [Frontend Mentor Solution URL](https://www.frontendmentor.io/solutions/product-landing-page-using-react-js-context-api-tailwind-css-4pssbWUEdj)
- Live Site URL: [Live URL](https://e-commerce-product-page-app.vercel.app/)
## My process
### Built with
- Semantic HTML5 markup
- Tailwind CSS
- Flexbox
- Mobile-first workflow
- [React](https://reactjs.org/) - JS library
- [Framer Motion](https://www.framer.com/) - Animation Library
### What I learned
Learned how to build a custom lightbox gallery using framer motion and Reusable components.
```LightBox Component JSX
const LightBox = ({ setIsClicked, isProduct }) => {
const [imgIndex, setImgIndex] = useState(isProduct);
const [direction, setDirection] = useState("");
const productImages = [
productOneImg,
productTwoImg,
productThreeImg,
productFourImg,
];
const thumbsArray = [
productOneThumb,
productTwoThumb,
productThreeThumb,
productFourThumb,
];
const handleNext = () => {
setImgIndex((prevState) =>
prevState + 1 === productImages.length ? 0 : prevState + 1
);
setDirection("right");
};
const handlePrevious = () => {
setImgIndex((prevState) =>
prevState - 1 < 0 ? productImages.length - 1 : prevState - 1
);
setDirection("left");
};
return (
setIsClicked((prevState) => !prevState)}
>
e.stopPropagation()}>
setIsClicked((prevState) => !prevState)}
>
e.stopPropagation()}
>
{thumbsArray.map((thumb, index) => (
setImgIndex(index)}
className={`${
imgIndex === index ? "ring-2 ring-primary-orange" : ""
} overflow-hidden shadow-lg rounded-xl relative z-50 cursor-pointer`}
>
))}
);
};
```
## Author
- Frontend Mentor - [@pritamtirpude](https://www.frontendmentor.io/profile/pritamtirpude)
- Twitter - [@ptirpude1991](https://twitter.com/ptirpude1991)