🛒 Shopping List App

A clean, mobile-first Shopping List built with React. Designed to be easily wrapped as a native iPhone app using Capacitor.

---

📁 Project Structure

shopping-list/
├── public/
│   └── index.html              # HTML entry point (meta viewport, fonts)
├── src/
│   ├── components/
│   │   ├── ShoppingItem.js     # Single list item (checkbox, label, delete)
│   │   └── ShoppingItem.module.css
│   ├── App.js                  # Root component (state, logic)
│   ├── App.module.css          # App-level styles
│   ├── index.js                # React entry point
│   └── index.css               # CSS variables, reset
├── capacitor.config.json       # Capacitor configuration
├── package.json
└── README.md

---

🚀 Running the App Locally

Prerequisites

• Node.js v16+ and npm installed
• Download Node.js

Steps

# 1. Navigate to the project folder
cd shopping-list

# 2. Install dependencies
npm install

# 3. Start the development server
npm start

The app will open at http://localhost:3000 in your browser.

---

📱 Packaging as an iPhone App with Capacitor

Capacitor wraps your React web app in a native iOS shell. You'll need a Mac with Xcode installed.

Prerequisites

Tool	Install
Node.js v16+	https://nodejs.org
Xcode 14+	Mac App Store
Xcode Command Line Tools	xcode-select --install
CocoaPods	sudo gem install cocoapods

---

Step 1 — Build the React App

npm run build

This creates an optimized build/ folder. Capacitor uses this as the web content.

---

Step 2 — Install Capacitor

npm install @capacitor/core @capacitor/cli
npm install @capacitor/ios

---

Step 3 — Initialize Capacitor (first time only)

npx cap init

When prompted:

• App name: Shopping List
• App ID: com.yourname.shoppinglist ← use your own reverse-domain ID
• Web asset dir: build

Or simply leave capacitor.config.json as-is (it's already configured in this project).

---

Step 4 — Add the iOS Platform

npx cap add ios

This creates an ios/ folder with a native Xcode project inside.

---

Step 5 — Sync Web Assets to iOS

After any change to your React app, run:

npm run build
npx cap sync ios

cap sync copies your build/ output into the Xcode project and updates native dependencies.

---

Step 6 — Open in Xcode

npx cap open ios

This opens the project in Xcode.

---

Step 7 — Run on iPhone Simulator

In Xcode:

1. Select a simulator from the top device dropdown (e.g. iPhone 15 Pro)
2. Click the ▶ Run button (or press Cmd + R)
3. The app will build and launch in the iOS Simulator

---

Step 8 — Run on a Real iPhone (optional)

1. Connect your iPhone via USB
2. In Xcode → Signing & Capabilities → select your Apple Developer account
3. Select your iPhone from the device list
4. Click ▶ Run

You need a free or paid Apple Developer account to run on a real device.

---

🔄 Updating the App

Whenever you make changes to the React code:

npm run build         # Rebuild the web app
npx cap sync ios      # Push changes into the native project
npx cap open ios      # Re-open Xcode (if not already open)

Then run again from Xcode.

---

✨ Features

• ✅ Add items with input + button (or press Enter)
• ✅ Check/uncheck items (strikethrough when done)
• ✅ Delete individual items
• ✅ Clear all completed items at once
• ✅ Data persists via localStorage (survives refresh/reopen)
• ✅ Touch-friendly UI (large tap targets, safe-area aware)
• ✅ Smooth animations on item add

---

🎨 Design Notes

• Dark theme with CSS custom properties — easy to retheme
• Safe area insets respected for iPhone notch / Dynamic Island
• No external UI frameworks — pure CSS Modules
• Fonts: Syne (display) + DM Sans (body)

---

🛠 Useful Capacitor Commands

Command	What it does
npx cap add ios	Add iOS platform (once)
npx cap sync	Sync web build + update plugins
npx cap copy ios	Copy web assets only (faster, no plugin update)
npx cap open ios	Open project in Xcode
npx cap run ios	Run on simulator (without opening Xcode)

---

📦 Adding Capacitor Plugins (optional)

Capacitor plugins give you access to native device features:

# Example: Haptic feedback
npm install @capacitor/haptics
npx cap sync

# Example: Status bar control
npm install @capacitor/status-bar
npx cap sync

---

🧹 .gitignore

Make sure your .gitignore includes:

node_modules/
build/
ios/
android/