{"id":29488072,"url":"https://github.com/risudev/addtocart","last_synced_at":"2026-05-07T01:33:01.229Z","repository":{"id":304298083,"uuid":"1018361486","full_name":"risudev/AddToCart","owner":"risudev","description":"React App Add To Cart","archived":false,"fork":false,"pushed_at":"2025-07-12T06:27:52.000Z","size":43,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-12T08:27:47.105Z","etag":null,"topics":["html5","reactjs","tailwindcss"],"latest_commit_sha":null,"homepage":"https://magenta-seahorse-e6b65c.netlify.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/risudev.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":"2025-07-12T05:22:05.000Z","updated_at":"2025-07-12T06:27:55.000Z","dependencies_parsed_at":"2025-07-12T08:27:49.509Z","dependency_job_id":"3a3819a2-11dc-4229-836f-8cb32f4e2ca1","html_url":"https://github.com/risudev/AddToCart","commit_stats":null,"previous_names":["risudev/addtocart"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/risudev/AddToCart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/risudev%2FAddToCart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/risudev%2FAddToCart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/risudev%2FAddToCart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/risudev%2FAddToCart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/risudev","download_url":"https://codeload.github.com/risudev/AddToCart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/risudev%2FAddToCart/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265425000,"owners_count":23762890,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["html5","reactjs","tailwindcss"],"created_at":"2025-07-15T09:21:39.731Z","updated_at":"2026-05-07T01:33:01.201Z","avatar_url":"https://github.com/risudev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🛒 React Add to Cart Modal App\n\nThis is a simple e-commerce-style ReactJS application that fetches products from the [Fake Store API](https://fakestoreapi.com/) and allows users to add items to a cart using a modal interface. The project demonstrates the use of React components, props, state management, conditional rendering, and Tailwind CSS for responsive design.\n\n## 🚀 Live Demo\n\nDeployed on Netlify: [View Live App](https://magenta-seahorse-e6b65c.netlify.app/)\n\n---\n\n## 📸 Screenshots\n\u003cimg width=\"600\" height=\"500\" alt=\"1\" src=\"https://github.com/user-attachments/assets/bb96f76a-b671-4c2f-b16e-f60e44550a3e\" /\u003e\n\n\u003cimg width=\"500\" height=\"500\" alt=\"2\" src=\"https://github.com/user-attachments/assets/809c21c8-185e-49fd-a5a6-fd430c53eea3\" /\u003e\n\n\u003cimg width=\"500\" height=\"500\" alt=\"3\" src=\"https://github.com/user-attachments/assets/f836ad7d-7a39-4d91-aa87-84fb50fbea3f\" /\u003e\n\n\u003cimg width=\"500\" height=\"500\" alt=\"4\" src=\"https://github.com/user-attachments/assets/9de72029-5491-4b65-8552-23764dc3aab6\" /\u003e\n\n### 🏠 Home Page\n- Displays all products fetched from the API.\n- \"Add to Cart\" buttons on each product.\n\n### 🛍️ Cart Modal\n- Opens on clicking the \"Cart\" button in the navbar.\n- Lists all products added to the cart with \"Remove\" buttons.\n\n---\n\n## 🛠 Tech Stack\n\n- **ReactJS** – Frontend framework\n- **Tailwind CSS** – Utility-first CSS framework for styling\n- **JavaScript (ES6+)** – Application logic\n- **HTML5** – Markup\n- **Fake Store API** – Source for fake product data\n\n---\n\n## 📦 Features\n\n- ✅ Fetch products from Fake Store API\n- ✅ Display product details (image, title, price)\n- ✅ Add to cart functionality\n- ✅ Show alert if the item is already in the cart\n- ✅ Cart count displayed in Navbar\n- ✅ Responsive Modal to show cart contents\n- ✅ Remove item from cart inside modal\n- ✅ Responsive layout for mobile and desktop\n- ✅ State and props management using React\n\n## 📞 Contact\nIf you have any questions, feel free to reach out:\n\nEmail: risudeveloper@gmail.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frisudev%2Faddtocart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frisudev%2Faddtocart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frisudev%2Faddtocart/lists"}