web-art

Grocery Feature

This project now includes:

• /grocery: searchable grocery list with fuzzy live search and cart
• /grocery/add-items: form to add item name, quantity, price, and image URL

Search updates as you type with lightweight fuzzy matching (exact, prefix, contains, and near-complete subsequence matching).

Storage Mode

The grocery feature supports two storage modes:

• Firebase Firestore (recommended)
• Local storage fallback (automatic when Firebase env vars are missing)

Firebase Setup (Free Tier)

1. Create a Firebase project on the Spark (free) plan.
2. Enable Firestore Database in production or test mode.
3. In Firebase project settings, copy your web app config values.
4. Add the values to .env (see .env.example).

Required env vars:

• REACT_APP_FIREBASE_API_KEY
• REACT_APP_FIREBASE_AUTH_DOMAIN
• REACT_APP_FIREBASE_PROJECT_ID
• REACT_APP_FIREBASE_STORAGE_BUCKET
• REACT_APP_FIREBASE_MESSAGING_SENDER_ID
• REACT_APP_FIREBASE_APP_ID

If these are not set, the app still works and saves items in browser local storage.

Firestore Rules (Simple Starter)

Use stricter rules for production, but this rule works for quick setup:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /groceryItems/{docId} {
      allow read, write: if request.auth != null
        && request.auth.token.email in [
          "k.lavarias.psa@gmail.com",
          "israeldarrel01@gmail.com"
        ];
    }
    match /userCarts/{userId} {
      allow read, write: if request.auth.uid == userId;
    }
    match /groceryUsageHourly/{document=**} {
      allow read, write: if request.auth != null;
    }
    match /budgetProfiles/{docId} {
      allow read, write: if request.auth != null
        && request.auth.token.email in [
          "k.lavarias.psa@gmail.com",
          "israeldarrel01@gmail.com"
        ];
    }
  }
}

Commands

• npm start - start dev server
• npm run build - create production build (configured to output to dist)
• npm test - run tests