cookbook Svelte Themes

Cookbook

A vibe coded cookbook app, written with Svelte, supported by SQLite

šŸ³ Cookbook

A personal recipe app as an alternative to HelloFresh – simple meals with practical shopping lists for German supermarkets. Powered by AI for recipe generation and image creation.

Quick Start (Local Development)

Prerequisites

  • Node.js 18+ and npm
  • Git

Setup

# Clone the repository
git clone [email protected]:mahype/cookbook.git
cd cookbook

# Install dependencies
npm install

# Seed the database with example recipes
npm run seed

# Start the development server
npm run dev

The app runs at http://localhost:5178.

AI Features (Optional)

To enable AI recipe generation, configure a provider in the app:

  1. Open the app → Einstellungen (Settings)
  2. Scroll to KI-Einstellungen
  3. Select a provider (OpenAI, Anthropic, etc.) and enter your API key
  4. Test the connection

Native App (iOS & Android)

The app can run as a native mobile app via Capacitor.

iOS (Simulator & Device)

Prerequisites:

  • macOS
  • Xcode (free from App Store, ~12 GB)
  • After install: sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
  • Accept the license: sudo xcodebuild -license accept

Build & Run:

# Build for Capacitor (uses adapter-static, stubs server modules)
bash scripts/build-capacitor.sh

# Build the iOS project
cd ios/App
xcodebuild -project App.xcodeproj -scheme App \
  -destination 'platform=iOS Simulator,name=iPhone 17 Pro' \
  -configuration Debug build

# Run in Simulator
xcrun simctl boot "iPhone 17 Pro"  # or any available simulator
open -a Simulator
xcrun simctl install booted ~/Library/Developer/Xcode/DerivedData/App-*/Build/Products/Debug-iphonesimulator/App.app
xcrun simctl launch booted de.cookbook.app

Or via Xcode GUI:

npx cap open ios

Then select a simulator or connected device and press ā–¶ļø.

On a real iPhone (free, no Developer Account needed):

  1. Connect iPhone via USB
  2. Open Xcode: npx cap open ios
  3. Select your iPhone as build target
  4. Press ā–¶ļø (you may need to trust the developer profile on the iPhone under Settings → General → VPN & Device Management)

For App Store distribution:

  • Apple Developer Account required (99€/year)
  • TestFlight for beta testing

Android (Emulator & Device)

Prerequisites:

  • Android Studio (free, ~1.5 GB)
  • During install, make sure to include: Android SDK, Android Virtual Device (AVD)

Setup (first time):

# After Android Studio is installed, add platform tools to PATH
# (add to ~/.zshrc or ~/.bashrc)
export ANDROID_HOME=$HOME/Library/Android/sdk   # macOS
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator

# Create an emulator (or do it via Android Studio → Virtual Device Manager)
# Android Studio → More Actions → Virtual Device Manager → Create Device
# Recommended: Pixel 8, API 34 (Android 14)

Build & Run:

# Build for Capacitor
bash scripts/build-capacitor.sh

# Open in Android Studio
npx cap open android

Then select an emulator or connected device and press ā–¶ļø.

On a real Android phone:

  1. Enable Developer Options: Settings → About Phone → tap "Build Number" 7 times
  2. Enable USB Debugging: Settings → Developer Options → USB Debugging
  3. Connect phone via USB, allow debugging when prompted
  4. Select your device in Android Studio and press ā–¶ļø

For Play Store distribution:

  • Google Play Console account required (25€ one-time)

Build Scripts

npm run dev              # Start dev server (web, with hot reload)
npm run build            # Production build (web)
npm run build:cap        # Capacitor build + sync (CAPACITOR=true)
bash scripts/build-capacitor.sh  # Full native build (stubs server, syncs platforms)

