prep/cook times and some fit and finish

frontend/src/App.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 #root {
-  @apply mx-auto text-center max-w-screen-lg;
+  @apply mx-auto text-center max-w-screen-lg w-full;
 }
 
 .page-outer {

frontend/src/components/AddBulkIngredients.tsx

@@ -35,7 +35,7 @@ const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, on
 
   return (
     <div>
-      <p>Please enter ingredients: Quantity, Unit, Name</p>
+      <p>Please enter each ingredient on a new line:</p>
       <textarea
         rows={8}
         value={textValue}

frontend/src/components/AddBulkSteps.tsx

@@ -47,7 +47,7 @@ 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}
         value={textValue}

frontend/src/components/CookbookRecipeTile.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { type RecipeSmall } from "../types/Recipe"
 import Modal from '../components/Modal.tsx'
+import { Link } from 'react-router-dom';
 
 interface CookbookRecipeTileProps {
   recipe: RecipeSmall;
@@ -21,7 +22,7 @@ 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"><a href={`/recipe/${recipe.id}`} className="text-blue-500">{recipe.name}</a></h3>
+        <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" />

frontend/src/components/RecipeBookTabs.tsx

@@ -1,23 +1,55 @@
+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/', label: 'Recipe', icon: '🥗' },
+    { id: `/recipe/${lastViewedRecipeId}`, label: 'Recipe', icon: '🥗' },
     { id: '/add-recipe', label: 'Add Recipe', icon: '➕' },
     { id: '/about', label: 'About', icon: '🍽️' },
   ];
 
   return (
-    <div className="bg-gradient-to-b from-amber-50 to-orange-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
-      {/* Navigation Tabs */}
+    <div className="bg-amber-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
       <div className="relative h-full">
-        {/* Tab Background Line */}
         <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-amber-200"></div>
 
-        {/* Tabs Container */}
         <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/");
@@ -41,13 +73,12 @@ const RecipeBookTabs = () => {
                   <span>{tab.label}</span>
                 </div>
 
-                {/* Tab Shadow Effect */}
                 {isActive && (
                   <>
-                    <div className="absolute -left-2 bottom-0 w-2 h-2 bg-white">
+                    <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">
+                    <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>
                   </>

frontend/src/pages/About.tsx

@@ -3,9 +3,21 @@ function About() {
   return (
     <div className="about page-outer">
       <div>
-        Hello World
+        <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>
+    </div >
   )
 
 }

frontend/src/pages/AddRecipe.tsx

@@ -21,6 +21,8 @@ function AddRecipe() {
   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();
@@ -32,6 +34,8 @@ function AddRecipe() {
         name: recipeName,
         cuisine: recipeCuisine,
         author: author,
+        prep_minutes: prepMinutes,
+        cook_minutes: cookMinutes,
         stars: stars,
         ingredients: ingredients,
         steps: stepsHash
@@ -74,44 +78,67 @@ function AddRecipe() {
           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">
+            <input
+              type="checkbox"
+              checked={showBulkForm}
+              onChange={(e) => setShowBulkForm(e.target.checked)}
+              className="sr-only"
+            />
+          </div>
+        </label>
         <div>
-          <StarRating rating={stars} onRatingChange={(newRating: number) => setStars(newRating)} />
+          <AddBulkIngredients ingredients={ingredients} onChange={setIngredients} />
         </div>
-        <button type="submit" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
-          submit
-        </button>
-      </form>
-      <label className="mb-4 flex items-center cursor-pointer">
-        <div className="relative">
-          <input
-            type="checkbox"
-            checked={showBulkForm}
-            onChange={(e) => setShowBulkForm(e.target.checked)}
-            className="sr-only"
-          />
-        </div>
-        <span className="ml-3 text-amber-800 font-medium">Bulk Entry</span>
-      </label>
-      <div>
-        <AddBulkIngredients ingredients={ingredients} onChange={setIngredients} />
-      </div>
-      {/*<ul className="mb-4">
+        {/*<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">
+        <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>*/}
+        <button type="submit" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
+          submit
+        </button>
+      </form>
     </div>
   )
 }

frontend/src/pages/RecipePage.tsx

@@ -49,9 +49,6 @@ function RecipePage() {
 
     updateStarsInDB();
   }, [stars]);
-  console.log(recipe)
-  console.log(stars)
-  console.log(initialStars)
   return (
     <div className="recipe page-outer">
 
@@ -65,6 +62,7 @@ function RecipePage() {
           <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">

frontend/src/types/Recipe.ts

@@ -18,6 +18,8 @@ interface Recipe {
     author?: string;
     stars?: number;
     cuisine?: string;
+    prep_minutes?: number;
+    cook_minutes?: number;
   },
   ingredients: Ingredient[],
   steps: Step[];