A fully functional and beautifully designed React Pizza Cart Application built with Context API, Tailwind CSS, and live toast notifications. Includes cart persistence via localStorage and dynamic product fetching from API.
🔗 Live Demo • Source Code
- ✅ Dynamic Pizza Recipes from
https://dummyjson.com/recipes - ✅ Add to Cart with quantity counter
- ✅ LocalStorage persistence for cart
- ✅ Toast notifications on Add / Order
- ✅ Product Detail View via React Router
- ✅ Quantity Increment / Decrement
- ✅ Remove individual items from cart
- ✅ Grand Total calculation
- ✅ "Order Now" functionality (clears cart)
- ✅ Fully responsive (TailwindCSS)
| Frontend | Styling | State Management | Routing | Data Source |
|---|---|---|---|---|
| React.js | Tailwind CSS | Context API | React Router | DummyJSON API |
vimal-food-pizza/
├── public/
│ ├── images/
│ │ └── screenshot.png # App preview image
│ └── index.html
├── src/
│ ├── components/
│ │ ├── Toast/
│ │ │ ├── Toast.css
│ │ │ └── Toast.js
│ │ ├── Navigation.js
│ │ ├── Product.js
│ │ └── Products.js
│ ├── pages/
│ │ ├── Cart.js
│ │ ├── Home.js
│ │ ├── ProductsPage.js
│ │ └── SingleProduct.js
│ ├── CartContext.js
│ ├── App.js
│ ├── App.css
│ └── index.js
├── package.json
└── README.md
git clone https://github.com/Munchunnce/vimal-food-pizza.git
cd vimal-food-pizza
npm install
npm startVisit: http://localhost:3000
Vimal Kumar Chaudhary
I love building beautiful and scalable front-end projects with React.js.
If you liked the project, leave a ⭐ Have suggestions or questions? Feel free to connect on LinkedIn
This project is licensed under the MIT License.
---
### 🛠 To Use Screenshot:
1. Rename your image to `screenshot.png`
2. Move it inside your project at this location:
public/images/screenshot.png
3. Git commit and push it:
```bash
git add .
git commit -m "Added project screenshot"
git push origin main
GitHub automatically renders  from the Markdown.