Fridgely.AI

AI-powered fridge scanner that detects your food, tracks expiration dates, and suggests recipes before anything goes to waste.

Comment

Inspiration

Americans waste over $1,800 worth of food per year because we simply forget what's in our fridges. We watched our own families throw away perfectly good food that expired before we remembered it existed. We knew there had to be a smarter way to track inventory and reduce waste. Fridgely.AI was born from the simple question: "What if your fridge could tell you what's about to expire and suggest recipes to use it?

What it does

Scans your fridge using your phone camera and automatically detects food items with expiration dates using computer vision Tracks inventory in real-time, showing you exactly what you have and when it expires Generates recipes using Google Gemini AI that prioritize ingredients expiring within 3 days Provides alerts for items about to go bad

How we built it

Frontend:

React + TypeScript for type-safe component development Vite for lightning-fast development and builds Tailwind CSS for responsive, mobile-first design Custom UI components with accessibility in mind

Backend:

FastAPI (Python) for high-performance API YOLOv8 for real-time object detection EasyOCR for extracting expiration dates from images Google Gemini AI for intelligent recipe generation MongoDB Atlas for cloud database storage

Integration:

RESTful API architecture Comprehensive error handling and loading states Systematic testing with custom connection test dashboard Mobile-responsive design tested on multiple devices

Challenges we ran into

  1. Image Quality vs ML Performance: Our frontend was compressing images before upload, which broke object detection. We had to remove compression entirely and send full-quality images, then optimize the ML model to handle various lighting conditions.
  2. Response Structure Mismatch: The backend returned data in a nested format the frontend didn't expect. We implemented fallback logic to handle multiple possible response structures robustly.
  3. React Lifecycle Issues: Upload succeeded but UI wouldn't update—the component incorrectly thought it was unmounted. We debugged systematically with detailed logging to identify and fix the state management issue.
  4. Recipe Generation Edge Cases: Initially, recipes only worked with specific ingredient combinations. We updated the system to send ALL inventory items and prioritize expiring ones, making it much more flexible.
  5. Mobile Responsiveness: Network configuration challenges prevented easy mobile testing. We implemented proper CORS, firewall rules, and added --host flag for network exposure. ## Accomplishments that we're proud of Full-stack working demo - Not just mockups, everything works end-to-end Real AI integration - Actual computer vision and LLM, not fake data Professional UI/UX - Custom design, not templates, mobile-first Systematic debugging - Built internal testing tools to verify all endpoints Strategic AI use - Used Claude AI as a debugging partner, not blind code copying Type safety - TypeScript caught bugs before runtime Clean architecture - Modular, maintainable codebase ## What we learned Technical Skills:

Integration between ML models and web frontends Handling async operations and state management in React Building robust error handling for production-ready apps API design patterns and RESTful best practices Image processing optimization for ML models

Development Process:

The importance of systematic debugging (logging everything!) How to use AI tools strategically without dependency Mobile-first design principles Testing strategies for full-stack applications Git workflow and version control best practices

Problem Solving:

Breaking down complex problems into debuggable pieces Reading documentation thoroughly before implementing Not being afraid to rebuild when the approach is wrong The value of detailed error messages for users

What's next for Fridgely.AI

Built With

Share this project:

Updates