Skip to content

Eric-Zhang-Developer/mealcraft

Repository files navigation

Next.js React TypeScript Tailwind CSS OpenRouter Google Gemini Vercel

Vitest React Testing Library Playwright ESLint


MealCraft

Craft meals from what you have.

A Minecraft-themed AI-powered recipe generator that turns photos of your fridge into delicious meal ideas.
Built at SwampHacks 2026.

Try It Now

Overview

MealCraft helps you answer the age-old question: "What should I cook with what I have?"

Simply snap a photo of your fridge, pantry, or grocery haul, and our AI-powered chef will analyze your ingredients and generate five personalized recipes complete with step-by-step instructions and nutritional information. No more food waste, no more decision fatigue -just delicious meals crafted from what you already own.

The app features a playful Minecraft-inspired UI with pixel art styling, authentic sound effects, and that nostalgic blocky aesthetic we all love.

How It Works

  1. Upload Your Photo - Take a picture of your fridge, pantry, or ingredients and upload it to MealCraft.
  2. AI Analyzes Ingredients - Google Gemini's vision model identifies all the ingredients it can see in your image.
  3. Recipes Are Crafted - The AI generates 5 diverse, practical recipes using your available ingredients.
  4. Get Cooking - Each recipe includes ingredients with amounts, step-by-step instructions, and macro nutrition info (calories, protein, carbs, fat).
  5. Expand for Detail - Need more guidance? Expand any recipe's instructions for detailed cooking steps.

Key Features

  • AI-Powered Ingredient Detection - Upload any image and let Gemini identify your ingredients automatically.
  • Smart Recipe Generation - Get 5 diverse, practical recipes tailored to what you have on hand.
  • Nutritional Information - Every recipe includes calorie and macro breakdowns.
  • Expandable Instructions - One-click detailed cooking instructions for any recipe.
  • Minecraft-Themed UI - Nostalgic pixel art design with authentic sound effects and animations.
  • Responsive Design - Works seamlessly on desktop and mobile devices.
  • Image Compression - Client-side image optimization for faster uploads.

Tech Stack

Frontend

  • Next.js 16 - React framework with App Router
  • React 19 - UI library with latest features
  • TypeScript - Type-safe development
  • Tailwind CSS 4 - Utility-first styling
  • Lucide React - Beautiful icons

Backend

  • Next.js API Routes - Serverless API endpoints
  • OpenRouter - AI model routing and management
  • Google Gemini 3 Flash - Multimodal AI for image analysis and recipe generation

Testing

  • Vitest - Fast unit testing
  • React Testing Library - Component testing
  • Playwright - End-to-end testing
  • jsdom - DOM environment for tests

Getting Started

Prerequisites

  • Node.js 18+
  • npm, yarn, pnpm, or bun

Installation

  1. Clone the repository:

    git clone https://github.com/YOUR_USERNAME/swamphacks-2026.git
    cd swamphacks-2026
  2. Install dependencies:

    npm install
  3. Set up environment variables:

    cp .env.example .env.local

    Add your OpenRouter API key:

    OPENROUTER_API_KEY=your_api_key_here
    
  4. Run the development server:

    npm run dev
  5. Open http://localhost:3000 in your browser.

Scripts

Command Description
npm run dev Start development server
npm run build Build for production
npm run start Start production server
npm run test Run tests in watch mode
npm run test:run Run tests once
npm run test:coverage Run tests with coverage
npm run lint Run ESLint

Team

Built with love at SwampHacks 2026 by:

Credits

  • VT323 - Pixel-style font by Peter Hull via Google Fonts
  • Lucide - Beautiful open-source icons
  • Google Gemini - Multimodal AI for image analysis
  • OpenRouter - AI model routing
  • Minecraft - UI inspiration and aesthetic (Mojang/Microsoft)
  • Cursor - AI IDE
  • Claude Code - Anthropic's agentic coding tool

Future Roadmap

  • User accounts and saved recipes
  • Dietary preference filters (vegetarian, vegan, gluten-free)
  • Shopping list generation for missing ingredients
  • Recipe sharing and social features
  • Voice-guided cooking mode
  • Meal planning calendar

Made with pixels and passion at SwampHacks 2026

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •