Inspiration

ChopChop began as a small idea: making meal planning and grocery shopping less of a chore and more of an act of calm efficiency. We’ve all been there, standing in front of the fridge, opening and closing it multiple times, hoping something new magically appears when, really, all the ingredients we need are already there. ChopChop helps uncover those hidden items and turns them into inspiration.

The rise of conversational assistants and the accessibility of vector-enabled databases (like Supabase) inspired the architecture. The goal: combine a chat-first interface with a smart pantry and grocery workflow. Here, users can chat naturally, track what they already have, get recipe ideas, and generate grocery lists that minimize waste.

What it does

ChopChop helps users turn pantry inventory and simple prompts into meal suggestions, grocery lists, and quick cooking guidance.

Core Features

💬 Chat-first frontend built with Next.js + React — users ask for recipes, track their pantry, and manage grocery lists through conversation. 🧠 Backend Python microservices for AI-powered chat, multimodal inputs (like fridge photos), and Supabase integration (nova_chat.py, nova_multimodal.py, nova_backend.py). 🗃️ Supabase handles user data, embeddings, and image storage. 🌐 Next.js API routes proxy chat requests, upload fridge images, save user data, and send emails. 🧪 Testing scripts validate Supabase connectivity and image handling (test_supabase.py, test_image.py, test.py).

User Flow

  • The user authenticates (via Supabase Auth).
  • Four tabs are present for the user to select. Chat, Pantry, Grocery List, and Recipes. Chat to upload an image of the fridge. Pantry to see all the items you have. Grocery Lists with links to buy extra items for recipes. Finally Recipes tab to see Recipes you can make with the ingredients you have. You can select how easy or hard you want the recipes and how much time you have for them.
  • The backend processes the mage, queries stored recipes and pantry data, and returns suggestions or a grocery list.
  • Chat history and pantry updates are saved and retrievable later.

How we built it

Stack & Architecture

Frontend: Next.js 13+ (App Router) with TypeScript. Components live under components/ and src/app/. API routes forward requests to the backend or Supabase. Backend: Python microservices (nova_backend.py, nova_chat.py, nova_multimodal.py) for chat orchestration, image processing, and Supabase tasks. Database: Supabase for authentication, storage, and vector embeddings. Schema defined in supabase_schema.sql. Testing: Lightweight scripts for integration testing and validation.

Implementation Highlights

Conversational logic: The chat service enriches user messages with pantry context and vector search results before generating responses. Streaming is used for a responsive chat experience. Pantry & grocery data model: Pantry items, recipes, and lists are stored as structured Supabase tables, with embeddings for semantic search. Multimodal: Fridge image uploads are pre-processed and stored in Supabase, linking visual inputs to pantry updates. Auth: Secure authentication via Supabase helpers, ensuring keys and secrets stay server-side.

Challenges we ran into

Image recognition: Lighting and packaging make fridge photos tricky to interpret. We solved this with user confirmation steps and lightweight preprocessing. Smooth streaming: Achieving real-time chat responses required careful tuning of response chunking and frontend updates. Auth boundaries: Keeping user data safe while maintaining a seamless experience meant designing secure API proxies.

Accomplishments that we're proud of

Full-stack prototype: A complete flow from chat to backend to persistent storage. Modular backend design: Independent services for chat, multimodal, and core backend logic. Integration testing: Scripts like test_supabase.py ensured reliable Supabase connectivity early on. User experience: A chat-first interface that feels natural and reduces friction. Building something we would actually use, even after this Hackathon!

What we learned

Small, modular services are faster to build and easier to maintain. Users love conversational interfaces when they feel useful, not gimmicky. Image features are best when they assist the user, not override them. The Next.js App Router makes blending client interactivity with server security straightforward.

What's next for ChopChop

Short-Term

🖼️ Smarter image parsing: Improve fridge photo handling with better object-detection or OCR pipelines. 🔄 Offline-first pantry sync: Let users update items offline and sync when connected. ✨ UX polish: Add onboarding, clearer feedback, and a guided “scan your fridge” flow.

Long-Term

🧭 Vector embeddings & retrieval: Add recipe and ingredient embeddings to enable similarity-based search — so ChopChop can suggest meals not just by exact matches, but by related flavors or complementary ingredients. This will allow smarter recommendations (“You’re out of rice, but quinoa works too”). 🛒 Grocery optimization: Minimize cost and waste using optimization techniques (like list consolidation or set cover approximations). 🗓️ Meal planning: Generate weekly meal plans and consolidated grocery lists that fit dietary preferences. 👥 Community sharing: Let users share favorite recipes, pantry templates, and weekly plans.

Built With

Share this project:

Updates