CoolFace
Apppublic

pkAImkp/Grocerieslist

sourceHugging Facemitupdated 1y agoView on Hugging Face
0likes
App README

ListEase 🛒

A modern, AI-powered grocery list management app built with Next.js and Firebase. ListEase helps you organize your shopping with smart features like barcode scanning, AI-powered item recognition, and multi-shop categorization.

Features

🏪 Multi-Shop Organization

  • —Organize your grocery lists by different shops
  • —Categorize shops into: Market, Local, Bio, and Terroir
  • —Smart grouping displays items by shop category

📱 Smart Item Management

  • —Add items manually or through intelligent scanning
  • —Edit items inline with a clean, intuitive interface
  • —Mark items as purchased with a simple checkbox
  • —Upload images for visual item identification

🤖 AI-Powered Shopping

  • —AI Scan: Take a photo of any item and get intelligent name suggestions
  • —Barcode Scanner: Scan product barcodes for instant item addition
  • —Smart product catalog that learns from your shopping history

🔗 Barcode Linking System

  • —Link barcodes to products for future quick additions
  • —Override existing barcode links when needed
  • —Comprehensive product catalog with barcode management

💾 Real-time Sync

  • —Firebase backend ensures your lists sync across devices
  • —Automatic local storage fallback for offline usage
  • —Real-time updates across all your devices

Tech Stack

  • —Frontend: Next.js 15.3.3, React 18, TypeScript
  • —UI Components: Radix UI, Tailwind CSS, Lucide React
  • —AI Integration: Google Genkit for intelligent suggestions
  • —Scanning: ZXing library for barcode scanning
  • —Styling: TailwindCSS with custom color scheme
  • —Backend: Next.js API routes with Firebase integration

Quick Start

  1. 1.Clone the repository
bash
   git clone https://github.com/Mkp-dev-portefolio/ListEase.git
   cd ListEase
  1. 1.Install dependencies
bash
   npm install
  1. 1.Set up environment variables Create a .env.local file with your Firebase configuration:
env
   # Add your Firebase config here
   NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
   # ... other Firebase config
  1. 1.Start the development server
bash
   npm run dev
  1. 1.Visit the app Open http://localhost:3000 to start using ListEase

Available Scripts

  • —npm run dev - Start development server with Turbopack
  • —npm run build - Build the application for production
  • —npm start - Start production server
  • —npm run lint - Run ESLint
  • —npm run typecheck - Run TypeScript type checking
  • —npm run genkit:dev - Start Genkit AI development server
  • —npm run genkit:watch - Start Genkit with file watching

Usage Guide

Adding Items

  1. 1.Manual Entry: Type item name and select a shop
  2. 2.AI Scan: Use camera to identify items automatically
  3. 3.Barcode Scan: Scan product barcodes for instant recognition

Managing Shops

  • —Add new shops with categories (Market, Local, Bio, Terroir)
  • —Edit existing shop names and categories
  • —Delete shops (removes all associated items)

Product Catalog

  • —View all known products at /catalog
  • —Edit product names
  • —Link/relink barcodes to products
  • —See shopping history for each product

Smart Features

  • —Duplicate Detection: Prevents adding duplicate items
  • —Smart Suggestions: AI suggests item names from photos
  • —Barcode Learning: System learns your shopping patterns
  • —Cross-Device Sync: Lists sync automatically across devices

Project Structure

src/
├── ai/                 # AI integration and flows
├── app/                # Next.js app directory
│   ├── api/           # API routes for data management
│   ├── catalog/       # Product catalog page
│   └── globals.css    # Global styles
├── components/         # React components
│   ├── ui/            # Reusable UI components
│   ├── BarcodeScanner.tsx
│   └── GroceryList.tsx
├── data/              # JSON data files
├── hooks/             # Custom React hooks
└── lib/               # Utilities and type definitions

Design Philosophy

ListEase follows a clean, approachable design with:

  • —Primary Color: Moderate aquamarine (#74C69D) for freshness
  • —Background: Very light aquamarine (#E1F5EC) for calm backdrop
  • —Accent Color: Soft blue-green (#82D9C5) for interactive elements
  • —Typography: Clear, readable fonts with proper hierarchy
  • —Icons: Simple, outlined icons for intuitive navigation

Contributing

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

License

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

Acknowledgments

  • —Built with Firebase Studio
  • —UI components powered by Radix UI
  • —Icons from Lucide React
  • —AI capabilities through Google Genkit
  • —Barcode scanning via ZXing library

Made with ❤️ for smarter shopping experiences