Features

  • šŸ¤– AI Recipe Generation – Generate personalized recipes based on your pantry, preferences, and cuisine ratings
  • šŸ“‹ Recipe Suggestions – Browse AI-generated suggestions, approve or dismiss them
  • šŸ“– Recipe Database – All saved recipes, sortable by newest, pantry match, cost, speed, simplicity
  • šŸ“¦ Pantry Management – Track what you have; recipes show pantry matches
  • šŸ›’ Shopping Lists – Auto-generated, categorized by store type
  • ⭐ Cuisine Preferences – Rate cuisines 1-3 stars across 5 categories (37 cuisines)
  • šŸ‘„ Persons & Meal Planning – Household members with dietary preferences, pass-the-phone voting
  • šŸ½ļø Adjustable Servings – Scale ingredients with a stepper (fractions like ½ displayed nicely)
  • šŸ“ø AI Food Photos – DALL-E 3 with vision-based validation
  • šŸ”Œ Multi-Provider AI – OpenAI, Anthropic, Mistral, OpenRouter, Ollama, Custom (OpenAI-compatible)
  • šŸ“± Native iOS & Android – Via Capacitor with offline-capable client-side SQLite

Tech Stack

Component Technology
Frontend SvelteKit (Svelte 5) with Runes
Styling Tailwind CSS v4
Database (web) SQLite via better-sqlite3
Database (native) SQLite via sql.js (WASM)
Native wrapper Capacitor
Language TypeScript
Build Vite

Architecture

Web mode: SvelteKit with server-side rendering, better-sqlite3 for the database, API routes for data access.

Native mode (Capacitor): SvelteKit with adapter-static (SPA), sql.js (SQLite compiled to WASM) running in the browser, all data stored in IndexedDB. No server needed – the app works fully offline.

The dual-mode architecture is handled by src/lib/stores/data.ts which detects the environment and routes data calls accordingly.

Project Structure

cookbook/
ā”œā”€ā”€ scripts/
│   ā”œā”€ā”€ seed.ts                     # Database seeder
│   └── build-capacitor.sh          # Native build script
ā”œā”€ā”€ src/
│   ā”œā”€ā”€ lib/
│   │   ā”œā”€ā”€ server/
│   │   │   ā”œā”€ā”€ db.ts               # Server-side SQLite (better-sqlite3)
│   │   │   └── ai.ts               # Multi-provider AI abstraction
│   │   ā”œā”€ā”€ client/
│   │   │   ā”œā”€ā”€ db.ts               # Client-side SQLite (sql.js/WASM)
│   │   │   ā”œā”€ā”€ ai-recipes.ts       # Client-side AI recipe generation
│   │   │   └── ai-images.ts        # DALL-E image generation + validation
│   │   ā”œā”€ā”€ stores/
│   │   │   └── data.ts             # Dual-mode data layer (server vs client)
│   │   ā”œā”€ā”€ stubs/
│   │   │   └── better-sqlite3.ts   # Mock for Capacitor builds
│   │   ā”œā”€ā”€ pantryMatch.ts          # Pantry matching utility
│   │   └── components/
│   │       ā”œā”€ā”€ RecipeCard.svelte    # Recipe card (approve, dismiss, expand)
│   │       ā”œā”€ā”€ RecipeDetails.svelte # Ingredients + steps
│   │       ā”œā”€ā”€ TabToggle.svelte     # Tab switcher
│   │       └── StepIndicator.svelte # Multi-step wizard
│   └── routes/
│       ā”œā”€ā”€ rezepte/                # Recipes (suggestions + saved, tab toggle)
│       ā”œā”€ā”€ lebensmittel/           # Shopping list + pantry (tab toggle)
│       ā”œā”€ā”€ einstellungen/          # Settings (preferences, AI, servings)
│       ā”œā”€ā”€ planen/                 # Meal planning + voting
│       └── api/                    # REST endpoints (web mode only)
ā”œā”€ā”€ ios/                            # iOS project (gitignored, generated)
ā”œā”€ā”€ android/                        # Android project (gitignored, generated)
ā”œā”€ā”€ capacitor.config.ts             # Capacitor configuration
ā”œā”€ā”€ svelte.config.js                # SvelteKit config (dual adapter)
└── vite.config.ts                  # Vite config (with Capacitor alias)

License

Private project.

Top categories

Loading Svelte Themes