build for prod

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@types/node": "^24.2.0",
         "autoprefixer": "^10.4.21",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
@@ -1464,6 +1465,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "24.2.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.2.0.tgz",
+      "integrity": "sha512-3xyG3pMCq3oYCNg7/ZP+E1ooTaGB4cG8JWRsqqOYQdbWNY4zbaV0Ennrd7stjiJEFZCaybcIgpTjJWHRfBSIDw==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.10.0"
+      }
+    },
     "node_modules/@types/react": {
       "version": "19.1.8",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
@@ -4160,6 +4170,12 @@
         "typescript": ">=4.8.4 <5.9.0"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.10.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.10.0.tgz",
+      "integrity": "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==",
+      "license": "MIT"
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",

frontend/package.json

@@ -5,13 +5,14 @@
   "type": "module",
   "scripts": {
     "dev": "vite --host 0.0.0.0 --port 80",
-    "production": "vite --host 0.0.0.0 --port 80",
+    "production": "tsc -b && vite build && vite --host 0.0.0.0 --port 80",
-    "demo": "vite --host 0.0.0.0 --port 80",
+    "demo": "tsc -b && vite build && vite --host 0.0.0.0 --port 80",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/node": "^24.2.0",
     "autoprefixer": "^10.4.21",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

frontend/src/components/AddIngredientsForm.tsx

@@ -1,79 +0,0 @@
-import React, { useState } from 'react';
-import { type Ingredient } from "../types/Recipe";
-
-interface AddIngredientFormProps {
-  ingredients: Ingredient[];
-  onSubmit?: (ingredients: Ingredient[]) => void;
-}
-
-const AddIngredientsForm: React.FC<AddIngredientFormProps> = ({ ingredients, onSubmit }) => {
-  const [newIngredient, setNewIngredient] = useState<Partial<Ingredient>>({});
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setNewIngredient(prev => ({ ...prev, [name]: value }));
-  };
-
-  const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const { name, value } = e.target;
-    setNewIngredient(prev => ({ ...prev, [name]: value }));
-  };
-
-  const handleIngredientSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!newIngredient.name || !newIngredient.quantity || !newIngredient.unit) {
-      return;
-    }
-
-    const newIngredientObj: Ingredient = {
-      quantity: parseFloat(newIngredient.quantity.toString()),
-      unit: newIngredient.unit,
-      name: newIngredient.name
-    };
-
-    const updatedIngredients = [...ingredients, newIngredientObj];
-
-
-    setNewIngredient({});
-
-    if (onSubmit) onSubmit(updatedIngredients);
-  };
-
-  return (
-    <div>
-      <form onSubmit={handleIngredientSubmit}>
-        <input
-          type="number"
-          name="quantity"
-          placeholder="Quantity"
-          value={(newIngredient.quantity !== undefined ? newIngredient.quantity : '')}
-          onChange={handleChange}
-        />
-
-        <select
-          name="unit"
-          value={newIngredient.unit || ''}
-          onChange={handleSelectChange}
-        >
-          <option value="">Select Unit</option>
-          <option value="grams">Grams</option>
-          <option value="kilograms">Kilograms</option>
-          <option value="cups">Cups</option>
-        </select>
-
-        <input
-          type="text"
-          name="name"
-          placeholder="Ingredient Name"
-          value={newIngredient.name || ''}
-          onChange={handleChange}
-        />
-
-        <button type="submit">Add Ingredient</button>
-      </form>
-    </div>
-  );
-};
-
-export default AddIngredientsForm;

frontend/src/components/AddStepsForm.tsx

@@ -1,51 +0,0 @@
-import React, { useState } from 'react';
-import { type Step } from "../types/Recipe";
-
-interface AddStepFormProps {
-  steps: Step[];
-  onSubmit?: (steps: Step[]) => void;
-}
-
-const AddStepsForm: React.FC<AddStepFormProps> = ({ steps, onSubmit }) => {
-  const [newStep, setNewStep] = useState<Partial<Step>>({});
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setNewStep(prev => ({ ...prev, [name]: value }));
-  }
-
-  const handleStepSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!newStep.instructions) {
-      return;
-    }
-
-    const newStepObj: Step = {
-      idx: steps.length + 1,
-      instructions: newStep.instructions
-    }
-
-    const updatedSteps = [...steps, newStepObj];
-
-    setNewStep({});
-    if (onSubmit) onSubmit(updatedSteps)
-
-  }
-
-  return (
-    <div>
-      <form onSubmit={handleStepSubmit}>
-        <input
-          type="text"
-          name="instructions"
-          value={newStep.instructions || ''}
-          onChange={handleChange}
-        />
-        <button type="submit">Add Step</button>
-      </form>
-    </div>
-  )
-}
-
-export default AddStepsForm

frontend/src/components/CookbookRecipeTile.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { type RecipeSmall } from "../types/Recipe"
 import Modal from '../components/Modal.tsx'
 import DemoModal from '../components/DemoModal.tsx'

frontend/src/components/RecipeBookTabs.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useState, useEffect } from "react";
 import { Link, useLocation } from 'react-router-dom';
 import { getRecipes } from "../services/frontendApi.js";

frontend/src/components/StarRating.tsx

@@ -7,7 +7,7 @@ const StarRating = ({ rating, onRatingChange }: StarRatingProps) => {
 
   return (
     <div>
-      {[...Array(5)].map((star, index) => {
+      {[...Array(5)].map((_, index) => {
         index += 1;
         return (
           <span

frontend/src/pages/AddRecipe.tsx

@@ -38,7 +38,7 @@ function AddRecipe() {
     if (recipeName && recipeCuisine && Object.keys(stepsHash).length > 0 && ingredients.length > 0) {
       const recipeData = {
         name: recipeName,
-        cuisine: recipeCuisine,
+        cuisine: recipeCuisine.toLowerCase(),
         author: author,
         prep_minutes: prepMinutes,
         cook_minutes: cookMinutes,
@@ -92,7 +92,7 @@ function AddRecipe() {
               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)}
+              onChange={(e) => setPrepMinutes(parseInt(e.target.value))}
             />
             <span className="ml-2">minutes</span>
           </div>
@@ -103,7 +103,7 @@ function AddRecipe() {
               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)}
+              onChange={(e) => setCookMinutes(parseInt(e.target.value))}
             />
             <span className="ml-2">minutes</span>
           </div>

frontend/vite.config.ts

@@ -5,6 +5,7 @@ import react from "@vitejs/plugin-react";
 export default defineConfig({
   plugins: [react()],
   server: {
+    hmr: false,
     allowedHosts: ["recipe-prod.fredzernia.com", "recipe-demo.fredzernia.com"],
   },
 });