RecipeLanes.com

Recipe Lanes is a visual recipe platform that transforms text into flowchart-style diagrams. It's an attempt to make cooking instructions more intuitive by showing the process as a structured flow instead of a wall of text.

---

🔗 Quick Links

• Live Site: recipelanes.com
• Screenshots & Demos: Browse all assets in /docs/screenshots
• Architecture: Detailed System Design
• Deploying a new instance: DEPLOYMENT.md

---

🎨 AI Icons & Global Cache

Every ingredient icon is stored in a global cache, meaning once an icon is generated for "Carrot," it's available for everyone. If you don't like an icon the AI picked, you can reroll it until you find one that fits.

---

🚀 Visual Showcase

The Lanes Editor	Visual Themes	Smart Layouts
Separate prep and cooking steps.	Classic, Modern, and Clean themes.	Auto-organized for readability.

---

🖱️ Interactive Experience

The site is fully interactive. You can rearrange your recipe flow in real-time.

Drag & Drop	Smart Tooling
Rearrange steps manually.	Tools for graph manipulation.

---

✨ How it Works

1. 🛣️ Editor

• AI Logic: An LLM converts the recipe into structured metadata with icon descriptions and then these are generated with an image model.
• Interactive Graphs: Drag-and-drop nodes, edit text, and visualize the entire process at a glance.
• Forge Icons: Auto-Generated unique 8-bit art for all ingredients and steps. You can 'reroll' these if the AI did a bad job.

2. 🎨 Gallery

• Gallery: Browse recipesgraphs created by the community.
• Search: Find recipes by title.
• Fork: Clone any recipe to your private library to customize it.

---

LICENSE

Commercial Book Publishing

RecipeLanes is open-source under the AGPL-3.0 license. You can modify this code and set up your own backend and charge people to use it, but you must make your entire source code (including your backend changes) open source as well. While this covers the software code, the visual layouts, rendered outputs, CSS styling, and document templates generated by RecipeLanes are licensed for personal use only. If you intend to use RecipeLanes to produce a book, eBook, website or other publication for commercial sale, you must obtain a Commercial Print License.

License Tiers include:

• Self-Published/Indie: For small print runs or individual creators.
• Professional/Commercial: For established publishers or high-volume sales.

To request a quote or discuss licensing terms, please contact: commercial@recipelanes.com

---

🛠️ Tech Stack

• Framework: Next.js 16 (App Router)
• Styling: Tailwind CSS 4
• Graph Engine: React Flow
• AI: Google Genkit
• Backend: Firebase (Firestore, Storage, Auth, Functions)
• Testing: Playwright, Vitest

---

🚀 Getting Started

Prerequisites

• Node.js 20
• Java 21+ — required by firebase-tools (versions before 21 are rejected). On Debian/Ubuntu the default apt package is usually Java 17, so install explicitly:
  • Debian/Ubuntu (x86): sudo apt install openjdk-21-jdk
  • Debian/Ubuntu (arm64/Raspberry Pi): install Temurin 21 from the Adoptium repo
  • macOS: brew install openjdk@21

Installation

Update these instructions if it goes out of date or doesn't work. Feel free to file bugs.

1. Clone the repository:

   git clone https://github.com/bohemian-miser/RecipeLanes.git
   cd RecipeLanes/recipe-lanes

2. Install dependencies:

   npm install
   npm install --prefix functions

3. Create mock-service-account.json in recipe-lanes/ — this file is gitignored and must be created manually. For local emulator development, the credentials are never validated so a stub is fine:

   {
     "type": "service_account",
     "project_id": "local-project-id",
     "private_key_id": "mock-key-id",
     "private_key": "-----BEGIN RSA PRIVATE KEY-----\nMOCK\n-----END RSA PRIVATE KEY-----\n",
     "client_email": "firebase-adminsdk@local-project-id.iam.gserviceaccount.com",
     "client_id": "000000000000000000000",
     "auth_uri": "https://accounts.google.com/o/oauth2/auth",
     "token_uri": "https://oauth2.googleapis.com/token"
   }

One-time Firebase setup

Enable the webframeworks experiment (required by the hosting config, only needs to be done once per machine):

npx firebase experiments:enable webframeworks

You may see a warning about not being logged in — this is fine for local emulator use and can be ignored.

Running Locally with Emulators

The app runs against Firebase Emulators locally — no real Firebase project needed. Use two terminals:

# Terminal 1 — start Firebase emulators (auth, firestore, storage, functions, tasks)
npm run emulators

# Terminal 2 — start Next.js dev server pointed at emulators
npm run dev:emulators

App: http://localhost:8001 — Firebase Emulator UI: http://localhost:4000

Running against Staging

To run the frontend locally pointed at the real staging backend (npm run dev:staging), you need:

1. A service account key — Firebase Console → staging project → Project Settings → Service Accounts → Generate new private key. Save as service-account-staging.json in recipe-lanes/ (already gitignored).
2. A .env.staging file (gitignored, create manually):

   NEXT_PUBLIC_USE_FIREBASE_EMULATOR=false
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=recipe-lanes-staging
   NEXT_PUBLIC_FIREBASE_API_KEY=...
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=...
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=...
   NEXT_PUBLIC_FIREBASE_APP_ID=...
   GOOGLE_APPLICATION_CREDENTIALS=./service-account-staging.json
   

   The NEXT_PUBLIC_* values are in the Firebase Console under Project Settings → General → Your apps. Then run:

   npm run dev:staging

Testing

# Run unit tests
npm run test:unit

# Run E2E tests (requires Firebase Emulators)
npm run test:e2e

---

📝 About the Project

I made this as a weekend project and it has grown since then. This is the first website I've ever tried to make and it's got some bugs but it's also surprisingly useful.

I even added force simulation, it's not too usefull but it is entertaining.

I am very open to collaboration and PR's, you can reach out at https://substack.com/@bohemianmiser.

Created with ❤️ for better cooking.