{"id":34238612,"url":"https://github.com/thehelpfultipper/frontendmentor_ecommerce_page","last_synced_at":"2026-04-29T23:33:01.396Z","repository":{"id":241039052,"uuid":"803344793","full_name":"thehelpfultipper/frontendmentor_ecommerce_page","owner":"thehelpfultipper","description":"Solution walkthrough for Frontend Mentor's E-commerce product page.","archived":false,"fork":false,"pushed_at":"2024-07-09T03:54:15.000Z","size":842,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-19T09:31:04.921Z","etag":null,"topics":["frontend-mentor","frontendmentor-challenge","reactjs","vite"],"latest_commit_sha":null,"homepage":"https://thehelpfultipper.com/frontendmentor_ecommerce_page/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thehelpfultipper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-20T14:45:07.000Z","updated_at":"2024-07-09T03:58:36.000Z","dependencies_parsed_at":"2024-07-09T06:45:42.604Z","dependency_job_id":"4539f691-6cb1-4b40-8bf6-34ba4b6fbac8","html_url":"https://github.com/thehelpfultipper/frontendmentor_ecommerce_page","commit_stats":null,"previous_names":["thehelpfultipper/frontendmentor_ecommerce_page"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thehelpfultipper/frontendmentor_ecommerce_page","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thehelpfultipper%2Ffrontendmentor_ecommerce_page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thehelpfultipper%2Ffrontendmentor_ecommerce_page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thehelpfultipper%2Ffrontendmentor_ecommerce_page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thehelpfultipper%2Ffrontendmentor_ecommerce_page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thehelpfultipper","download_url":"https://codeload.github.com/thehelpfultipper/frontendmentor_ecommerce_page/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thehelpfultipper%2Ffrontendmentor_ecommerce_page/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32448399,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T22:27:22.272Z","status":"ssl_error","status_checked_at":"2026-04-29T22:10:49.234Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend-mentor","frontendmentor-challenge","reactjs","vite"],"created_at":"2025-12-16T03:06:11.671Z","updated_at":"2026-04-29T23:33:01.391Z","avatar_url":"https://github.com/thehelpfultipper.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - E-commerce product page solution\n\nThis 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.\n\u003cbr /\u003e\u003cbr /\u003e\n[Demo link](https://thehelpfultipper.com/frontendmentor_ecommerce_page/).\n\u003cbr /\u003e\u003cbr /\u003e\n\n## Objective\nThis 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.\n### The challenge\n\nUsers should be able to:\n\n- View the optimal layout for the site depending on the device screen size\n- See hover states for all interactive elements on the page\n- Open a lightbox gallery by clicking on the large product image\n- Switch the large product image by clicking on the small thumbnail images\n- Add items to the cart\n- View the cart and remove items from it\n\n**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/)\n\n![Desktop preview](/public/static/desktop-preview.jpg)\n\n## Features\n- **Lightbox Gallery**: Open a lightbox by clicking on the large product image.\n- **Thumbnail Navigation**: Switch the large product image by clicking on the small thumbnail images.\n- **Add to Cart**: Add items to the cart and view the cart details.\n- **Responsive Design**: View optimal layouts for different screen sizes.\n- **Interactive Elements**: See hover states for all interactive elements.\n\n## Technologies Used\n- Vite\n- React\n- CSS Modules\n- React Context\n- Custom Hooks\n\n## Credits\n[Frontend Mentor](https://www.frontendmentor.io/): Project idea and specifications.\n\n## License\nThis project is licensed under the MIT License. Feel free to use the code for personal or commercial projects.\n\nFor detailed tutorials, visit the [blog](https://thehelpfultipper.com/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthehelpfultipper%2Ffrontendmentor_ecommerce_page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthehelpfultipper%2Ffrontendmentor_ecommerce_page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthehelpfultipper%2Ffrontendmentor_ecommerce_page/lists"}