Garden to Glass 🌿🍸

A speakeasy-style cocktail companion that turns what's growing in your garden — and what's sitting in your liquor cabinet — into world-class cocktails and mocktails, complete with AI-generated watercolor art, botanical illustrations, and a live video "Alchemist" consultation.

Log your provisions across three collections (Garden, Cellar, Larder), set the hour, spirit strength, and mood, and invoke a bespoke libation crafted from what you actually have.

Features

• Provision inventory — track fresh garden botanicals, spirits, and pantry staples per location ("atelier"), persisted locally in IndexedDB
• Camera scanning — photograph your harvest or bar shelf and Gemini identifies and categorizes everything in frame
• Bespoke recipe generation — cocktails/mocktails tailored to time of day, spirit strength, craft complexity, strict-vs-flexible inventory, and freeform mood, each rendered with a unique watercolor illustration
• The Garden — AI companion suggesting seasonal botanical additions for your climate, with vintage botanical plate illustrations, planting/harvest windows, and flavor pairings
• The Lab — multi-day infusion, cordial, and tincture projects with steeping progress, shelf-life tracking, expiry alerts, and Canva label design integration
• Live Alchemist — real-time voice + video consultation over the Gemini Live API: point your camera at your setup and get spoken guidance
• Multi-atelier support — separate inventories per location, with geolocation-based prompts to switch when you arrive at another atelier

Tech stack

• React 19 + TypeScript + Vite 6
• Google Gemini API (@google/genai): structured JSON output for recipes and suggestions, image generation for watercolors and botanical plates, and the Live API for real-time audio/video
• IndexedDB for offline-first local persistence
• Tailwind CSS for the art-deco speakeasy aesthetic

Getting started

Prerequisites: Node.js 18+ and a Gemini API key (free tier works).

git clone https://github.com/ScottieR/GardenToGlass.git
cd GardenToGlass
npm install
echo "GEMINI_API_KEY=your_key_here" > .env.local
npm run dev

Open http://localhost:3000. Camera, microphone, and location permissions are optional but unlock scanning, the Live Alchemist, and seasonal/proximity features.

Note on deployment: the API key is inlined into the client bundle at build time. That's fine for running locally with your own key, but don't deploy a public build with a real key — route Gemini calls through a small backend proxy instead.

Project structure

App.tsx                  # State management, persistence, view routing
services/gemini.ts       # All Gemini API calls (recipes, images, suggestions, geocoding)
services/db.ts           # IndexedDB persistence layer
components/
  HomeView.tsx           # Inventory + drink invocation controls
  RecipeView.tsx         # Recipe display with stock checking
  GardenCompanion.tsx    # Botanical suggestions and plant details
  LabView.tsx            # Infusion projects, alchemy proposals, apparatus
  LiveAlchemist.tsx      # Gemini Live audio/video consultation
  Scanner.tsx            # Camera capture for ingredient recognition
  LocationModal.tsx      # Multi-atelier management

Roadmap

• Backend proxy for API calls (enables a hosted demo)
• Web Push reminders when infusions are ready or nearing expiry
• PWA install + offline support
• Cross-device sync
• Recipe sharing and printable recipe cards