Skip to content

README.md

Latest commit

 

History

History
302 lines (226 loc) · 6.74 KB

README.md

File metadata and controls

302 lines (226 loc) · 6.74 KB

☕ Coffee Store

A modern, responsive coffee shop e-commerce application built with React, featuring a shopping cart system with real-time updates and smooth user experience.

🌟 Features

  • Product Catalog: Browse a curated selection of coffee drinks
  • Shopping Cart: Add, remove, and adjust quantities of items
  • Real-time Updates: Cart count updates instantly in the navbar
  • Persistent State: Cart state managed with React Context API
  • Responsive Design: Mobile-first design with Tailwind CSS
  • Routing: Multi-page navigation with React Router
  • Clean UI: Coffee-themed color palette with smooth interactions

🛠️ Tech Stack

  • React 18 - UI library with hooks
  • React Router - Client-side routing
  • Context API - Global state management
  • Tailwind CSS - Utility-first styling
  • Vite - Fast build tool and dev server

📋 Prerequisites

  • Node.js 16+
  • npm or yarn

🚀 Quick Start

1. Install Dependencies

npm install

2. Run Development Server

npm run dev

The app will be available at http://localhost:5173

3. Build for Production

npm run build

4. Preview Production Build

npm run preview

📁 Project Structure

src/
├── components/           # Reusable UI components
│   ├── Navbar.jsx       # Navigation with cart count
│   ├── CoffeeList.jsx   # Coffee product grid
│   ├── CoffeeCard.jsx   # Individual coffee item card
│   └── Cart.jsx         # Cart display and management
├── context/             # Global state management
│   └── CartContext.jsx  # Cart state and operations
├── pages/               # Page components
│   ├── Home.jsx         # Main store page
│   └── CartPage.jsx     # Cart checkout page
├── assets/              # Static assets
│   └── react.svg        # React logo
├── App.jsx              # Main app component with routing
├── main.jsx             # App entry point
└── index.css            # Global styles (Tailwind import)

🎨 Color Palette

The app uses a coffee-inspired color scheme:

  • Primary Brown: #3e2723 (Navbar background)
  • Coffee Brown: #6f4e37 (Buttons, accents)
  • Background: #f5f5f5 (Light gray)
  • White: #ffffff (Cards, text)

🧩 Key Components

CartContext

Global state management for the shopping cart:

const { cart, addToCart, incrementItem, decrementItem, clearCart } = useCart();

Available functions:

  • addToCart(coffee) - Add item to cart or increment if exists
  • incrementItem(id) - Increase quantity by 1
  • decrementItem(id) - Decrease quantity by 1 (removes if 0)
  • clearCart() - Empty entire cart

CoffeeCard

Individual product card with:

  • Coffee name and description
  • Price display
  • "Add to Cart" button
  • Hover effects

Navbar

Top navigation featuring:

  • Store branding
  • Cart link with live item count
  • Clear cart button (disabled when empty)
  • Responsive layout

Cart

Shopping cart display with:

  • Empty state message
  • Item list with quantities
  • Increment/decrement controls
  • Price calculations

🛒 Current Products

Coffee Description Price
Espresso Strong and bold coffee Rs. 149
Cappuccino Rich and foamy coffee Rs. 199
Latte Smooth and creamy coffee Rs. 179

🔄 Cart Functionality

Adding Items

  1. Click "Add to Cart" on any coffee card
  2. Item appears in cart with quantity 1
  3. Subsequent clicks increment quantity

Adjusting Quantities

  • Use + button to increase quantity
  • Use - button to decrease quantity
  • Item automatically removes when quantity reaches 0

Clearing Cart

  • Click "Clear Cart" in navbar to empty entire cart
  • Button is disabled when cart is empty

🎯 User Flow

Home Page (/) 
    ↓
Browse Coffee Selection
    ↓
Add Items to Cart
    ↓
View Cart Count in Navbar
    ↓
Navigate to Cart Page (/cart)
    ↓
Adjust Quantities
    ↓
Clear Cart (optional)

🔧 Customization

Adding New Products

Edit src/components/CoffeeList.jsx:

const coffees = [
  // ... existing coffees
  {
    id: 4,
    name: "Americano",
    description: "Bold and smooth coffee",
    price: 129,
  },
];

Changing Colors

Update Tailwind classes in components:

// Example: Change button color
className="bg-[#6f4e37]" // Replace with your color

Adding Features

Common enhancements:

  • Product images
  • Search/filter functionality
  • Checkout process
  • Order history
  • User authentication
  • Price totals and tax calculations

📱 Responsive Design

The app is fully responsive with breakpoints:

  • Mobile: Single column layout
  • Tablet: 2 columns (md: breakpoint)
  • Desktop: 3 columns grid

🐛 Known Issues

  • Cart data is not persisted (resets on page refresh)
  • No backend integration
  • No payment processing
  • Limited to 3 products

🚀 Future Enhancements

  • LocalStorage persistence
  • Product images
  • Checkout flow
  • Order summary with totals
  • Product details modal
  • User reviews and ratings
  • Wishlist functionality
  • Backend API integration
  • Payment gateway
  • Order tracking

📝 Usage Example

Using the Cart Context

import { useCart } from './context/CartContext';

function MyComponent() {
  const { cart, addToCart } = useCart();

  const handleAdd = () => {
    addToCart({
      id: 1,
      name: "Espresso",
      description: "Strong coffee",
      price: 149
    });
  };

  return (
    <div>
      <p>Cart items: {cart.length}</p>
      <button onClick={handleAdd}>Add Coffee</button>
    </div>
  );
}

🔒 Error Handling

The app includes basic error boundaries:

  • Context usage validation (must be inside provider)
  • Empty cart state handling
  • Disabled buttons for invalid states

🎓 Learning Resources

This project demonstrates:

  • React Hooks (useState, useContext, useReducer pattern)
  • Context API for state management
  • React Router for navigation
  • Tailwind CSS utility classes
  • Component composition
  • Conditional rendering
  • Event handling

🤝 Contributing

Contributions welcome! To contribute:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/AmazingFeature)
  3. Commit changes (git commit -m 'Add some AmazingFeature')
  4. Push to branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

  • Built with React and Vite
  • Styled with Tailwind CSS
  • Icons and design inspired by modern e-commerce UIs

Happy Coding! ☕

For questions or suggestions, please open an issue or submit a pull request.