• 

  Inventory Tracker

• 

  Barcode Scanner

• 

  Item Adder

• 

  Smart Recipe Suggester

FreshTrack: The Smart Way to Manage Your Kitchen

What inspired us?

Like most people, we were frustrated by how much food we ended up throwing away simply because we forgot it was in the back of the fridge. We looked into "smart fridges" that promise to track this, but they cost thousands of dollars and often feel like overkill. We realized we didn't need a new appliance, we just needed a smarter way to track what we already have. That's why we built FreshTrack: a digital inventory for your kitchen that fits in your pocket and helps you plan meals around what you already own.

What we learned

Building FreshTrack deepened our understanding of modern web development, particularly how to bridge the gap between web apps and native-like experiences. We learned how to work with browser APIs for hardware access (like the camera for scanning), manage complex state for real-time inventory updates, and design a UI that prioritizes speed and clarity, because nobody wants to spend 5 minutes logging their groceries.

How we built our project

We built FreshTrack using a modern stack designed for performance and developer experience:

• Frontend: React + Vite for a blazing fast UI, styled with Tailwind CSS and Shadcn UI components for a clean, accessible look.
• Backend: Supabase handles authentication and real-time database syncing, ensuring users can see what's in stock from any device.
• Key Features:
  • Integrated barcode-detector API for instant item entry.
  • Used Recharts to visualize consumption habits and spot trends.
  • Implemented smart recipe suggestions based on current inventory.

Challenges we faced

One of the biggest hurdles was implementing the barcode scanner directly in the browser. Getting the camera permissions right across different devices and ensuring the scanning was fast and reliable took a lot of fine-tuning. Another challenge was designing the inventory logic, deciding how to best handle expiration dates and categorizing items efficiently so the list didn't feel cluttered or overwhelming to manage.

Built With

• barcode-detector-(scanning-api)
• css3
• css3-frameworks-&-libraries:-react
• database
• html5
• lucide
• lucide-react-(icons)-backend-&-database:-supabase-(auth
• react
• realtime)-state-management-&-data-fetching:-tanstack-query-forms-&-validation:-react-hook-form
• shadcn-ui-(radix-ui-primitives)
• sonner
• supabase
• tailwindcss
• typescript
• vercel
• vite-styling:-tailwind-css
• zod-data-visualization:-recharts-utility-libraries:-date-fns-(date-manipulation)