Cookflow

Demo

cookflow.mp4

If the inline player doesn’t render on your platform, open the video directly: https://github.com/user-attachments/assets/525b11ba-8d25-43e9-ab02-375a28345d44

Cookflow is a minimalist recipe application: paste a recipe (or drop in a URL), review/edit what was parsed, then cook step-by-step with built-in timers. It’s designed for almost hands-free cooking on a phone: large “next/back” navigation, optional swipe + keyboard controls, screen wake lock, and timer alerts.

What it does

• Ingest recipes from text or URLs via an LLM-backed endpoint.
• Normalizes recipes into a strict schema (shared between frontend/backend).
• Review + edit before saving (title, ingredients, steps, notes, per-step durations).
• Cook in a guided flow: one step at a time with optional countdown timers, sound + vibration alerts, and wake lock to keep the screen on.
• Auth + persistence with Supabase (Google OAuth on the client, token verification on the API).

Tech stack

• Frontend: React + Vite + TypeScript, Tailwind CSS, Radix UI
• Backend: Node.js + Express + TypeScript
• Auth & DB: Supabase (client uses anon key; server uses service-role key)
• LLM: Google Gemini via @google/genai
• Shared types: packages/schemas (Zod schema exported as @cookflow/schemas)

Architecture (high-level)

• Frontend sends recipe URL to backend
• Backend scrapes + extracts structured blocks
• If needed, backend calls LLM to normalize into schema
• Zod validates + backend enriches (durations/details)
• Persist: recipes / steps / ingredients tied to user

Local development

Prereqs

• Node.js
• A Supabase project (Auth enabled, plus your recipe tables)
• A Gemini API key

Install

From the repo root:

npm install

Environment variables

Cookflow expects environment variables in both the backend and frontend.

Backend (backend/.env)

Create backend/.env:

PORT=3001

# Supabase (server-side)
SUPABASE_URL=YOUR_SUPABASE_URL
SUPABASE_SERVICE_ROLE_KEY=YOUR_SUPABASE_SERVICE_ROLE_KEY

# Gemini
GEMINI_API_KEY=YOUR_GEMINI_API_KEY

Frontend (frontend/.env)

Create frontend/.env:

VITE_API_BASE_URL=http://localhost:3001

# Supabase (client-side)
VITE_SUPABASE_URL=YOUR_SUPABASE_URL
VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

Run the backend

npm -w backend run dev

Health check: GET http://localhost:3001/health

Run the frontend

npm -w frontend run dev

Database schema (Supabase)