readme formatting

.forgejo/workflows/build-and-push-containers.yaml

@@ -0,0 +1,39 @@
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    container:
+      image: node:22-bullseye
+
+    steps:
+      - name: Install Docker
+        run: |
+          curl -fsSL https://get.docker.com -o get-docker.sh
+          sh get-docker.sh
+
+      - name: checkout
+        uses: actions/checkout@v4
+
+      - name: Login to forgejo
+        uses: docker/login-action@v3
+        with:
+          registry: forgejo.fredzernia.com
+          username: ${{ github.actor }}
+          password: ${{ secrets.PACKAGE_TOKEN }}
+
+      - name: build and push backend
+        uses: docker/build-push-action@v6
+        with:
+          context: backend/.
+          push: true
+          tags: forgejo.fredzernia.com/${{ env.FORGEJO_REPOSITORY }}_backend:latest
+
+      - name: build and push frontend
+        uses: docker/build-push-action@v6
+        with:
+          context: frontend/.
+          push: true
+          tags: forgejo.fredzernia.com/${{ env.FORGEJO_REPOSITORY }}_frontend:latest

.forgejo/workflows/ci.yml

@@ -1,26 +0,0 @@
-on:
-  push:
-    branches:
-      - main
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    env:
-      NODE_ENV: dev
-    container:
-      image: node:22-bullseye
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Build Frontend
-        working-directory: frontend
-        run: |
-          npm ci
-          npm run ci
-
-      - name: Build Backend
-        working-directory: backend
-        run: |
-          npm ci
-          npm run ci

README.md

@@ -19,4 +19,27 @@
 
 - Tailwind CSS
 
-I have a production build of the app hosted in docker served with caddy on a vps running nixos that you can access here: https://recipe-app.fredzernia.com
+#### Infra/CI:
+
+This Forgejo instance is hosted on a VPS running NixOS\
+The Forgejo Runner is hosted in a LXC container running on a local nix server\
+The runner builds the containers and pushes them to this Forgejo registry\
+In the frontend container I bundle the compiled src with Caddy to run as a standalone app\
+The exposed frontend port can then be served via reverse proxy
+
+#### Try it out:
+
+https://recipe-app.fredzernia.com
+
+#### Run it yourself:
+
+```
+mkdir recipe_app && cd recipe_app
+wget https://forgejo.fredzernia.com/fred/recipe_app/raw/branch/main/docker-compose.yaml
+wget https://forgejo.fredzernia.com/fred/recipe_app/raw/branch/main/example.env
+mv example.env .env # Change these values if you want
+docker compose pull
+docker compose up db -d
+docker compose run backend npx prisma migrate deploy
+docker compose up -d
+```

backend/Dockerfile

@@ -1,15 +1,27 @@
-FROM node:22-slim
+FROM node:22-slim AS base
 
-WORKDIR /usr/src/app
+WORKDIR /app
 
-COPY package*.json ./
+COPY package*.json tsconfig*.json prisma.config.ts ./
+COPY prisma ./prisma
+COPY src ./src
 
