diff --git a/README.md b/README.md index 75842c4..a735829 100644 --- a/README.md +++ b/README.md @@ -1,38 +1,154 @@ -# sv +# ChefBible -Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli). +## Overview +**ChefBible** is a self-hosted, mobile-friendly recipe and menu management tool designed for **real-world kitchen use**. +It is optimized for **speed**, **simplicity**, and **offline-friendly workflows** so cooks can find, read, and add recipes in **under 10 seconds**. -## Creating a project +The app is built with: +- **SvelteKit** for UI and server logic +- **TailwindCSS** for responsive, kitchen-friendly design +- **Prisma** as the ORM +- **PostgreSQL** as the database -If you're seeing this, you've probably already done this step. Congrats! +This repo is intentionally structured to make onboarding **both humans and LLMs** easy, so all core context is documented here. -```sh -# create a new project in the current directory -npx sv create +--- -# create a new project in my-app -npx sv create my-app -``` +## Purpose +ChefBible aims to replace clunky recipe binders, scattered Google Docs, and slow web apps with something **built for the kitchen**. +It focuses on: +1. Storing and organizing recipes +2. Tracking ingredients and allergens +3. Building menus from recipes +4. Displaying everything in a **fast, easy-to-read format** on tablets or phones -## Developing +**MVP Rule:** +If a feature isn’t needed for a cook to find, read, or add a recipe in **<10 seconds**, it is not part of Phase 1–2. -Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: +--- -```sh +## Core Features + +### Recipes +- Name, description, instructions, optional photo +- Linked ingredients (with quantity/unit/prep notes) +- Automatic allergen mapping from ingredients +- “Kitchen Mode” for step-by-step cooking view + +### Ingredients +- Unique name +- Linked allergens +- Linked to recipes via `RecipeIngredient` + +### Allergens +- Name + optional description +- Linked to ingredients + +### Menus +- Name + optional season +- Contains recipes in sortable order + +--- + +## Data Model Summary + +```plaintext +Recipe --(RecipeIngredient)--> Ingredient --(IngredientAllergens)--> Allergen +Menu --(MenuRecipe)--> Recipe +Tables: +Recipe: Core recipe info + +Ingredient: Basic ingredient info + allergens + +Allergen: Common allergen definitions + +Menu: Collection of recipes + +RecipeIngredient: Join table with quantity/unit/prep + +MenuRecipe: Join table with position + +UI Patterns +List + Detail +Recipes, ingredients, and menus use a consistent split layout: search/filter on one side, detail view on the other. + +Form with Inline Add +Add missing ingredients without leaving the recipe form. + +Tag/Chip Display +Allergens and prep notes shown as color-coded chips. + +Kitchen Mode +Large font, high contrast, step-by-step cooking instructions. + +Menu Builder +Drag-and-drop ordering of recipes in a menu. + +Global Search +Accessible from anywhere with / key shortcut. + +Development Phases +Phase 1 — Core Foundation +Local dev setup with repeatable builds + +Postgres + Prisma migration & seed + +Direct Prisma usage in +page.server.ts actions + +Phase 2 — Minimum Usable UI +CRUD for recipes, ingredients, menus + +Recipe form with ingredient selector + allergen auto-mapping + +Phase 3 — Internal Dogfooding +Fast search + +Menu builder + +Mobile-first adjustments + +Phase 4 — Stability & Shareability +JSON export/import for recipes + +Refined allergen mapping + +Search & filtering enhancements + +Local Development +Prerequisites +Node.js 20+ + +PostgreSQL 16+ (local or Docker) + +npm + +Setup +bash +Copy +Edit +git clone +cd chefbible + +npm install + +# Start Postgres (example using Docker) +docker compose up -d + +# Run migrations & seed +npx prisma migrate dev --name init +npx prisma db seed + +# Start dev server npm run dev +Notes for LLMs +Framework: SvelteKit with Node adapter -# or start the server and open the app in a new browser tab -npm run dev -- --open -``` +DB Layer: Prisma (/src/lib/server/db/*.ts contains reusable queries) -## Building +Routing: Use +page.server.ts and form actions for now; no dedicated API routes until external consumers are needed -To create a production version of your app: +UI: TailwindCSS utility-first design, mobile-first sizing -```sh -npm run build -``` +Performance Requirement: All page loads & actions <500ms on LAN -You can preview the production build with `npm run preview`. - -> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment. +Design Priority: Minimal clicks, fast search, allergen visibility \ No newline at end of file