SnapFridge

• About SnapFridge
• Key Features
• Tech Stack
• Project Architecture
• Getting Started
  • Prerequisites
  • Installation
  • Environment Variables
  • Running Locally
• Available Scripts
• Database Setup
• The Team
• Credits & Acknowledgments
• License

Around 30% to 40% of the food supply in the United States is wasted each year (USDA), amounting to over 60 million metric tons (or 133 billion pounds) of discarded food sent to landfills. Much of this waste begins at home with unopened, forgotten groceries and clueless fridge-gazing.

SnapFridge tackles this problem head-on:

1. Snap: Take photos of what is inside your refrigerator or pantry.
2. Scan: Multimodal AI extracts and identifies raw ingredients against a verified master ingredient dataset.
3. Cook: Instant recipe suggestions maximize the ingredients you already own, complete with nutritional breakdowns, allergen warnings, and step-by-step directions.

• 📸 AI-Powered Image Recognition

  • Upload photos of your fridge contents (.png, .jpg, .webp).
  • Analyzed by Google Gemini 2.5 Flash using streaming responses to identify food ingredients against a master catalog while filtering out containers, brands, and non-food items.

• 🥕 Interactive Ingredient Control

  • Add, remove, or modify detected ingredients in real time.
  • Searchable autocomplete ingredient input with fuzzy suggestions.
  • Option to ignore common pantry staples (water, flour, salt, oil) to focus on key perishable items.
  • Ranking selector: choose whether to maximize used ingredients or minimize missing ones.

• 🍳 Recipe Suggestions & Smart Filtering

  • Powered by the Spoonacular API to find recipes matching your available items.
  • Displays missing vs. used ingredient counts directly on recipe cards.
  • Client-side pagination and responsive grid views.

• 🥗 In-Depth Recipe Details

  • Full ingredient lists with dynamic Metric / US Customary measurement toggling.
  • Comprehensive nutritional profiles (calories, macros, vitamins, and minerals).
  • Allergen warnings (dairy, gluten, nuts, soy, etc.).
  • Dietary and quality tags (vegan, vegetarian, healthy, sustainable, popular).
  • Clear step-by-step cooking instructions with source attribution.

• 👤 User Accounts & Recipe Book

  • Secure authentication via Supabase Auth supporting Google and GitHub OAuth.
  • Personal Dashboard to bookmark and manage saved recipes.

• 🎨 Modern, Performant UI & UX

  • Built with React 19 and the React Compiler for automatic memoization and optimal rendering.
  • Zero-runtime CSS-in-JS via Pigment CSS (@pigment-css/react) and Lightning CSS.
  • Fluid typography and responsive layouts using mathematical clamp scaling.
  • Dark and light theme switcher with persistent user preference.
  • Accessible UI primitives backed by Radix UI.

SnapFridge/
├── public/                 # Static assets, branding, and manifest icons
│   ├── functions/
│   │   └── ingredients.csv # Master ingredient taxonomy used for AI grounding
│   └── ...
├── src/
│   ├── app/                # Next.js App Router routes & API endpoints
│   │   ├── (home)/         # Landing page with interactive demo and statistics
│   │   ├── about/          # Mission statement & team information
│   │   ├── auth/           # OAuth callback handler for Supabase
│   │   ├── credits/        # Image, data, and library attributions
│   │   ├── dashboard/      # User dashboard & saved recipes
│   │   ├── gemini/         # Streamed multimodal AI inference route
│   │   ├── login/          # OAuth login page
│   │   ├── privacy-policy/ # Privacy policy
│   │   ├── recipe/[id]/    # Dynamic recipe details & nutrition page
│   │   └── snap/           # Fridge photo uploader & ingredient curation
│   ├── components/         # Modular React UI components
│   │   ├── NavBar/         # Header navigation, theme switch & auth status
│   │   ├── RecipeSection/  # Recipe cards, pagination, and skeleton loaders
│   │   ├── ThemeSwitch/    # Light / dark theme toggle
│   │   ├── ToastProvider/  # Global toast notification system
│   │   ├── UnitProvider/   # US Metric / Imperial conversion context
│   │   ├── UserProvider/   # Supabase user authentication state
│   │   └── snap/           # Image upload dropsite and ingredient chips
│   └── utils/              # Helper utilities, design tokens, and Supabase clients
│       └── supabase/       # Client, server, and admin Supabase instances
├── .env.example            # Template for required environment variables
├── biome.json              # Biome linter and formatter configuration
├── netlify.toml            # Netlify deployment and HTTP security headers
├── next.config.ts          # Pigment CSS, CSP headers, and Next.js configuration
└── package.json            # Dependencies and npm scripts

Ensure you have the following installed on your machine:

• Node.js: >= 20.12.2
• npm: >= 10.9.2

1. Clone the repository:

   git clone https://github.com/SnapFridge/SnapFridge.git
   cd SnapFridge

2. Install project dependencies:

   npm install

Copy the sample environment file to create .env:

cp .env.example .env

Open .env and fill in the following credentials:

Start the development server with Next.js and Webpack (configured for Pigment CSS):

npm run dev

Open http://localhost:3000 in your browser.

SnapFridge utilizes Supabase (PostgreSQL) for user recipe bookmarks.

Create the saved_recipes table using the following SQL in your Supabase SQL editor:

create table public.saved_recipes (
  id uuid references auth.users(id) on delete cascade primary key,
  recipes jsonb default '[]'::jsonb
);

-- Enable Row Level Security (RLS)
alter table public.saved_recipes enable row level security;

-- Policy: Allow users to view their own saved recipes
create policy "Users can view their own saved recipes"
  on public.saved_recipes for select
  using (auth.uid() = id);

-- Policy: Allow users to insert their own saved recipes row
create policy "Users can insert their own saved recipes"
  on public.saved_recipes for insert
  with check (auth.uid() = id);

-- Policy: Allow users to update their own saved recipes
create policy "Users can update their own saved recipes"
  on public.saved_recipes for update
  using (auth.uid() = id);

Created with passion by high school students at Cypress High School:

• Rylex Phan — Backend architecture, AI streaming pipeline, and system integration.
• Andrew "Andru" Trinh — Full-stack development, database schema, and recipe flows.
• Andrew "Xandrew" Kim — Frontend interface, design system, and responsive UI components.

• Food Waste Photography: Sarah Reingewirtz / ZUMA Press / Newscom
• Refrigerator Imagery: Sharp Electronics Corporation
• Food Waste Statistics: United States Department of Agriculture (USDA)
• Privacy Policy Template: Generated via TermsFeed

This project is licensed under the MIT License.