{"id":19301189,"url":"https://github.com/siddhesh-coder/interactive-product-catalog","last_synced_at":"2026-06-17T19:32:18.973Z","repository":{"id":222534332,"uuid":"757110702","full_name":"siddhesh-coder/Interactive-Product-Catalog","owner":"siddhesh-coder","description":"This project is a web application consisting of various components to create an interactive product catalog. It allows users to browse through products, view product details, login/logout, handle errors, and manage their cart and more...","archived":false,"fork":false,"pushed_at":"2024-06-02T11:00:37.000Z","size":7602,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-24T01:38:53.435Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://interactive-product-catalog-orcin.vercel.app","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/siddhesh-coder.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-02-13T20:35:28.000Z","updated_at":"2024-06-02T11:00:41.000Z","dependencies_parsed_at":"2024-02-14T20:17:35.039Z","dependency_job_id":"28d69bdc-37f0-40ad-9221-6f932ba53c90","html_url":"https://github.com/siddhesh-coder/Interactive-Product-Catalog","commit_stats":null,"previous_names":["siddhesh-coder/interactive-product-catalog"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/siddhesh-coder/Interactive-Product-Catalog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siddhesh-coder%2FInteractive-Product-Catalog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siddhesh-coder%2FInteractive-Product-Catalog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siddhesh-coder%2FInteractive-Product-Catalog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siddhesh-coder%2FInteractive-Product-Catalog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/siddhesh-coder","download_url":"https://codeload.github.com/siddhesh-coder/Interactive-Product-Catalog/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siddhesh-coder%2FInteractive-Product-Catalog/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34463552,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-17T02:00:05.408Z","response_time":127,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-11-09T23:17:06.763Z","updated_at":"2026-06-17T19:32:18.959Z","avatar_url":"https://github.com/siddhesh-coder.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Interactive Product Catalog Overview [QuickMart]\n\n**Live Link:** https://interactive-product-catalog.netlify.app/\n\n**Description:**\n\nThis project is a web application consisting of various components to create an interactive product catalog. It allows users to browse through products, view product details, login/logout, handle errors, and manage their cart. The application integrates with Auth0 for authentication and Stripe for payment processing.\n\n**Components:**\n\n1. Hero Section Component: \n\nDisplays a visually appealing section at the top of the page, often used for showcasing featured products or promotional content.\n\n![Hero Section](/Project%20UI/Home.png)\n![alt text](/Project%20UI/Footer.png)\n\n2. Product Showcase Component: \n\nShows a collection of products in an organized manner, allowing users to browse through them easily. Each product usually includes an image, title, and brief description.\n\n![Alt text](/Project%20UI/mcollection.png)\n![alt text](/Project%20UI/wo.png)\n\n3. Single Product Component: \n\nDisplays detailed information about a single product, including its image, description, price, and options for customization if applicable.\n\n![Alt text](/Project%20UI/singleProduct.png)\n\n4. Categories Component:\n\nProvides a way for users to sort products by price [low, high], making it easier for them to find what they're looking for.\n\n![Alt text](/Project%20UI/category.png)\n\n5. Login / Logout Component: \n\nAllows users to authenticate themselves by logging in or out of their accounts. Firebase authentication is utilized for secure user authentication.\n\n![alt text](/Project%20UI/loginSignup.jpg)\n\n6. Error and Cart Empty Components: \n\nHandles various types of errors that may occur during the user's interaction with the application. Additionally, provides a visually pleasing message when the user's cart is empty.\n\n![alt text](/Project%20UI/cartclear.png)\n![alt text](/Project%20UI/noInternet.png)\n\n7. Payment Gateway:\n\nAllow Payments by stripe\n\n![alt text](/Project%20UI/payment.png)\n\n**Tech Stack**\n\n**Frontend:**\n\n1. **React.js:** A JavaScript library for building user interfaces.\n\n2. **CSS:** Used for styling the components and providing visual enhancements.\n\n3. **JavaScript:** The primary programming language for implementing dynamic behavior and interactivity.\n\n4. **React-toastify:** Style and customize toast messages in React apps so users receive appropriate feedback for their actions.\n\n**Backend:**\n\n1. **Express:** A web application framework for Node.js, used for building the server-side logic and APIs.\n\n**Authentication:**\n\n1. **Firebase:** A flexible authentication and authorization , used to handle user authentication securely.\n\n**Payment Gateway:**\n\n1. **Stripe:** A payment processing platform, integrated into the application to handle online payments securely.\n\n\n**Improvement**\n\n1. Enhance the styling and design of the components to create a more visually appealing interface.\n\n2. Implement responsive design to ensure the application is accessible and usable across different devices and screen sizes.\n\n# Project Flow\n\n```mermaid\ngraph TD;\n    Home--\u003eD[Shop By Category]--\u003eCategoryA;\n    D[Shop By Category]--\u003eCategoryB;\n    D[Shop By Category]--\u003e...etc;\n    Home--\u003eNavbar--\u003eHome;\n    Navbar--\u003e|product adding flow|A[Men category];\n    Navbar--\u003e B[Women category];\n    Navbar--\u003e C[Login/Logout];\n    Navbar--\u003e|If logged in|Cart;\n    Navbar--\u003e|If not logged in|Login;\n    Login--\u003eCart;\n    Cart--\u003e|add count/remove item|Products;\n    Cart--\u003e|clear Cart|Clear;\n    Cart--\u003eHome;\n    Cart--\u003eCheckout--\u003eE[stripe payment gateway]--\u003e|fulfilled|success;\n    E[stripe payment gateway]--\u003e|cancellation|cancel;\n    A[Men category]--\u003e|with sortby feature|G[product List]--\u003eH[Single Product info]--\u003eI[add to cart]--\u003eCart\n```\n\n**Note: Additional features to be implemented in the future**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiddhesh-coder%2Finteractive-product-catalog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiddhesh-coder%2Finteractive-product-catalog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiddhesh-coder%2Finteractive-product-catalog/lists"}