{"id":15099623,"url":"https://github.com/lysabrina/shopping-cart","last_synced_at":"2026-02-06T10:02:34.196Z","repository":{"id":242426940,"uuid":"809493983","full_name":"LySabrina/Shopping-Cart","owner":"LySabrina","description":"Combines the E-commerce and shopping-cart project from FrontendMentor and Odin Project.","archived":false,"fork":false,"pushed_at":"2025-03-04T21:27:24.000Z","size":1141,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-11T07:23:34.460Z","etag":null,"topics":["context-api","css-modules","react","sass","spring-boot","spring-security","vite"],"latest_commit_sha":null,"homepage":"","language":"Java","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/LySabrina.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,"zenodo":null}},"created_at":"2024-06-02T20:58:27.000Z","updated_at":"2025-03-04T21:27:27.000Z","dependencies_parsed_at":"2025-01-01T02:25:36.214Z","dependency_job_id":"0dfae17a-1801-4019-a60e-2431f9688451","html_url":"https://github.com/LySabrina/Shopping-Cart","commit_stats":{"total_commits":28,"total_committers":1,"mean_commits":28.0,"dds":0.0,"last_synced_commit":"594b34dd14bcafdb40231e56a3f0654c0350f5e5"},"previous_names":["lysabrina/shopping-cart"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LySabrina/Shopping-Cart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LySabrina%2FShopping-Cart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LySabrina%2FShopping-Cart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LySabrina%2FShopping-Cart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LySabrina%2FShopping-Cart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LySabrina","download_url":"https://codeload.github.com/LySabrina/Shopping-Cart/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LySabrina%2FShopping-Cart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29157471,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T07:18:23.844Z","status":"ssl_error","status_checked_at":"2026-02-06T07:13:32.659Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["context-api","css-modules","react","sass","spring-boot","spring-security","vite"],"created_at":"2024-09-25T17:24:43.076Z","updated_at":"2026-02-06T10:02:34.181Z","avatar_url":"https://github.com/LySabrina.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Purpose\n\nProject in practicing CSS styling \u0026 React fundamentals\n\n# Demo Video \u0026 Images\n\n---- WORK IN PROGRES ---\n\n# Description\n\n## What does this application do?\n\nIt is a mock website of a typical e-commerce shopping store. This project uses a free API to fetch product data. Users can do the following:\n\n- Browse the catalogue from different categories\n- Add/remove/update product items inside their cart\n\n## Technologies Used\n\nThe main tools are React and Sass.\nIn this project, I structure my project based on \"Directory per Component\" to make my project clean (for more information: https://survivejs.com/books/react/advanced-techniques/structuring-react-projects/\n)\n\nAdditionally, I used CSS Modules.\n\n## Challenges Faced\n\n1. Prop Drilling\n\nPROBLEM - CartItems have features such as adding, deleting, and updating. Components that signal these actions are deeply nested \u0026 are not parent/child. This leads to issue of prop-drilling.\n\nSOLUTION - useContext has helped me since I do not have to prop drill and the components that need that state can do so easily with this hook.\n\n2. findIndex()\n\nPROBLEM - Initial bug was that cartItems was adding the same item into the array.\n\nSOLUTION - Change the following from: cartItems.findIndex((elem) =\u003e elem.id == id) \u003e 0 to cartItems.findIndex((elem) =\u003e elem.id == id) \u003e= 0\n\nIf we are updating our item that is in the first-index, it will give the index 0. I should have used \u003e= to ensure that the first index is included.\n\n# TODO:\n\n### Cart \u0026 CartItem\n\n- ~~Implement counter for number of products to add to cart~~\n- CSS Styling \u0026 Some animations\n  -- Fix dedicated spacing for elements inside CartItem.jsx\n\n### Checkout Page\n\n- Fix up styling on page\n- Implement PayPal \u0026 GPay icons into buttons\n\n### Product Page\n\n- Add animation that increments number in cart when clicking \"Add to cart\"\n\n### Home Page\n\n- Add a brief home page\n\n### Catalogue Page\n\n- Add loading screen or spinning circles as API data is being loaded in\n\n# Credits\n\nThanks to FakeStoreAPI for the free API to use: https://fakestoreapi.com/\n\nThanks to FrontendMentor for the free Figma Design: https://www.frontendmentor.io/challenges/ecommerce-product-page-UPsZ9MJp6\n\nThanks to OdinProject for their learning path: https://www.theodinproject.com/paths/full-stack-javascript/courses/react\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flysabrina%2Fshopping-cart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flysabrina%2Fshopping-cart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flysabrina%2Fshopping-cart/lists"}