React Greengrocers 🥬

A simple and interactive grocery shopping cart built with React during my studies at Boolean UK. This project demonstrates fundamental React concepts, including state management, component composition, and handling user interactions.

Features

• Browse a selection of fruits and vegetables
• Add and remove items from the cart
• Automatic price calculation
• Responsive design for mobile devices
• Real-time quantity updates

Tech Stack

• React
• Vite
• CSS
• SVG Icons

Running Locally

Make sure you have Node.js and npm installed.

# Clone the repository using Git
git clone https://github.com/AtikoSpeed/react-greengrocers.git

# Or clone using GitHub CLI
gh repo clone AtikoSpeed/react-greengrocers

# Navigate to the project directory
cd react-greengrocers

# Install dependencies
npm ci

# Start the development server
npm run dev

Project Structure

src/
  ├── components/
  │   ├── AllItems.jsx
  │   ├── CartItems.jsx
  ├── styles/
  │   ├── index.css
  │   └── reset.css
  ├── App.jsx
  └── main.jsx

Learning Outcomes

• React state management
• Component-based architecture
• Props and data flow
• Event handling
• Responsive CSS design

Credits

Icons made by Icongeek26 from www.flaticon.com