.gitignore

@@ -1,5 +1,4 @@
 examp_frontend/
 postgres/db
 */.env
-.env
 todo

backend/.gitignore

@@ -1,2 +1 @@
 node_modules
-scratch

backend/Dockerfile

@@ -1,14 +0,0 @@
-FROM node:22
-
-WORKDIR /usr/src/app
-
-COPY package*.json ./
-
-RUN npm install
-
-COPY . .
-
-EXPOSE 3000
-
-# CMD ["npm", "run", "dev"]
-CMD npm run $NODE_ENV

backend/backendServer.js

@@ -1,75 +1,51 @@
 const express = require("express");
 const db = require("./db");
-const port = 3000;
-const cors = require("cors");
+const port = 6063;
+const cors = require('cors'); // to remove cors origin error in dev TODO: remove when dockerized
 
 const app = express();
-app.use(cors());
+app.use(cors());  // to remove cors origin error in dev TODO: remove when dockerized
 app.use(express.json());
 
 // ####### ROUTES #######
-app.get("/backend/test", async (req, res) => {
-  console.log("test");
-  res.json({ test: "test" });
-});
+
 // ### GET ALL RECIPES ###
-app.get("/backend/recipes", async (req, res) => {
+app.get("/recipes", async (req, res) => {
   try {
-    const recipes = await db("recipes").select("id", "name", "cuisine");
+    const recipes = await db('recipes').select('id', 'name');
     res.json(recipes);
   } catch (err) {
     console.log(err);
     res.status(500).json({ error: err.message });
   }
 });
-// ### GET ALL RECIPE_INGREDIENTS ###
-app.get("/backend/recipe-ingredients", async (req, res) => {
-  try {
-    const recipe_ingredients = await db("recipe_ingredients").select("*");
-    res.json(recipe_ingredients);
-  } catch (err) {
-    console.log(err);
-    res.status(500).json({ error: err.message });
-  }
-});
-// ### GET ALL RECIPE_STEPS ###
-app.get("/backend/recipe-steps", async (req, res) => {
-  try {
-    const recipe_steps = await db("recipe_steps").select("*");
-    res.json(recipe_steps);
-  } catch (err) {
-    console.log(err);
-    res.status(500).json({ error: err.message });
-  }
-});
 
 // ### GET RECIPE ###
-app.get("/backend/recipe/:id", async (req, res) => {
-  const id = req.params.id;
+app.get("/recipe/:id", async (req, res) => {
+  const id = req.params.id
   try {
-    const recipeQuery = db("recipes")
-      .where("id", "=", id)
-      .select("id", "name", "author", "cuisine", "stars", "prep_minutes", "cook_minutes");
+    const recipeQuery = db('recipes').where('id', '=', id).select('id', 'name', 'cuisine');
 
-    const ingredientsQuery = db
-      .from("recipe_ingredients")
-      .where("recipe_id", "=", id)
-      .select("raw");
+    const ingredientsQuery = db.from('recipe_ingredients as ri')
+      .join('ingredients as i', 'ri.ingredient_id', 'i.id')
+      .where('ri.recipe_id', id)
+      .select('i.name', 'ri.quantity', 'ri.unit');
 
-    const stepsQuery = db("recipe_steps")
-      .where("recipe_id", id)
-      .select("step_number", "instruction");
+    const stepsQuery = db('recipe_steps').where('recipe_id', id).select('step_number', 'instruction');
 
-    const [recipe, ingredients, steps] = await Promise.all([
-      recipeQuery,
-      ingredientsQuery,
-      stepsQuery,
-    ]);
+    const [recipe, ingredients, steps] = await Promise.all([recipeQuery, ingredientsQuery, stepsQuery]);
 
     const result = {
       details: recipe[0],
-      ingredients: ingredients,
-      steps: steps,
+      ingredients: ingredients.map(ingredient => ({
+        name: ingredient.name,
+        quantity: ingredient.quantity,
+        unit: ingredient.unit
+      })),
+      steps: steps.reduce((acc, step) => {
+        acc[step.step_number] = step.instruction;
+        return acc;
+      }, {})
     };
 
     res.json(result);
@@ -80,34 +56,45 @@ app.get("/backend/recipe/:id", async (req, res) => {
 });
 
 // ### ADD RECIPE ###
-app.post("/backend/add-recipe", async (req, res) => {
-  const { name, author, cuisine, stars, ingredients, steps, prep_minutes, cook_minutes } = req.body;
+app.post("/add-recipe", async (req, res) => {
+  const { name, cuisine, ingredients, steps } = req.body;
   try {
-    const [id] = await db("recipes").insert(
-      {
+    const [id] = await db('recipes').insert({
       name: name,
-        author: author,
-        cuisine: cuisine,
-        prep_minutes: prep_minutes,
-        cook_minutes: cook_minutes,
-        stars: stars,
-      },
-      ["id"],
-    );
+      cuisine: cuisine
+    }, ['id'])
 
-    const ingredientInserts = ingredients.map((ing) => ({
-      recipe_id: id.id,
-      raw: ing,
+    const existingIngredients = await db('ingredients').whereIn('name', ingredients.map(ing => ing.name));
+    let ingredientData = [];
+    for (let ingredient of ingredients) {
+      const existingIngredient = existingIngredients.find(ing => ing.name === ingredient.name);
+      if (!existingIngredient) {
+        // create the ingredient if there is no entry
+        const [newIngredient] = await db('ingredients').insert({
+          name: ingredient.name
+        }, ['id']);
+        ingredientData.push({ id: newIngredient.id, quantity: ingredient.quantity, unit: ingredient.unit });
+      } else {
+        // if the ingredient exists use existing entry
+        ingredientData.push({ id: existingIngredient.id, quantity: ingredient.quantity, unit: ingredient.unit });
+      }
+    }
+
+    const ingredientInserts = ingredientData.map(ing => ({
+      ingredient_id: ing.id,
+      quantity: ing.quantity,
+      unit: ing.unit,
+      recipe_id: id.id
     }));
-    //
-    await db("recipe_ingredients").insert(ingredientInserts);
+    await db('recipe_ingredients').insert(ingredientInserts);
 
-    const stepInserts = Object.keys(steps).map((stepNumber) => ({
+    // Step 4: Insert steps into recipe_steps
+    const stepInserts = Object.keys(steps).map(stepNumber => ({
       recipe_id: id.id,
       step_number: parseInt(stepNumber),
-      instruction: steps[stepNumber],
+      instruction: steps[stepNumber]
     }));
-    await db("recipe_steps").insert(stepInserts);
+    await db('recipe_steps').insert(stepInserts);
 
     res.status(200).send({ message: "Recipe added", id: id.id });
   } catch (err) {
@@ -116,25 +103,11 @@ app.post("/backend/add-recipe", async (req, res) => {
   }
 });
 
-// ### SET STARS ###
-app.post("/backend/set-stars", async (req, res) => {
-  const { id, stars } = req.body;
-  try {
-    await db("recipes").where({ id: id }).update({ stars: stars });
-    res.status(200).send({ message: "stars updated" });
-  } catch (err) {
-    console.log(err);
-    res.status(500).json({ error: err.message });
-  }
-});
-
 // ### DELETE RECIPE ###
-app.delete("/backend/delete-recipe", async (req, res) => {
+app.delete("/delete-recipe", async (req, res) => {
   const { id } = req.body;
   try {
-    await db("recipe_steps").where({ recipe_id: id }).del();
-    await db("recipe_ingredients").where({ recipe_id: id }).del();
-    await db("recipes").where({ id: id }).del();
+    await db('recipes').where({ id: id }).del();
     res.status(200).send({ message: "Recipe deleted" });
   } catch (err) {
     console.log(err);
@@ -144,8 +117,8 @@ app.delete("/backend/delete-recipe", async (req, res) => {
 
 app.listen(port, () => console.log(`Server has started on port: ${port}`));
 
-process.on("SIGINT", async () => {
-  console.log("Closing database connection...");
+process.on('SIGINT', async () => {
+  console.log('Closing database connection...');
   await db.destroy();
   process.exit(0);
 });

backend/db.js

@@ -1,7 +1,7 @@
 const knex = require('knex');
 const knexConfig = require('./knexfile.js');
 
-const environment = process.env.NODE_ENV || 'dev';
+const environment = process.env.NODE_ENV || 'development';
 const config = knexConfig[environment];
 
 const db = knex(config);

backend/knexfile.js

@@ -1,41 +1,40 @@
-require("dotenv").config();
+require('dotenv').config();
 
 module.exports = {
-  dev: {
-    client: "postgresql",
-    connection: {
-      host: "db",
-      port: 5432,
-      database: process.env.DB_NAME,
-      user: process.env.DB_USER,
-      password: process.env.DB_PASSWORD,
-    },
-    pool: {
-      min: 2,
-      max: 10,
-    },
-    migrations: {
-      tableName: "knex_migrations",
-      directory: "./migrations",
-    },
-  },
 
-  production: {
-    client: "postgresql",
+  development: {
+    client: 'postgresql',
     connection: {
-      host: "db",
+      host: process.env.DB_HOST,
       port: process.env.DB_PORT,
       database: process.env.DB_NAME,
       user: process.env.DB_USER,
-      password: process.env.DB_PASSWORD,
+      password: process.env.DB_PASSWORD
     },
     pool: {
       min: 2,
-      max: 10,
+      max: 10
     },
     migrations: {
-      tableName: "knex_migrations",
-      directory: "./migrations",
+      tableName: 'knex_migrations',
+      directory: './migrations'
+    }
   },
+
+  production: {
+    client: 'postgresql',
+    connection: {
+      database: 'my_db',
+      user: 'username',
+      password: 'password'
     },
+    pool: {
+      min: 2,
+      max: 10
+    },
+    migrations: {
+      tableName: 'knex_migrations'
+    }
+  }
+
 };

backend/migrations/20250717181149_add_raw_ingredients_table.js

@@ -1,24 +0,0 @@
-/**
- * @param { import("knex").Knex } knex
- * @returns { Promise<void> }
- */
-exports.up = function (knex) {
-  return knex.schema.table('recipe_ingredients', table => {
-    table.string('raw', 255).defaultTo('');
-    table.integer('ingredient_id').nullable().alter();
-    table.string('quantity').nullable().alter();
-    table.string('unit').nullable().alter();
-  }).table('recipe_steps', table => {
-    table.string('instruction', 510).alter();
-  });
-};
-
-/**
- * @param { import("knex").Knex } knex
- * @returns { Promise<void> }
- */
-exports.down = function (knex) {
-  return knex.schema.table('recipe_ingredients', table => {
-    table.dropColumn('raw');
-  });
-};

backend/migrations/20250724163016_add_author_stars_to_recipes.js

@@ -1,22 +0,0 @@
-/**
- * @param { import("knex").Knex } knex
- * @returns { Promise<void> }
- */
-exports.up = function (knex) {
-
-  return knex.schema.table('recipes', table => {
-    table.string('author');
-    table.integer('stars');
-  })
-};
-
-/**
- * @param { import("knex").Knex } knex
- * @returns { Promise<void> }
- */
-exports.down = function (knex) {
-  return knex.schema.table('recipes', table => {
-    table.dropColumn('author');
-    table.dropColumn('stars')
-  })
-};

backend/migrations/20250728174922_add_times_recipes.js

@@ -1,22 +0,0 @@
-/**
- * @param { import("knex").Knex } knex
- * @returns { Promise<void> }
- */
-exports.up = function (knex) {
-
-  return knex.schema.table('recipes', table => {
-    table.integer('prep_minutes');
-    table.integer('cook_minutes');
-  })
-};
-
-/**
- * @param { import("knex").Knex } knex
- * @returns { Promise<void> }
- */
-exports.down = function (knex) {
-  return knex.schema.table('recipes', table => {
-    table.dropColumn('prep_minutes');
-    table.dropColumn('cook_minutes')
-  })
-};

backend/package.json

@@ -4,8 +4,7 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "node backendServer.js",
-    "production": "node backendServer.js"
+    "dev": "node backendServer.js"
   },
   "keywords": [],
   "author": "",

docker-compose.yaml

@@ -1,44 +0,0 @@
-services:
-  db:
-    container_name: recipes_postgres
-    image: docker.io/library/postgres:17
-    # restart: always
-    env_file:
-      - .env
-    environment:
-      - POSTGRES_USER=${DB_USER}
-      - POSTGRES_PASSWORD=${DB_PASSWORD}
-      - POSTGRES_DB=${DB_NAME}
-    ports:
-      - "${DB_PORT}:5432"
-    volumes:
-      - ./postgres/db:/var/lib/postgresql/data
-  backend:
-    image: recipes_backend
-    container_name: recipes_backend
-    build:
-      context: ./backend
-      args:
-        NODE_ENV: ${NODE_ENV}
-    ports:
-      - "3000:3000"
-    volumes:
-      - ./backend:/usr/src/app
-    environment:
-      - NODE_ENV=${NODE_ENV}
-      - DB_USER=${DB_USER}
-      - DB_PASSWORD=${DB_PASSWORD}
-      - DB_NAME=${DB_NAME}
-  frontend:
-    image: recipes_frontend
-    container_name: recipes_frontend
-    build:
-      context: ./backend
-      args:
-        NODE_ENV: ${NODE_ENV}
-    ports:
-      - "8081:80"
-    volumes:
-      - ./frontend:/usr/src/app
-    environment:
-      - NODE_ENV=${NODE_ENV}

frontend/Dockerfile

@@ -1,14 +0,0 @@
-FROM node:22
-
-WORKDIR /usr/src/app
-
-COPY package*.json ./
-
-RUN npm install
-
-COPY . .
-
-EXPOSE 80
-
-# CMD ["npm", "run", "$NODE_ENV"]
-CMD npm run $NODE_ENV

frontend/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Recipe App</title>
+    <title>Dev Recipe App</title>
   </head>
   <body>
     <div id="root"></div>

frontend/package.json

@@ -4,14 +4,12 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --host 0.0.0.0 --port 80",
-    "production": "vite --host 0.0.0.0 --port 80",
+    "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
-    "autoprefixer": "^10.4.21",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.6.3"
@@ -25,7 +23,6 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.2.0",
-    "tailwindcss": "^3.4.17",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.34.1",
     "vite": "^7.0.0"

frontend/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

frontend/public/icon.svg

@@ -1 +0,0 @@
-<svg width="800px" height="800px" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--noto" preserveAspectRatio="xMidYMid meet"><path d="M5.01 52.21c-1.14 2.55-2.24 27.27 12.35 44.04c10.89 12.51 25.62 17.63 45.02 18.36s38.13-5.78 47.13-16.09c16.25-18.63 14.55-41.06 13.7-44.4c-2.15-8.46-19.07-14.44-58.56-14.44c-36.72.02-56.72 6-59.64 12.53z" fill="#6bb8fe"></path><path d="M93.71 49.99c.41-.1 8.04.74 8.19.64s3.37-7.58 3.37-7.58s-2.87-.6-4.25-.86c-1.38-.24-7.31 7.8-7.31 7.8z" fill="#1d89fe"></path><path d="M33.39 100.91c-1.57 1.89-10.9-3.51-17.11-16.13c-5.44-11.05-5.3-17.05-4.28-18c1.34-1.25 5.26-.09 6.15 2.76c1.2 3.84 1.16 8.29 5.35 16.49c6.37 12.47 11.23 13.27 9.89 14.88z" fill="#e0ebf6"></path><path d="M12.27 54.07c.56 6.06 20.79 9.72 52.79 10.26c32 .54 52.25-3.92 52.25-9.59s-21.2-9.72-50.9-9.99s-54.68 3.52-54.14 9.32z" fill="#1d89fe"></path><path d="M96.29 62.95l6.93-15.18l-8.85-1.32l-11.22 1.73l-7.41 16.08s7.41-.11 11.82-.44c4.41-.34 8.73-.87 8.73-.87z" fill="#025abc"></path><path d="M82.64 64.11S98 47.63 106.71 38.61s16.4-15.86 16.55-18.52c.19-3.42-6.34-4.91-6.34-4.91L75.74 60.97l-1.09 3.27s2.96.08 4.43 0c1.49-.08 3.56-.13 3.56-.13z" fill="#9d9c9c"></path><path d="M116.78 15.12s4.79 1.05 4.58 2.87c-.27 2.36-2.18 4.35-4.52 6.76S79.08 64.23 79.08 64.23l-3.37.1l-.4-1.72l41.47-47.49z" fill="#e0e0e0"></path><path d="M68.18 64.36S80.91 48.5 92.04 35.27s16.53-20.44 18.09-20.91s9.33.99 9.61 1.98c.4 1.38-.12 2.77-4.17 6.97c-4.05 4.2-39.07 41-39.07 41s-1.81.06-3.58.07s-4.74-.02-4.74-.02z" fill="#c8c8c8"></path><path d="M110.57 16.88c-2.3.83-9.94 9.08-7.93 9.94c1.62.7 6.58-4.72 9.22-6.22c2.64-1.5 4.22-.79 4.5-2c.29-1.22-3.43-2.58-5.79-1.72z" fill="#ffffff"></path></svg>

frontend/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

frontend/src/App.css

@@ -1,11 +1,42 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 #root {
-  @apply mx-auto text-center max-w-screen-lg w-full;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
 }
 
-.page-outer {
-  @apply bg-amber-100 border border-amber-200 rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif;
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
 }

frontend/src/App.tsx

@@ -1,29 +1,22 @@
 import "./App.css";
-import Index from "./pages/Index.tsx";
+import Cookbook from "./pages/Cookbook.tsx";
 import RecipePage from "./pages/RecipePage.tsx";
 import AddRecipe from "./pages/AddRecipe.tsx";
-import About from "./pages/About.tsx"
-import RecipeIngredients from "./pages/RecipeIngredients.tsx"
-import RecipeSteps from "./pages/RecipeSteps.tsx"
-
-import RecipeBookTabs from "./components/RecipeBookTabs.tsx";
+import NavBar from "./components/NavBar.tsx";
 import { Routes, Route } from "react-router-dom";
 
 function App() {
   return (
-    <div className="min-h-screen flex flex-col">
-      <RecipeBookTabs />
-      <main className="flex-1 overflow-auto">
+    <>
+      <NavBar />
+      <main className="main-content">
         <Routes>
-          <Route path="/" element={<Index />} />
+          <Route path="/" element={<Cookbook />} />
           <Route path="/recipe/:id" element={<RecipePage />} />
           <Route path="/add-recipe" element={<AddRecipe />} />
-          <Route path="/about" element={<About />} />
-          <Route path="/recipe-ingredients" element={<RecipeIngredients />} />
-          <Route path="/recipe-steps" element={<RecipeSteps />} />
         </Routes>
       </main>
-    </div>
+    </>
   );
 }
 export default App;

frontend/src/components/AddBulkIngredients.tsx

@@ -1,22 +1,44 @@
 import React, { useState, useEffect } from 'react';
+import { type Ingredient } from "../types/Recipe";
 
 interface AddBulkIngredientsProps {
-  ingredients: string[];
-  onChange?: (ingredients: string[]) => void;
+  ingredients: Ingredient[];
+  onChange?: (ingredients: Ingredient[]) => void;
 }
 
 const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, onChange }) => {
   const [textValue, setTextValue] = useState<string>('');
 
   useEffect(() => {
-    const textRepresentation = ingredients.join('\n');
+    const textRepresentation = ingredients.map(ingredient =>
+      `${ingredient.quantity} ${ingredient.unit} ${ingredient.name}`
+    ).join('\n');
     setTextValue(textRepresentation);
   }, [ingredients]);
 
   const parseAndUpdate = (value: string) => {
     const lines = value.split('\n').filter(line => line.trim() !== '');
+    const pattern = /^([0-9/.]+)?\s*(\S+)\s*((\w+\s*)*)$/;
 
-    if (onChange) onChange(lines);
+    const parsedIngredients = lines.map(line => {
+      const parts = line.match(pattern);
+      let quantity = 0;
+      if (parts?.[1]) {
+        const [num, denom] = parts[1].split('/');
+        if (denom) {
+          quantity = parseFloat(num) / parseFloat(denom);
+        } else {
+          quantity = parseFloat(parts[1]);
+        }
+      }
+      return {
+        quantity: +quantity.toFixed(2),
+        unit: parts?.[2]?.trim() || '',
+        name: parts?.[3]?.trim() || ''
+      };
+    });
+
+    if (onChange) onChange(parsedIngredients);
   };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -35,15 +57,15 @@ const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, on
 
   return (
     <div>
-      <p>Please enter each ingredient on a new line:</p>
+      <p>Please enter ingredients: Quantity, Unit, Name</p>
       <textarea
-        rows={8}
+        rows={4}
+        cols={50}
         value={textValue}
         onChange={handleInputChange}
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
         placeholder="Enter ingredients separated by newline..."
-        className="mb-4 p-2 border border-gray-300 rounded w-full"
       />
     </div>
   );

frontend/src/components/AddBulkSteps.tsx

@@ -1,9 +1,5 @@
 import React, { useState, useEffect } from 'react';
-
-interface Step {
-  step_number: number;
-  instruction: string;
-}
+import { type Step } from "../types/Recipe";
 
 interface AddBulkStepsProps {
   steps: Step[];
@@ -15,7 +11,7 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
 
   useEffect(() => {
     const textRepresentation = steps.map(step =>
-      `${step.instruction}`
+      `${step.instructions}`
     ).join('\n');
     setTextValue(textRepresentation);
   }, [steps]);
@@ -28,8 +24,8 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
   const parseAndUpdate = (value: string) => {
     const lines = value.split('\n').filter(line => line.trim() !== '');
 
-    const parsedSteps: Step[] = lines.map((line, idx) => {
-      return { step_number: idx + 1, instruction: line }
+    const parsedSteps = lines.map((line, idx) => {
+      return { idx: idx + 1, instructions: line }
     })
 
     if (onChange) onChange(parsedSteps);
@@ -47,15 +43,15 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
 
   return (
     <div>
-      <p>Please enter each step on a new line:</p>
+      <p>Please enter each step on a new line</p>
       <textarea
-        rows={8}
+        rows={4}
+        cols={50}
         value={textValue}
         onChange={handleInputChange}
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
-        placeholder="Enter steps separated by newline..."
-        className="mb-4 p-2 border border-gray-300 rounded w-full"
+        placeholder="Enter ingredients separated by newline..."
       />
     </div>
   );

frontend/src/components/CookbookRecipeTile.tsx

@@ -1,18 +1,17 @@
 import React, { useState } from 'react';
-import { type RecipeSmall } from "../types/Recipe"
+import { type Recipe } from "../types/Recipe"
 import Modal from '../components/Modal.tsx'
-import { Link } from 'react-router-dom';
 
 interface CookbookRecipeTileProps {
-  recipe: RecipeSmall;
+  recipe: Recipe;
   handleDelete: (id: number | undefined) => void;
 }
 
 function CookbookRecipeTile({ recipe, handleDelete }: CookbookRecipeTileProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const openModal = () => { setIsModalOpen(true) };
-  const closeModal = () => { setIsModalOpen(false) };
+  const openModal = () => setIsModalOpen(true);
+  const closeModal = () => setIsModalOpen(false);
   const confirmDelete = () => {
     handleDelete(recipe.id);
     closeModal();
@@ -20,15 +19,12 @@ function CookbookRecipeTile({ recipe, handleDelete }: CookbookRecipeTileProps) {
 
 
   return (
-    <div className="recipe-card m-2 bg-amber-300 p-4 rounded shadow">
-      <div className="flex justify-between items-center recipe-name">
-        <h3 className="font-bold"><Link to={`/recipe/${recipe.id}`} className="text-blue-500">{recipe.name}</Link></h3>
-        <button onClick={openModal} className="text-red-500 focus:outline-none">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
-            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
+    <div className="recipe-card">
+      <div className="recipe-info">
+        <h3><a href={`/recipe/${recipe.id}`}>{recipe.name}</a></h3>
+        <button onClick={openModal}>Delete Recipe</button>
       </div>
+
       <Modal
         isOpen={isModalOpen}
         onClose={closeModal}
@@ -38,6 +34,6 @@ function CookbookRecipeTile({ recipe, handleDelete }: CookbookRecipeTileProps) {
       />
     </div>
   );
-};
+}
 
 export default CookbookRecipeTile;

frontend/src/components/Modal.tsx

@@ -1,3 +1,5 @@
+import "../css/Modal.css"
+
 interface ModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -10,14 +12,14 @@ const Modal = ({ isOpen, onClose, message, confirmAction, cancelAction }: ModalP
   if (!isOpen) return null;
 
   return (
-    <div className="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-amber-200 p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
         <div className="modal-msg">
           <span aria-labelledby="message">{message}</span>
         </div>
         <div className="modal-buttons">
-          <button className="bg-amber-600 rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={confirmAction}>Yes, Delete</button>
-          <button className="bg-amber-600 rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={cancelAction}>Cancel</button>
+          <button onClick={confirmAction}>Yes, Delete</button>
+          <button onClick={cancelAction}>Cancel</button>
         </div>
       </div>
     </div>

frontend/src/components/NavBar.tsx

@@ -0,0 +1,19 @@
+import { Link } from "react-router-dom";
+import "../css/Navbar.css";
+
+function NavBar() {
+  return (
+    <nav className="navbar">
+      <div className="navbar-links">
+        <Link to="/" className="nav-link">
+          Cookbook
+        </Link>
+        <Link to="/add-recipe" className="nav-link">
+          Add Recipe
+        </Link>
+      </div>
+    </nav>
+  );
+}
+
+export default NavBar;

frontend/src/components/RecipeBookTabs.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import { useState, useEffect } from "react";
-import { Link, useLocation } from 'react-router-dom';
-import { getRecipes } from "../services/frontendApi.js";
-
-const RecipeBookTabs = () => {
-  const location = useLocation();
-  const [lastViewedRecipeId, setLastViewedRecipeId] = useState<number | null>(null);
-
-  const loadRandomRecipeId = async () => {
-    try {
-      const recipes = await getRecipes();
-      if (recipes.length > 0) {
-        const randomIndex = Math.floor(Math.random() * recipes.length);
-        setLastViewedRecipeId(recipes[randomIndex].id);
-      }
-    } catch (error) {
-      console.error('Error loading recipes:', error);
-    }
-  };
-
-  // update lastViewedRecipe id if we navigate to /recipe/${id}
-  useEffect(() => {
-    const match = /^\/recipe\/(\d+)$/.exec(location.pathname);
-    if (match) {
-      setLastViewedRecipeId(parseInt(match[1]));
-    }
-  }, [location.pathname, lastViewedRecipeId]);
-
-  // choose random recipe on first load
-  useEffect(() => {
-    if (!lastViewedRecipeId) {
-      loadRandomRecipeId();
-    } else {
-      console.log('id found', lastViewedRecipeId)
-
-    }
-  }, []);
-
-
-  const tabs = [
-    { id: '/', label: 'All Recipes', icon: '📚' },
-    { id: `/recipe/${lastViewedRecipeId}`, label: 'Recipe', icon: '🥗' },
-    { id: '/add-recipe', label: 'Add Recipe', icon: '➕' },
-    { id: '/about', label: 'About', icon: '🍽️' },
-  ];
-
-  return (
-    <div className="bg-amber-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
-      <div className="relative h-full">
-        <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-amber-200"></div>
-
-        <div className="flex space-x-1 px-6 pt-4 h-full items-end justify-center">
-          {tabs.map((tab) => {
-            const isActive = location.pathname === tab.id || (location.pathname.startsWith(tab.id) && tab.id === "/recipe/");
-
-            return (
-              <Link
-                key={tab.id}
-                to={tab.id}
-                className={`
-                  relative px-6 py-3 rounded-t-lg font-medium text-sm transform
-                  ${isActive
-                    ? 'bg-amber-100 text-amber-800 scale-105 z-10 border-t-2 border-amber-200'
-                    : 'bg-amber-200 text-amber-600 hover:bg-amber-100 hover:text-amber-700 hover:scale-102 shadow-sm'
-                  }
-                  before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5 
-                  ${isActive ? '' : ''}
-                `}
-              >
-                <div className="flex items-center space-x-2">
-                  <span className="text-lg">{tab.icon}</span>
-                  <span>{tab.label}</span>
-                </div>
-
-                {isActive && (
-                  <>
-                    <div className={`absolute -left-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/' ? 'hidden' : ''}`}>
-                      <div className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div>
-                    </div>
-                    <div className={`absolute -right-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/about' ? 'hidden' : ''}`}>
-                      <div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
-                    </div>
-                  </>
-                )}
-              </Link>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default RecipeBookTabs;

frontend/src/components/RecipeCard.tsx

@@ -0,0 +1,26 @@
+import { type Recipe, type Ingredient } from "../types/Recipe"
+
+function RecipeCard({ recipe }: { recipe: Recipe }) {
+  return (
+    <div className="recipe-card">
+      <div className="recipe-info">
+        <h3>{recipe.details.name}</h3>
+        <p>{recipe.details.cuisine}</p>
+        <h4>Ingredients:</h4>
+        <ul>
+          {recipe.ingredients.map((ingredient: Ingredient, index) => (
+            <li key={index}>{ingredient.quantity} {ingredient.unit} {ingredient.name}</li>
+          ))}
+        </ul>
+        <h4>Steps:</h4>
+        <ol>
+          {recipe.steps && Object.keys(recipe.steps || {}).map((stepNumber) => (
+            <li key={stepNumber}>{recipe.steps?.[parseInt(stepNumber)]}</li>
+          ))}
+        </ol>
+      </div>
+    </div>
+  );
+}
+
+export default RecipeCard;

frontend/src/components/StarRating.tsx

@@ -1,26 +0,0 @@
-interface StarRatingProps {
-  rating: number;
-  onRatingChange: (newRating: number) => void;
-}
-
-const StarRating = ({ rating, onRatingChange }: StarRatingProps) => {
-
-  return (
-    <div>
-      {[...Array(5)].map((star, index) => {
-        index += 1;
-        return (
-          <span
-            key={index}
-            onClick={() => onRatingChange(index)}
-            style={{ color: index <= rating ? 'gold' : 'gray', fontSize: '2rem', cursor: 'pointer' }}
-          >
-            ★
-          </span>
-        );
-      })}
-    </div>
-  );
-};
-
-export default StarRating;

frontend/src/css/Modal.css

@@ -0,0 +1,23 @@
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  background: darkblue;
+  padding: 50px;
+  border-radius: 5px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.modal-content button {
+  background: gray;
+  margin: 1em;
+}

frontend/src/css/Navbar.css

@@ -0,0 +1,47 @@
+.navbar {
+  background-color: #000000;
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.navbar-brand {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.navbar-links {
+  display: flex;
+  gap: 2rem;
+}
+
+.nav-link {
+  font-size: 1rem;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.nav-link:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+@media (max-width: 768px) {
+  .navbar {
+    padding: 1rem;
+  }
+
+  .navbar-brand {
+    font-size: 1.2rem;
+  }
+
+  .navbar-links {
+    gap: 1rem;
+  }
+
+  .nav-link {
+    padding: 0.5rem;
+  }
+}

frontend/src/index.css

@@ -1,10 +1,10 @@
 :root {
-  /* font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; */
-  /* line-height: 1.5; */
-  /* font-weight: 400; */
-  /**/
-  /* color-scheme: light dark; */
-  /* color: rgba(255, 255, 255, 0.87); */
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
   background-color: #242424;
 
   font-synthesis: none;
@@ -13,6 +13,15 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
 body {
   margin: 0;
   display: flex;
@@ -20,3 +29,40 @@ body {
   min-width: 320px;
   min-height: 100vh;
 }
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

frontend/src/pages/About.tsx

@@ -1,25 +0,0 @@
-function About() {
-
-  return (
-    <div className="about page-outer">
-      <div>
-        <h2 className="text-xl">Hi,</h2>
-        <h2 className="text-xl">I am Fred.</h2>
-        <h2 className="text-xl">I made this app using the following components:</h2>
-        <h2 className="mt-4 font-bold text-xl">Frontend:</h2>
-        <ul><li>React</li><li>TypeScript</li><li>Vite</li></ul>
-        <h2 className="mt-4 font-bold text-xl">Backend:</h2>
-        <ul><li>Node.js & Express</li><li>PostgreSQL</li></ul>
-        <h2 className="mt-4 font-bold text-xl">Containerization:</h2>
-        <ul><li>Docker</li></ul>
-        <h2 className="mt-4 font-bold text-xl">Styling/UI:</h2>
-        <ul><li>Tailwind CSS</li></ul>
-        <p className="mt-4">More about me <a className="text-blue-600" target="_blank" href="https://fredzernia.com">here</a> |
-          Code for this app <a className="text-blue-600" target="_blank" href="https://forgejo.fredzernia.com/fred/recipe_app">here</a></p>
-      </div>
-    </div >
-  )
-
-}
-
-export default About

frontend/src/pages/AddRecipe.tsx

@@ -2,41 +2,29 @@ import React, { useState } from 'react';
 import { addRecipe } from "../services/frontendApi.js";
 import { useNavigate } from "react-router-dom";
 import AddBulkIngredients from "../components/AddBulkIngredients.tsx"
+import AddIngredientsForm from "../components/AddIngredientsForm.tsx"
+import AddStepsForm from "../components/AddStepsForm.tsx"
 import AddBulkSteps from "../components/AddBulkSteps.tsx"
-import StarRating from "../components/StarRating.tsx"
-// import { type Step } from "../types/Recipe";
-
-interface Step {
-  step_number: number;
-  instruction: string;
-}
+import { type Ingredient, type Step } from "../types/Recipe";
 
 function AddRecipe() {
   const [newRecipeId, setNewRecipeId] = useState<number | null>(null);
   const navigate = useNavigate();
-  const [ingredients, setIngredients] = useState<string[]>([]);
+  const [ingredients, setIngredients] = useState<Ingredient[]>([]);
   const [steps, setSteps] = useState<Step[]>([]);
   const [showBulkForm, setShowBulkForm] = useState(true);
   const [recipeName, setRecipeName] = useState("");
   const [recipeCuisine, setRecipeCuisine] = useState("");
-  const [author, setAuthor] = useState("");
-  const [stars, setStars] = useState(0);
-  const [prepMinutes, setPrepMinutes] = useState(5);
-  const [cookMinutes, setCookMinutes] = useState(5);
 
   const addRecipeForm = async (event: React.FormEvent) => {
     event.preventDefault();
     const stepsHash = Object.fromEntries(
-      steps.map(step => [step.step_number, step.instruction])
+      steps.map(step => [step.idx, step.instructions])
     );
     if (recipeName && recipeCuisine && Object.keys(stepsHash).length > 0 && ingredients.length > 0) {
       const recipeData = {
         name: recipeName,
         cuisine: recipeCuisine,
-        author: author,
-        prep_minutes: prepMinutes,
-        cook_minutes: cookMinutes,
-        stars: stars,
         ingredients: ingredients,
         steps: stepsHash
       }
@@ -55,90 +43,58 @@ function AddRecipe() {
   }, [newRecipeId, navigate]);
 
   return (
-    <div className="add-recipe-card page-outer">
+    <div className="add-recipe-outer">
       <form onSubmit={addRecipeForm} className="add-recipe-form">
         <input
           type="text"
-          placeholder="recipe name"
-          className="recipe-name mb-4 p-2 border border-gray-300 rounded w-full"
+          placeholder="name"
+          className="recipe-name"
           value={recipeName}
           onChange={(e) => setRecipeName(e.target.value)}
         />
         <input
           type="text"
           placeholder="cuisine"
-          className="recipe-cusine mb-4 p-2 border border-gray-300 rounded w-full"
+          className="recipe-cusine"
           value={recipeCuisine}
           onChange={(e) => setRecipeCuisine(e.target.value)}
         />
-        <input
-          type="text"
-          placeholder="author or source"
-          className="recipe-cusine mb-4 p-2 border border-gray-300 rounded w-full"
-          value={author}
-          onChange={(e) => setAuthor(e.target.value)}
-        />
-        <div className="flex items-center justify-between mb-4">
-          <div>
-            <label htmlFor="prepTime" className="mr-2 font-bold">Prep Time:</label>
-            <input
-              type="number"
-              placeholder="prep time in minutes"
-              className="recipe-cusine p-2 border border-gray-300 rounded w-24"
-              value={prepMinutes}
-              onChange={(e) => setPrepMinutes(e.target.value)}
-            />
-            <span className="ml-2">minutes</span>
-          </div>
-          <div>
-            <label htmlFor="cookTime" className="mr-2 font-bold">Cook Time:</label>
-            <input
-              type="text"
-              placeholder="cook time in minutes"
-              className="recipe-cusine p-2 border border-gray-300 rounded w-24"
-              value={cookMinutes}
-              onChange={(e) => setCookMinutes(e.target.value)}
-            />
-            <span className="ml-2">minutes</span>
-          </div>
-          <div>
-            <StarRating rating={stars} onRatingChange={(newRating: number) => setStars(newRating)} />
-          </div>
-        </div>
-        <label className="mb-4 flex items-center cursor-pointer">
-          <div className="relative">
+        <button type="submit" className="ar-button">
+          submit
+        </button>
+      </form>
+      <label>
         <input
           type="checkbox"
           checked={showBulkForm}
           onChange={(e) => setShowBulkForm(e.target.checked)}
-              className="sr-only"
         />
-          </div>
+        Bulk Entry
       </label>
       <div>
-          <AddBulkIngredients ingredients={ingredients} onChange={setIngredients} />
+        {showBulkForm ?
+          <AddBulkIngredients ingredients={ingredients} onChange={setIngredients} /> :
+          <AddIngredientsForm ingredients={ingredients} onSubmit={setIngredients} />
+        }
       </div>
-        {/*<ul className="mb-4">
-        {ingredients.map((ing, index) => (
-          <li key={index} className="text-gray-700 flex items-start mb-2">
-            <span>{ing}</span>
-          </li>
-        ))}
-      </ul>*/}
       <div>
-          <AddBulkSteps steps={steps} onChange={setSteps} />
-        </div>
-        {/*<ul className="mb-4">
-        {steps.map((step) => (
-          <li key={step.step_number} className="text-gray-700 flex items-start mb-2">
-            <span>{`${step.step_number}. ${step.instruction}`}</span>
-          </li>
+        <ul>
+          {ingredients.map((ing, index) => (
+            <li key={index}>{`${ing.quantity} ${ing.unit} ${ing.name}`}</li>
           ))}
-      </ul>*/}
-        <button type="submit" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
-          submit
-        </button>
-      </form>
+        </ul>
+      </div>
+      <div>
+        {showBulkForm ?
+          <AddBulkSteps steps={steps} onChange={setSteps} /> :
+          <AddStepsForm steps={steps} onSubmit={setSteps} />
+        }
+      </div>
+      <ul>
+        {steps.map((step) => (
+          <li key={step.idx}>{`${step.idx}. ${step.instructions}`}</li>
+        ))}
+      </ul>
     </div>
   )
 }

frontend/src/pages/Cookbook.tsx

@@ -0,0 +1,57 @@
+import CookbookRecipeTile from "../components/CookbookRecipeTile.tsx"
+import { useState, useEffect } from "react";
+import { getRecipes, deleteRecipe } from "../services/frontendApi.js";
+import { type Recipe } from "../types/Recipe"
+
+function Cookbook() {
+  const [recipes, setRecipes] = useState([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [shouldFetchRecipes, setShouldFetchRecipes] = useState(true);
+
+  useEffect(() => {
+    const loadRecipes = async () => {
+      try {
+        const recipes = await getRecipes();
+        setRecipes(recipes);
+      } catch (error) {
+        console.log(error);
+        setError("Failed to load recipes...");
+      } finally {
+        setLoading(false);
+      }
+    };
+    if (shouldFetchRecipes) {
+      loadRecipes().then(() => setShouldFetchRecipes(false));
+    }
+  }, [shouldFetchRecipes]);
+
+  const handleDelete = async (id: number | void) => {
+    try {
+      await deleteRecipe(id);
+      setShouldFetchRecipes(true);
+    } catch (error) {
+      console.error("Error deleting recipe:", error);
+    }
+  };
+
+
+  return (
+    <div className="home">
+
+      {error && <div className="error-message">{error}</div>}
+
+      {loading ? (
+        <div className="loading">Loading...</div>
+      ) : (
+        <div className="recipes-grid">
+          {recipes.map((recipe: Recipe) => (
+            <CookbookRecipeTile recipe={recipe} key={recipe.id} handleDelete={handleDelete} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Cookbook;

frontend/src/pages/Index.tsx

@@ -1,86 +0,0 @@
-import { useState, useEffect } from "react";
-import CookbookRecipeTile from "../components/CookbookRecipeTile.tsx"
-import { getRecipes, deleteRecipe } from "../services/frontendApi.js";
-import { type RecipeSmall } from "../types/Recipe.ts"
-
-
-function AllRecipes() {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [recipes, setRecipes] = useState<RecipeSmall[]>([]);
-  const [cuisines, setCuisines] = useState<string[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [shouldFetchRecipes, setShouldFetchRecipes] = useState(true);
-  const [selectedCuisine, setSelectedCuisine] = useState("");
-
-  useEffect(() => {
-    const loadRecipes = async () => {
-      try {
-        const recipes = await getRecipes();
-        setRecipes(recipes);
-        console.log(recipes)
-        const uniqueCuisines: string[] = recipes.length > 0
-          ? Array.from(new Set(recipes.map((recipe: RecipeSmall) => recipe.cuisine)))
-          : [];
-        setCuisines(uniqueCuisines)
-        console.log(cuisines)
-      } catch (error) {
-        console.log(error);
-        setError("Failed to load recipes...");
-      } finally {
-        setLoading(false);
-      }
-    };
-    if (shouldFetchRecipes) {
-      loadRecipes().then(() => setShouldFetchRecipes(false));
-    }
-  }, [shouldFetchRecipes]);
-
-  const handleDelete = async (id: number | void) => {
-    try {
-      await deleteRecipe(id);
-      setShouldFetchRecipes(true);
-    } catch (error) {
-      console.error("Error deleting recipe:", error);
-    }
-  };
-  const filteredRecipes = selectedCuisine ? recipes.filter(recipe => recipe.cuisine === selectedCuisine) : recipes;
-
-  return (
-    <div className="add-recipe-card bg-amber-100 border border-amber-200 rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif">
-      <h1 className="text-center text-3xl sm:text-4xl md:text-5xl font-bold mb-6 text-amber-800">Recipe Index</h1>
-      <div className="cuisines-buttons flex flex-wrap justify-center">
-        <input
-          type="text"
-          placeholder="search"
-          className="recipe-name mb-4 p-2 border border-gray-300 rounded w-full"
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-        />
-        {cuisines.map((cuisine) => (
-          <button
-            key={cuisine}
-            className={`ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700 m-2 ${selectedCuisine === cuisine ? 'selected bg-amber-800' : ''}`}
-            onClick={() => setSelectedCuisine((prevState => prevState === cuisine ? "" : cuisine))}
-          >
-            {cuisine}
-          </button>
-        ))}
-      </div>      {error && <div className="error-message">{error}</div>}
-      {loading ? (
-        <div className="loading">Loading...</div>
-      ) : (
-        <div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
-          <div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
-            {filteredRecipes.map((recipe) => (
-              recipe.name.toLowerCase().startsWith(searchQuery) &&
-              <CookbookRecipeTile recipe={recipe} key={recipe.id} handleDelete={handleDelete} />
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default AllRecipes

frontend/src/pages/RecipeIngredients.tsx

@@ -1,48 +0,0 @@
-import { getRecipeIngredients } from "../services/frontendApi.js";
-import { useState, useEffect } from "react";
-import { type Ingredient } from "../types/Recipe.ts"
-
-function RecipeIngredients() {
-
-  const [recipeIngredients, setRecipeIngredients] = useState<Ingredient[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const loadRecipeIngredients = async () => {
-      try {
-        const recipeIngredients = await getRecipeIngredients();
-        setRecipeIngredients(recipeIngredients);
-        console.log(recipeIngredients)
-      } catch (err) {
-        console.log(err);
-        setError("Failed to load recipe ingredients...");
-        console.log(error)
-      } finally {
-        setLoading(false);
-      }
-    };
-    loadRecipeIngredients();
-  }, []);
-  console.log(recipeIngredients)
-  return (
-    // should this be a string[]? only if we are only returning raw. otherwise i will need to type and return the ingredient object. This template shoudl work for steps though, so maybe setting that up is a good first step
-    <div className='page-outer'>
-      {loading ? (
-        <div className="loading">Loading...</div>
-      ) : (
-        <div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
-          <div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
-            {recipeIngredients.map(ing => (
-              <li key={ing.id}>
-                {ing.raw}
-              </li>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-
-}
-export default RecipeIngredients

frontend/src/pages/RecipePage.tsx

@@ -1,32 +1,24 @@
+import RecipeCard from "../components/RecipeCard.tsx"
 import { useParams } from "react-router-dom";
 import { useState, useEffect } from "react";
 import { getRecipeById } from "../services/frontendApi.js";
-import { type Recipe, type Ingredient } from "../types/Recipe"
-import StarRating from "../components/StarRating.tsx"
-import { setDBStars } from "../services/frontendApi.js";
+import { type Recipe } from "../types/Recipe"
 
 function RecipePage() {
   const [recipe, setRecipe] = useState<Recipe>({
     details: {},
     ingredients: [],
-    steps: []
+    steps: {}
   });
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const { id } = useParams();
-  const isWebSource = recipe && recipe.details && recipe.details.author
-    ? /http|com/.test(recipe.details.author) //etc
-    : false;
-  const [stars, setStars] = useState<number>(0);
-  const [initialStars, setInitialStars] = useState<number | null>(null);
 
   useEffect(() => {
     const loadRecipe = async () => {
       try {
         const recipe = await getRecipeById(id);
         setRecipe(recipe);
-        setStars(recipe.details?.stars ?? 0)
-        setInitialStars(recipe.details?.stars ?? 0);
         console.log(recipe)
       } catch (error) {
         console.log(error);
@@ -38,79 +30,16 @@ function RecipePage() {
     loadRecipe();
   }, [id]);
 
-  useEffect(() => {
-    if (initialStars === null || initialStars === stars) {
-      return;
-    }
-
-    const updateStarsInDB = async () => {
-      await setDBStars(id, stars);
-    };
-
-    updateStarsInDB();
-  }, [stars]);
   return (
-    <div className="recipe page-outer">
+    <div className="recipe">
 
       {error && <div className="error-message">{error}</div>}
 
       {loading ? (
         <div className="loading">Loading...</div>
       ) : (
-
         <div className="recipe-card">
-          <div className="border-b-2 border-amber-300 pb-4 mb-6">
-            <h3 className="text-2xl lg:text-3xl font-bold text-amber-900 mb-2">{recipe.details.name}</h3>
-            <p className="text-amber-700 italic text-lg">{recipe.details.cuisine}</p>
-            <p>prep: {recipe.details.prep_minutes} min | cook: {recipe.details.cook_minutes} min</p>
-          </div>
-
-          <div className="grid lg:grid-cols-2 gap-6 mb-6">
-            <div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
-              <h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
-                <span className="w-2 h-2 bg-amber-500 rounded-full mr-2"></span>
-                Ingredients:
-              </h4>
-              <ul className="space-y-2">
-                {recipe.ingredients.map((ingredient: Ingredient, index) => (
-                  <li key={index} className="text-gray-700 flex items-start">
-                    <span className="w-1.5 h-1.5 bg-amber-400 rounded-full mt-2 mr-3 flex-shrink-0"></span>
-                    <span className="font-medium">{ingredient.raw}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            <div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
-              <h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
-                <span className="w-2 h-2 bg-amber-500 rounded-full mr-2"></span>
-                Instructions:
-              </h4>
-              <ol className="space-y-3">
-                {recipe.steps && Object.keys(recipe.steps || {}).map((stepNumber) => (
-                  <li key={stepNumber} className="text-gray-700 flex items-start">
-                    <span className="bg-amber-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold mr-3 mt-0.5 flex-shrink-0">
-                      {recipe.steps[parseInt(stepNumber)].step_number}
-                    </span>
-                    <span className="leading-relaxed">{recipe.steps[parseInt(stepNumber)].instruction}</span>
-                  </li>
-                ))}
-              </ol>
-            </div>
-          </div>
-
-          <div className="border-t-2 border-amber-300 pt-4">
-            <div className="flex justify-between items-center text-sm text-amber-600">
-              {isWebSource ? (
-                <span>Source: {recipe.details.author}</span>
-              ) : (
-                <span>From the kitchen of {recipe.details.author}</span>
-              )}
-              <span>
-                <StarRating rating={stars} onRatingChange={(newRating: number) => setStars(newRating)} />
-              </span>
-            </div>
-          </div>
+          <RecipeCard recipe={recipe} key={recipe.details.id} />
         </div>
       )}
     </div>

frontend/src/pages/RecipeSteps.tsx

@@ -1,47 +0,0 @@
-import { getRecipeSteps } from "../services/frontendApi.js";
-import { useState, useEffect } from "react";
-import { type Step } from "../types/Recipe.ts"
-
-function RecipeSteps() {
-
-  const [recipeSteps, setRecipeSteps] = useState<Step[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const loadRecipeSteps = async () => {
-      try {
-        const recipeSteps = await getRecipeSteps();
-        setRecipeSteps(recipeSteps);
-        console.log(recipeSteps)
-      } catch (err) {
-        console.log(err);
-        setError("Failed to load recipe ingredients...");
-        console.log(error)
-      } finally {
-        setLoading(false);
-      }
-    };
-    loadRecipeSteps();
-  }, []);
-  console.log(recipeSteps)
-  return (
-    <div className='page-outer'>
-      {loading ? (
-        <div className="loading">Loading...</div>
-      ) : (
-        <div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
-          <div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
-            {recipeSteps.map(step => (
-              <li key={step.id}>
-                {step.instruction}
-              </li>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-
-}
-export default RecipeSteps

frontend/src/services/frontendApi.js

@@ -1,65 +1,38 @@
-const baseUrl = process.env.NODE_ENV === 'production'
-  ? '/'
-  : 'http://localhost:3000/';
-
 export const getRecipes = async () => {
-  const response = await fetch(`${baseUrl}backend/recipes`);
-  const data = await response.json();
-  return data;
-};
-
-export const getRecipeSteps = async () => {
-  const response = await fetch(`${baseUrl}backend/recipe-steps`);
-  const data = await response.json();
-  return data;
-};
-
-export const getRecipeIngredients = async () => {
-  const response = await fetch(`${baseUrl}backend/recipe-ingredients`);
+  const response = await fetch("http://localhost:6063/recipes");
   const data = await response.json();
   return data;
 };
 
 export const getRecipeById = async (id) => {
-  const response = await fetch(`${baseUrl}backend/recipe/${id}`);
+  const response = await fetch(`http://localhost:6063/recipe/${id}`);
   const data = await response.json();
   return data;
 };
 
 export const addRecipe = async (recipeData) => {
-  console.log(JSON.stringify(recipeData));
+  console.log(JSON.stringify(recipeData))
   // return
-  const response = await fetch(`${baseUrl}backend/add-recipe`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(recipeData),
+  const response = await fetch("http://localhost:6063/add-recipe", {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(recipeData)
   });
   const data = await response.json();
-  console.log(data);
-  return data;
-};
-
-export const setDBStars = async (id, stars) => {
-  console.log(JSON.stringify({ id: id, stars: stars }));
-  // return
-  const response = await fetch(`${baseUrl}backend/set-stars`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ id: id, stars: stars }),
-  });
-  const data = await response.json();
-  console.log(data);
+  console.log(data)
   return data;
 };
 
 export const deleteRecipe = async (id) => {
-  console.log(id);
+  console.log('run delete')
+  console.log(id)
   // return
-  const response = await fetch(`${baseUrl}backend/delete-recipe`, {
-    method: "DELETE",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ id }),
+  const response = await fetch("http://localhost:6063/delete-recipe", {
+    method: 'DELETE',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ id })
   });
   const data = await response.json();
   return data;
 };
+

frontend/src/types/Recipe.ts

@@ -1,35 +1,22 @@
 interface Step {
-  id: number;
-  step_number: number;
-  instruction: string;
+  idx: number;
+  instructions: string;
 }
 
 interface Ingredient {
-  id?: number;
-  name?: string;
-  quantity?: number;
-  unit?: string;
-  raw?: string;
+  name: string;
+  quantity: number;
+  unit: string;
 }
 interface Recipe {
   details: {
     id?: number;
     name?: string;
-    author?: string;
-    stars?: number;
     cuisine?: string;
-    prep_minutes?: number;
-    cook_minutes?: number;
   },
   ingredients: Ingredient[],
-  steps: Step[];
-}
-// smaller Recipe type returned by backend at /recipes for all
-interface RecipeSmall {
-  id: number;
-  name: string;
-  cuisine: string;
+  steps?: Step[];
 }
 
 
-export type { Recipe, Ingredient, Step, RecipeSmall }
+export type { Recipe, Ingredient, Step }

frontend/tailwind.config.js

@@ -1,12 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
-

frontend/vite.config.ts

@@ -1,11 +1,7 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-  server: {
-    host: "ec683cee72d30c5030.fredzernia.com",
-    allowedHosts: ["ec683cee72d30c5030.fredzernia.com"],
-  },
-});
+})

postgres/docker-compose.yaml

@@ -10,6 +10,6 @@ services:
       - POSTGRES_PASSWORD=${DB_PASSWORD}
       - POSTGRES_DB=${DB_NAME}
     ports:
-      - "5432:5432"
+      - "${DB_PORT}:5432"
     volumes:
       - ./db:/var/lib/postgresql/data