Grocery List App

📖 About This Project

This is a simple but educational React application that demonstrates fundamental concepts in modern web development. The app features interactive grocery item buttons that, when clicked, show an alert confirming the item has been added to the cart.

🏗️ Project Structure

grocery/
├── src/
│   ├── main.jsx          # Entry point - renders the app
│   ├── App.jsx           # Main App component
│   ├── GroceryItem.jsx   # Grocery item component
│   └── index.css         # Global styles
├── index.html            # HTML template
├── package.json          # Dependencies and scripts
├── vite.config.js        # Vite configuration
└── dist/                 # Production build
        

💻 Code Explanation

GroceryItem Component (GroceryItem.jsx)

function GroceryItem(props) {
  function clickHandler() {
    alert(props.name + " has been added to the cart");
  }
  
  return (
    <button onClick={clickHandler}>
      {props.name}
    </button>
  );
}
        

A reusable component that renders a button for each grocery item. When clicked, it shows an alert with the item name.

App Component (App.jsx)

function App() {
  return (
    <div>
      <h1>🛒 Grocery List</h1>
      <div className="grocery-grid">
        <GroceryItem name="Eggs" />
        <GroceryItem name="Banana" />
        <GroceryItem name="Strawberry" />
        <GroceryItem name="Bread" />
      </div>
    </div>
  );
}
        

The root component that renders the title and multiple GroceryItem components in a responsive grid layout.

🛠️ Tech Stack

React 19.1.1

Vite 7.1.2

JSX

ES6 Modules

CSS3

Cloudflare Pages

🎓 Key Learning Points

Component Architecture: Breaking UI into reusable components
Props: Passing data between components
Event Handling: Managing user interactions
JSX: Writing HTML-like syntax in JavaScript
Modern Build Tools: Using Vite for fast development
Styling: CSS-in-JS and responsive design
Deployment: Publishing to Cloudflare Pages

🚀 Deployment to Cloudflare Pages

This project is deployed using Cloudflare Pages, a fast and reliable hosting platform for static sites.

Deployment Steps:

Build the project: npm run build
Install Wrangler CLI: npm install -g wrangler
Deploy to Cloudflare Pages: wrangler pages deploy dist --project-name grocery-app
Your site is live automatically!

Build Configuration

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})
        

🔧 Development Commands

npm run dev - Start development server
npm run build - Build for production
npm run preview - Preview production build

📚 Next Steps

Add a shopping cart with state management
Implement item quantity controls
Add local storage to persist cart data
Create more complex component hierarchies
Add routing for multiple pages
Integrate with a backend API
Add animations and transitions

🌎 View Live Demo

🛒 Grocery List App

🎯 Try the App