https://github.com/risudev/addtocart
React App Add To Cart
https://github.com/risudev/addtocart
html5 reactjs tailwindcss
Last synced: about 1 month ago
JSON representation
React App Add To Cart
- Host: GitHub
- URL: https://github.com/risudev/addtocart
- Owner: risudev
- Created: 2025-07-12T05:22:05.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-12T06:27:52.000Z (11 months ago)
- Last Synced: 2025-07-12T08:27:47.105Z (11 months ago)
- Topics: html5, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://magenta-seahorse-e6b65c.netlify.app/
- Size: 42 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🛒 React Add to Cart Modal App
This 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.
## 🚀 Live Demo
Deployed on Netlify: [View Live App](https://magenta-seahorse-e6b65c.netlify.app/)
---
## 📸 Screenshots
### 🏠 Home Page
- Displays all products fetched from the API.
- "Add to Cart" buttons on each product.
### 🛍️ Cart Modal
- Opens on clicking the "Cart" button in the navbar.
- Lists all products added to the cart with "Remove" buttons.
---
## 🛠 Tech Stack
- **ReactJS** – Frontend framework
- **Tailwind CSS** – Utility-first CSS framework for styling
- **JavaScript (ES6+)** – Application logic
- **HTML5** – Markup
- **Fake Store API** – Source for fake product data
---
## 📦 Features
- ✅ Fetch products from Fake Store API
- ✅ Display product details (image, title, price)
- ✅ Add to cart functionality
- ✅ Show alert if the item is already in the cart
- ✅ Cart count displayed in Navbar
- ✅ Responsive Modal to show cart contents
- ✅ Remove item from cart inside modal
- ✅ Responsive layout for mobile and desktop
- ✅ State and props management using React
## 📞 Contact
If you have any questions, feel free to reach out:
Email: risudeveloper@gmail.com