-RUN apt-get update -y && apt-get install -y openssl
+RUN apt-get update -y && \
+    apt-get install -y openssl && \
+    rm -rf /var/lib/apt/lists/*
 
-RUN if [ "$NODE_ENV" = "dev" ]; then npm install; else npm install --omit=dev; fi
+RUN npm install --omit=dev
+RUN npm run prisma:generate
 
-COPY . .
+FROM base AS builder
+RUN npm install
+RUN npm run build
+
+
+FROM base
+COPY --from=builder /app/dist ./dist
+COPY --from=builder /app/prisma ./prisma
 
 EXPOSE 3000
 
-CMD npm run $NODE_ENV
+CMD ["npm", "run", "prod"]

backend/Dockerfile.dev

@@ -0,0 +1,11 @@
+FROM node:22-slim
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+EXPOSE 3000
+
+CMD ["npm", "run", "dev"]

backend/package.json

@@ -4,28 +4,30 @@
   "main": "index.js",
   "scripts": {
     "dev": "nodemon ./src/index.ts",
-    "production": "npx tsc && node ./dist/index.js",
-    "ci": "tsc"
+    "build": "tsc",
+    "prisma:generate": "prisma generate",
+    "prod": "node ./dist/index.js"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@prisma/client": "^6.14.0",
+    "@prisma/adapter-pg": "7.2.0",
+    "@prisma/client": "7.2.0",
     "cors": "^2.8.5",
     "dotenv": "^17.0.1",
     "express": "^5.1.0",
-    "knex": "^3.1.0",
-    "pg": "^8.16.3",
-    "prisma": "^6.14.0"
+    "pg": "^8.17.2",
+    "prisma": "7.2.0"
   },
   "devDependencies": {
-    "typescript": "^5.9.2",
-    "ts-node": "^10.9.2",
-    "@types/node": "^24.2.1",
     "@types/cors": "^2.8.19",
     "@types/express": "^5.0.3",
-    "nodemon": "^3.1.10"
+    "@types/node": "^24.2.1",
+    "@types/pg": "^8.16.0",
+    "nodemon": "^3.1.10",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.2"
   }
 }

backend/prisma.config.ts

@@ -0,0 +1,12 @@
+import 'dotenv/config';
+import { defineConfig } from 'prisma/config';
+
+export default defineConfig({
+  schema: 'prisma/schema.prisma',
+  migrations: {
+    path: 'prisma/migrations',
+  },
+  datasource: {
+    url: process.env['DATABASE_URL'],
+  },
+});

backend/prisma/schema.prisma

@@ -1,6 +1,5 @@
 datasource db {
   provider = "postgresql"
-  url      = env("DATABASE_URL")
 }
 
 generator client {

backend/src/controllers/recipeController.ts

@@ -1,7 +1,12 @@
 import { Request, Response } from "express";
 import RecipeModel from "../models/recipeModel";
+import { PrismaClient } from "@prisma/client";
 
-const model = new RecipeModel();
+let model: RecipeModel;
+
+export const initializeController = (prisma: PrismaClient) => {
+  model = new RecipeModel(prisma);
+};
 
 export const test = async (req: Request, res: Response): Promise<void> => {
   console.log("test");
@@ -46,9 +51,6 @@ export const getRecipeById = async (
 };
 
 export const addRecipe = async (req: Request, res: Response): Promise<void> => {
-  if (process.env.NODE_ENV === "demo") {
-    return;
-  }
   try {
     console.log(req.body);
     const createdRecipe = await model.addRecipe(req.body);
@@ -68,9 +70,6 @@ export const updateRecipe = async (
 ): Promise<void> => {
   console.log(req.body);
   const id = parseInt(req.params.id, 10);
-  if (process.env.NODE_ENV === "demo") {
-    return;
-  }
   try {
     const updatedRecipe = await model.updateRecipe(req.body, id);
     res.status(201).json(updatedRecipe);
@@ -84,9 +83,6 @@ export const updateRecipe = async (
 };
 
 export const setStars = async (req: Request, res: Response): Promise<void> => {
-  if (process.env.NODE_ENV === "demo") {
-    return;
-  }
   const id = parseInt(req.body.id, 10);
   const stars = parseInt(req.body.stars, 10);
   try {
@@ -105,9 +101,6 @@ export const deleteRecipe = async (
   req: Request,
   res: Response,
 ): Promise<void> => {
-  if (process.env.NODE_ENV === "demo") {
-    return;
-  }
   const id = parseInt(req.body.id, 10);
   try {
     await model.deleteRecipe(id);

backend/src/index.ts

@@ -1,24 +1,35 @@
+import "dotenv/config";
 import express, { Express } from "express";
 import cors from "cors";
 import { PrismaClient } from "@prisma/client";
+import { PrismaPg } from "@prisma/adapter-pg";
 import appRoutes from "./routes/appRoutes";
+import { initializeController } from "./controllers/recipeController";
 
 const app: Express = express();
 const port = process.env.PORT || 3000;
-const prisma = new PrismaClient();
+
+const adapter = new PrismaPg({
+  connectionString: process.env.DATABASE_URL,
+});
+
+const prisma = new PrismaClient({ adapter });
+
+initializeController(prisma);
 
 function setupMiddleware(app: Express) {
   app.use(cors());
   app.use(express.json());
   app.use("/api", appRoutes);
 }
+
 setupMiddleware(app);
 
-// Start server
 async function startServer() {
   try {
-    app.listen(port);
+    app.listen(port, () => {
       console.log(`Server is running on http://localhost:${port}`);
+    });
   } catch (error) {
     console.error("Error starting the server:", error);
   }

backend/src/models/recipeModel.ts

@@ -6,8 +6,8 @@ const logger = new Logger();
 class RecipeModel {
   private prisma: PrismaClient;
 
-  constructor() {
-    this.prisma = new PrismaClient();
+  constructor(prisma: PrismaClient) {
+    this.prisma = prisma;
   }
 
   async getAllRecipes(): Promise<any[]> {
@@ -40,11 +40,18 @@ class RecipeModel {
           prep_minutes: recipe.prep_minutes,
           cook_minutes: recipe.cook_minutes,
         },
-        ingredients: recipe.recipeIngredients.map((ing) => ing.raw),
-        steps: recipe.recipeSteps.map((step) => ({
-          step_number: step.step_number,
-          instruction: step.instruction,
-        })),
+        ingredients: recipe.recipeIngredients.map(
+          (ing: { raw: string | null }) => ing.raw,
+        ),
+        steps: recipe.recipeSteps.map(
+          (step: {
+            step_number: number | null;
+            instruction: string | null;
+          }) => ({
+            step_number: step.step_number ?? 0, // Default to 0 if null
+            instruction: step.instruction ?? "", // Default to empty string if null
+          }),
+        ),
       };
       logger.info("recipe page view", {
         recipe_id: data.details.id,

docker-compose.dev.yaml

@@ -0,0 +1,43 @@
+services:
+  db:
+    container_name: recipes_db_dev
+    image: docker.io/library/postgres:17
+    restart: unless-stopped
+    env_file:
+      - .env
+    environment:
+      - POSTGRES_USER=${DB_USER}
+      - POSTGRES_PASSWORD=${DB_PASSWORD}
+      - POSTGRES_DB=${DB_NAME}
+    ports:
+      - "${DB_PORT}:5432"
+    volumes:
+      - ./db:/var/lib/postgresql/data
+  backend:
+    container_name: recipes_backend_dev
+    restart: unless-stopped
+    build:
+      context: ./backend
+      dockerfile: Dockerfile.dev
+    ports:
+      - "${BACKEND_PORT}:3000"
+    volumes:
+      - ./backend:/app
+      - ./logs:/logs
+    environment:
+      - DB_USER=${DB_USER}
+      - DB_PASSWORD=${DB_PASSWORD}
+      - DB_NAME=${DB_NAME}
+      - DATABASE_URL=${DATABASE_URL}
+  frontend:
+    container_name: recipes_frontend_dev
+    restart: unless-stopped
+    environment:
+      - NODE_ENV=dev
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile.dev
+    ports:
+      - "${FRONTEND_PORT}:80"
+    volumes:
+      - ./frontend:/app

docker-compose.yaml

@@ -1,47 +1,34 @@
 services:
   db:
-    container_name: recipes_postgres_${ID}
+    container_name: recipes_db
     image: docker.io/library/postgres:17
-    # restart: always
+    restart: unless-stopped
     env_file:
       - .env
     environment:
       - POSTGRES_USER=${DB_USER}
       - POSTGRES_PASSWORD=${DB_PASSWORD}
       - POSTGRES_DB=${DB_NAME}
-    ports:
-      - "${DB_PORT}:5432"
     volumes:
       - ./db:/var/lib/postgresql/data
   backend:
-    image: recipes_backend
-    container_name: recipes_backend_${ID}
+    container_name: recipes_backend
+    image: forgejo.fredzernia.com/fred/recipe_app_backend:latest
+    restart: unless-stopped
     build:
       context: ./backend
-      args:
-        NODE_ENV: ${NODE_ENV}
-    ports:
-      - "${BACKEND_PORT}:3000"
     volumes:
-      - ./backend:/usr/src/app
       - ./logs:/logs
     environment:
-      - NODE_ENV=${NODE_ENV}
       - DB_USER=${DB_USER}
       - DB_PASSWORD=${DB_PASSWORD}
       - DB_NAME=${DB_NAME}
-      - DATABASE_URL=${PRISMA_DB_URL}
+      - DATABASE_URL=${DATABASE_URL}
   frontend:
-    image: recipes_frontend
-    container_name: recipes_frontend_${ID}
+    container_name: recipes_frontend
+    image: forgejo.fredzernia.com/fred/recipe_app_frontend:latest
+    restart: unless-stopped
     build:
-      context: ./backend
-      args:
-        NODE_ENV: ${NODE_ENV}
+      context: ./frontend
     ports:
       - "${FRONTEND_PORT}:80"
-    volumes:
-      - ./frontend:/usr/src/app
-      - "$FRONTEND_BUILD_DIR:/usr/src/app/dist"
-    environment:
-      - NODE_ENV=${NODE_ENV}

example.env

@@ -0,0 +1,5 @@
+DB_USER=recipe_app
+DB_PASSWORD=password
+DB_NAME=recipe_app
+FRONTEND_PORT=8080
+DATABASE_URL=postgres://${DB_USER}:${DB_PASSWORD}@db:5432/

frontend/Caddyfile

@@ -0,0 +1,13 @@
+:80 {
+  # Backend
+  handle /api/* {
+      reverse_proxy recipes_backend:3000
+  }
+
+  # Frontend
+  handle {
+      root * /srv/
+      try_files {path} /index.html
+      file_server
+  }
+}

frontend/Dockerfile

@@ -1,13 +1,15 @@
-FROM node:22-alpine
+FROM node:22-alpine AS builder
 
-WORKDIR /usr/src/app
+WORKDIR /app
+COPY package*.json tsconfig*.json postcss.config.js tailwind.config.js eslint.config.js vite.config.ts index.html ./
+COPY src ./src
 
-COPY package*.json ./
+RUN apk update && apk upgrade
+RUN npm install
+RUN npm run build
 
-RUN if [ "$NODE_ENV" = "dev" ]; then npm install; else npm install --omit=dev; fi
-
-COPY . .
+FROM caddy:2.10
+COPY Caddyfile /etc/caddy/Caddyfile
+COPY --from=builder /app/dist /srv
 
 EXPOSE 80
-
-CMD npm run $NODE_ENV

frontend/Dockerfile.dev

@@ -0,0 +1,11 @@
+FROM node:22-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install;
+
+EXPOSE 80
+
+CMD ["npm", "run", "dev"]

frontend/package-lock.json

@@ -87,6 +87,7 @@
       "integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.27.1",
@@ -1471,6 +1472,7 @@
       "integrity": "sha512-3xyG3pMCq3oYCNg7/ZP+E1ooTaGB4cG8JWRsqqOYQdbWNY4zbaV0Ennrd7stjiJEFZCaybcIgpTjJWHRfBSIDw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.10.0"
       }
@@ -1481,6 +1483,7 @@
       "integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1541,6 +1544,7 @@
       "integrity": "sha512-FuYgkHwZLuPbZjQHzJXrtXreJdFMKl16BFYyRrLxDhWr6Qr7Kbcu2s1Yhu8tsiMXw1S0W1pjfFfYEt+R604s+Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.36.0",
         "@typescript-eslint/types": "8.36.0",
@@ -1792,6 +1796,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1992,6 +1997,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001726",
         "electron-to-chromium": "^1.5.173",
@@ -2026,9 +2032,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001727",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001727.tgz",
-      "integrity": "sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==",
+      "version": "1.0.30001766",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001766.tgz",
+      "integrity": "sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==",
       "dev": true,
       "funding": [
         {
@@ -2320,6 +2326,7 @@
       "integrity": "sha512-zmxXPNMOXmwm9E0yQLi5uqXHs7uq2UIiqEKo3Gq+3fwo1XrJ+hijAZImyF7hclW3E6oHz43Yk3RP8at6OTKflQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3392,6 +3399,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -3568,6 +3576,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3577,6 +3586,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -4094,6 +4104,7 @@
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -4153,6 +4164,7 @@
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -4245,6 +4257,7 @@
       "integrity": "sha512-y2L5oJZF7bj4c0jgGYgBNSdIu+5HF+m68rn2cQXFbGoShdhV1phX9rbnxy9YXj82aS8MMsCLAAFkRxZeWdldrQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.6",
@@ -4335,6 +4348,7 @@
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },

frontend/package.json

@@ -5,9 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --host 0.0.0.0 --port 80",
-    "production": "npx tsc -b && vite build",
-    "ci": "tsc -b && vite build",
-    "lint": "eslint ."
+    "build": "tsc -b && vite build"
   },
   "dependencies": {
     "react": "^19.1.0",
@@ -15,8 +13,8 @@
     "react-router-dom": "^7.6.3"
   },
   "devDependencies": {
-    "@types/node": "^24.2.0",
     "@eslint/js": "^9.29.0",
+    "@types/node": "^24.2.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^4.5.2",

frontend/src/components/DemoModal.tsx

@@ -1,28 +0,0 @@
-import { Link } from 'react-router-dom';
-
-interface DemoModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  closeModal: () => void;
-}
-
-const DemoModal = ({ isOpen, onClose, closeModal }: DemoModalProps) => {
-  if (!isOpen) return null;
-
-  return (
-    <div className={`z-50 modal-overlay fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center`} onClick={onClose}>
-      <div className="modal-content bg-[var(--color-primaryBg)] p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
-        <div className="modal-msg">
-          <p>Thanks for checking out my app! Database write operations are disabled in demo mode.</p>
-          <p><a className="text-[var(--color-textLink)]" href="mailto:access@fredzernia.com">access@fredzernia.com</a> to request access to the production build</p>
-          <p>Find out more about this app <Link to={'/about'} className="text-blue-600">here</Link></p>
-        </div>
-        <div className="modal-buttons">
-          <button className="bg-[var(--color-buttonBg)] rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={closeModal}>OK</button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DemoModal;

frontend/src/pages/AddRecipe.tsx

@@ -1,20 +1,12 @@
-import { useState } from "react";
 import { addRecipe } from "../services/frontendApi.js";
 import { useNavigate } from "react-router-dom";
 import RecipeForm from "../components/RecipeForm.tsx";
-import DemoModal from "../components/DemoModal.tsx";
 import { type Recipe } from "../types/Recipe.ts"
 
 function AddRecipe() {
-  const [showDemoModal, setShowDemoModal] = useState(false);
   const navigate = useNavigate();
 
   const addRecipeForm = async (recipeData: Recipe) => {
-    if (process.env.NODE_ENV === "demo") {
-      setShowDemoModal(true);
-      return;
-    }
-
     const data = await addRecipe(recipeData);
     navigate(`/recipe/${data.id}`);
   };
@@ -22,13 +14,6 @@ function AddRecipe() {
   return (
     <div className="add-recipe-card page-outer">
       <RecipeForm onSubmit={addRecipeForm} />
-      {showDemoModal && (
-        <DemoModal
-          isOpen={showDemoModal}
-          onClose={() => setShowDemoModal(false)}
-          closeModal={() => setShowDemoModal(false)}
-        />
-      )}
     </div>
   );
 }

frontend/src/pages/EditRecipe.tsx

@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { getRecipeById, updateRecipe } from "../services/frontendApi.js";
 import RecipeForm from "../components/RecipeForm.tsx";
-import DemoModal from "../components/DemoModal.tsx";
 import { type Recipe } from "../types/Recipe.ts"
 
 function EditRecipe() {
@@ -10,7 +9,6 @@ function EditRecipe() {
   const navigate = useNavigate();
 
   const [recipe, setRecipe] = useState<Recipe>();
-  const [showDemoModal, setShowDemoModal] = useState(false);
 
   useEffect(() => {
     const fetchRecipe = async () => {
@@ -22,11 +20,6 @@ function EditRecipe() {
   }, [id]);
 
   const updateRecipeForm = async (recipeData: Recipe) => {
-    if (process.env.NODE_ENV === "demo") {
-      setShowDemoModal(true);
-      return;
-    }
-
     await updateRecipe(id, recipeData);
     navigate(`/recipe/${id}`);
   };
@@ -36,13 +29,6 @@ function EditRecipe() {
       {recipe && (
         <RecipeForm onSubmit={updateRecipeForm} initialData={recipe} />
       )}
-      {showDemoModal && (
-        <DemoModal
-          isOpen={showDemoModal}
-          onClose={() => setShowDemoModal(false)}
-          closeModal={() => setShowDemoModal(false)}
-        />
-      )}
     </div>
   );
 }

frontend/src/pages/RecipePage.tsx

@@ -7,7 +7,6 @@ import {
 } from "../services/frontendApi.js";
 import { type Recipe } from "../types/Recipe";
 import Modal from "../components/Modal.tsx";
-import DemoModal from "../components/DemoModal.tsx";
 import StarRating from "../components/StarRating.tsx";
 import TimeDisplay from "../components/TimeDisplay.tsx";
 
@@ -22,7 +21,6 @@ function RecipePage() {
   const [stars, setStars] = useState<number>(0);
   const [initialStars, setInitialStars] = useState<number | null>(null);
   const [showConfirmModal, setShowConfirmModal] = useState(false);
-  const [showDemoModal, setShowDemoModal] = useState(false);
   const { id } = useParams();
   const isWebSource =
     recipe && recipe.details && recipe.details.author
@@ -38,13 +36,8 @@ function RecipePage() {
   };
 
   const confirmDelete = () => {
-    if (process.env.NODE_ENV === "demo") {
-      closeModal();
-      setShowDemoModal(true);
-    } else {
     handleDelete(recipe.details.id);
     closeModal();
-    }
   };
 
   useEffect(() => {
@@ -113,13 +106,13 @@ function RecipePage() {
             <div className="flex relative justify-between">
               <div className="invisible-buttons">
                 <button
-                  onClick={() => {}}
+                  onClick={() => { }}
                   className="invisible ar-button py-1 px-1 rounded mr-2 self-start"
                 >
                   🗑️
                 </button>
                 <button
-                  onClick={() => {}}
+                  onClick={() => { }}
                   className="invisible ar-button py-1 px-1 rounded self-start"
                 >
                   🗑️
@@ -220,13 +213,6 @@ function RecipePage() {
         confirmAction={confirmDelete}
         cancelAction={closeModal}
       />
-      {showDemoModal && (
-        <DemoModal
-          isOpen={showDemoModal}
-          onClose={() => setShowDemoModal(false)}
-          closeModal={() => setShowDemoModal(false)}
-        />
-      )}
     </div>
   );
 }

shell.nix

@@ -0,0 +1,14 @@
+{ pkgs ? import <nixpkgs> {} }:
+pkgs.mkShell {
+  buildInputs = [
+    pkgs.prisma-engines
+    pkgs.prisma
+  ];
+  shellHook = ''
+    export PKG_CONFIG_PATH="${pkgs.openssl.dev}/lib/pkgconfig"
+    export PRISMA_SCHEMA_ENGINE_BINARY="${pkgs.prisma-engines}/bin/schema-engine"
+    export PRISMA_QUERY_ENGINE_BINARY="${pkgs.prisma-engines}/bin/query-engine"
+    export PRISMA_QUERY_ENGINE_LIBRARY="${pkgs.prisma-engines}/lib/libquery_engine.node"
+    export PRISMA_FMT_BINARY="${pkgs.prisma-engines}/bin/prisma-fmt"
+  '';
+}