prep/cook times and some fit and finish

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">