styling

backend/backendServer.js

@@ -12,7 +12,7 @@ app.use(express.json());
 // ### GET ALL RECIPES ###
 app.get("/recipes", async (req, res) => {
   try {
-    const recipes = await db('recipes').select('id', 'name');
+    const recipes = await db('recipes').select('id', 'name', 'cuisine');
     res.json(recipes);
   } catch (err) {
     console.log(err);

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "autoprefixer": "^10.4.21",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.6.3"
@@ -23,6 +24,7 @@
     "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

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

frontend/src/App.css

@@ -1,42 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 #root {
-  max-width: 1280px;
+  @apply mx-auto text-center;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
 }
 
-.logo {
+page-outer {
-  height: 6em;
+  @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;
-  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

@@ -2,21 +2,24 @@ import "./App.css";
 import Cookbook from "./pages/Cookbook.tsx";
 import RecipePage from "./pages/RecipePage.tsx";
 import AddRecipe from "./pages/AddRecipe.tsx";
-import NavBar from "./components/NavBar.tsx";
+import Search from "./pages/Search.tsx"
+
+import RecipeBookTabs from "./components/RecipeBookTabs.tsx";
 import { Routes, Route } from "react-router-dom";
 
 function App() {
   return (
-    <>
+    <div className="min-h-screen flex flex-col">
-      <NavBar />
+      <RecipeBookTabs />
-      <main className="main-content">
+      <main className="flex-1 overflow-auto">
         <Routes>
           <Route path="/" element={<Cookbook />} />
           <Route path="/recipe/:id" element={<RecipePage />} />
           <Route path="/add-recipe" element={<AddRecipe />} />
+          <Route path="/search" element={<Search />} />
         </Routes>
       </main>
-    </>
+    </div>
   );
 }
 export default App;

frontend/src/components/AddBulkIngredients.tsx

@@ -59,13 +59,13 @@ const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, on
     <div>
       <p>Please enter ingredients: Quantity, Unit, Name</p>
       <textarea
-        rows={4}
+        rows={8}
-        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

@@ -45,13 +45,13 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
     <div>
       <p>Please enter each step on a new line</p>
       <textarea
-        rows={4}
+        rows={8}
-        cols={50}
         value={textValue}
         onChange={handleInputChange}
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
-        placeholder="Enter ingredients separated by newline..."
+        placeholder="Enter steps separated by newline..."
+        className="mb-4 p-2 border border-gray-300 rounded w-full"
       />
     </div>
   );

frontend/src/components/CookbookRecipeTile.tsx

@@ -19,12 +19,15 @@ function CookbookRecipeTile({ recipe, handleDelete }: CookbookRecipeTileProps) {
 
 
   return (
-    <div className="recipe-card">
+    <div className="recipe-card m-2 bg-amber-300 p-4 rounded shadow">
-      <div className="recipe-info">
+      <div className="flex justify-between items-center recipe-name">
-        <h3><a href={`/recipe/${recipe.id}`}>{recipe.name}</a></h3>
+        <h3 className="font-bold"><a href={`/recipe/${recipe.id}`} className="text-blue-500">{recipe.name}</a></h3>
-        <button onClick={openModal}>Delete Recipe</button>
+        <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>
-
       <Modal
         isOpen={isModalOpen}
         onClose={closeModal}
@@ -34,6 +37,6 @@ function CookbookRecipeTile({ recipe, handleDelete }: CookbookRecipeTileProps) {
       />
     </div>
   );
-}
+};
 
 export default CookbookRecipeTile;

frontend/src/components/NavBar.tsx

@@ -1,19 +0,0 @@
-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

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+const RecipeBookTabs = () => {
+  const location = useLocation();
+
+  const tabs = [
+    { id: '/', label: 'All Recipes', icon: '📚' },
+    { id: '/recipe/', label: 'Recipe', icon: '🥗' },
+    { id: '/search', label: 'Search', 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="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/");
+
+            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>
+
+                {/* Tab Shadow Effect */}
+                {isActive && (
+                  <>
+                    <div className="absolute -left-2 bottom-0 w-2 h-2 bg-white">
+                      <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 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

@@ -1,26 +0,0 @@
-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/RecipesContainer.tsx

@@ -0,0 +1,23 @@
+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 RecipesContainer({ recipes }) => {
+
+  return (
+    <div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
+      <h1 className="text-center text-3xl sm:text-4xl md:text-5xl font-bold mb-6 text-amber-800">Recipe Index</h1>
+      <div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
+        {recipes.map((recipe) => (
+          <CookbookRecipeTile recipe={recipe} key={recipe.id} handleDelete={handleDelete} />
+        ))}
+      </div>
+    </div>
+
+  )
+}
+
+return default RecipesContainer

frontend/src/index.css

@@ -1,10 +1,10 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  /* font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; */
-  line-height: 1.5;
+  /* line-height: 1.5; */
-  font-weight: 400;
+  /* font-weight: 400; */
-
+  /**/
-  color-scheme: light dark;
+  /* color-scheme: light dark; */
-  color: rgba(255, 255, 255, 0.87);
+  /* color: rgba(255, 255, 255, 0.87); */
   background-color: #242424;
 
   font-synthesis: none;
@@ -13,15 +13,6 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
 body {
   margin: 0;
   display: flex;
@@ -29,40 +20,3 @@ 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/AddRecipe.tsx

@@ -43,33 +43,51 @@ function AddRecipe() {
   }, [newRecipeId, navigate]);
 
   return (
-    <div className="add-recipe-outer">
+    <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">
       <form onSubmit={addRecipeForm} className="add-recipe-form">
         <input
           type="text"
           placeholder="name"
-          className="recipe-name"
+          className="recipe-name mb-4 p-2 border border-gray-300 rounded w-full"
           value={recipeName}
           onChange={(e) => setRecipeName(e.target.value)}
         />
         <input
           type="text"
           placeholder="cuisine"
-          className="recipe-cusine"
+          className="recipe-cusine mb-4 p-2 border border-gray-300 rounded w-full"
           value={recipeCuisine}
           onChange={(e) => setRecipeCuisine(e.target.value)}
         />
-        <button type="submit" className="ar-button">
+        <button type="submit" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
           submit
         </button>
       </form>
-      <label>
+      <label className="mb-4 flex items-center cursor-pointer">
-        <input
+        <div className="relative">
-          type="checkbox"
+          <input
-          checked={showBulkForm}
+            type="checkbox"
-          onChange={(e) => setShowBulkForm(e.target.checked)}
+            checked={showBulkForm}
-        />
+            onChange={(e) => setShowBulkForm(e.target.checked)}
-        Bulk Entry
+            className="sr-only"
+          />
+          <div className={`
+            w-12 h-6 rounded-full shadow-sm transition-all duration-75 transform
+            ${showBulkForm
+              ? 'bg-amber-300 shadow-lg'
+              : 'bg-amber-100 hover:bg-amber-200'
+            }
+          `}>
+            <div className={`
+              absolute top-0.5 left-0.5 w-5 h-5 rounded-full shadow-sm transition-all duration-100 transform
+              ${showBulkForm
+                ? 'translate-x-6 bg-white border-2 border-amber-400'
+                : 'translate-x-0 bg-white border-2 border-amber-200'
+              }
+            `}></div>
+          </div>
+        </div>
+        <span className="ml-3 text-amber-800 font-medium">Bulk Entry</span>
       </label>
       <div>
         {showBulkForm ?
@@ -77,22 +95,24 @@ function AddRecipe() {
           <AddIngredientsForm ingredients={ingredients} onSubmit={setIngredients} />
         }
       </div>
-      <div>
+      <ul className="mb-4">
-        <ul>
+        {ingredients.map((ing, index) => (
-          {ingredients.map((ing, index) => (
+          <li key={index} className="text-gray-700 flex items-start mb-2">
-            <li key={index}>{`${ing.quantity} ${ing.unit} ${ing.name}`}</li>
+            <span>{`${ing.quantity} ${ing.unit} ${ing.name}`}</span>
-          ))}
+          </li>
-        </ul>
+        ))}
-      </div>
+      </ul>
       <div>
         {showBulkForm ?
           <AddBulkSteps steps={steps} onChange={setSteps} /> :
           <AddStepsForm steps={steps} onSubmit={setSteps} />
         }
       </div>
-      <ul>
+      <ul className="mb-4">
         {steps.map((step) => (
-          <li key={step.idx}>{`${step.idx}. ${step.instructions}`}</li>
+          <li key={step.idx} className="text-gray-700 flex items-start mb-2">
+            <span>{`${step.idx}. ${step.instructions}`}</span>
+          </li>
         ))}
       </ul>
     </div>

frontend/src/pages/Cookbook.tsx

@@ -38,16 +38,17 @@ function Cookbook() {
 
   return (
     <div className="home">
-
       {error && <div className="error-message">{error}</div>}
-
       {loading ? (
         <div className="loading">Loading...</div>
       ) : (
-        <div className="recipes-grid">
+        <div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
-          {recipes.map((recipe: Recipe) => (
+          <h1 className="text-center text-3xl sm:text-4xl md:text-5xl font-bold mb-6 text-amber-800">Recipe Index</h1>
-            <CookbookRecipeTile recipe={recipe} key={recipe.id} handleDelete={handleDelete} />
+          <div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
-          ))}
+            {recipes.map((recipe) => (
+              <CookbookRecipeTile recipe={recipe} key={recipe.id} handleDelete={handleDelete} />
+            ))}
+          </div>
         </div>
       )}
     </div>

frontend/src/pages/RecipePage.tsx

@@ -1,8 +1,7 @@
-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 } from "../types/Recipe"
+import { type Recipe, type Ingredient } from "../types/Recipe"
 
 function RecipePage() {
   const [recipe, setRecipe] = useState<Recipe>({
@@ -29,7 +28,7 @@ function RecipePage() {
     };
     loadRecipe();
   }, [id]);
-
+  console.log(recipe)
   return (
     <div className="recipe">
 
@@ -38,8 +37,53 @@ function RecipePage() {
       {loading ? (
         <div className="loading">Loading...</div>
       ) : (
-        <div className="recipe-card">
+
-          <RecipeCard recipe={recipe} key={recipe.details.id} />
+        <div className="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">
+          <div className="border-b-2 border-amber-300 pb-4 mb-6">
+            <h3 className="text-2xl md: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>
+          </div>
+
+          <div className="grid md: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.quantity} {ingredient.unit} {ingredient.name}</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">
+                      {stepNumber}
+                    </span>
+                    <span className="leading-relaxed">{recipe.steps[parseInt(stepNumber)]}</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">
+              <span>From the Kitchen of</span>
+              <span>★ ★ ★</span>
+            </div>
+          </div>
         </div>
       )}
     </div>

frontend/src/pages/Search.tsx

@@ -0,0 +1,72 @@
+import { useState, useEffect } from "react";
+import CookbookRecipeTile from "../components/CookbookRecipeTile.tsx"
+import { getRecipes, deleteRecipe } from "../services/frontendApi.js";
+import { type Recipe } from "../types/Recipe"
+
+
+
+
+function Search() {
+  const [searchQuery, setSearchQuery] = useState("");
+  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="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">
+      <form onSubmit={() => { }} className="add-recipe-form">
+        <input
+          type="text"
+          placeholder="name"
+          className="recipe-name mb-4 p-2 border border-gray-300 rounded w-full"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
+        <button type="submit" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
+          submit
+        </button>
+      </form>
+      {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">
+            {recipes.map((recipe) => (
+              recipe.name.toLowerCase().startsWith(searchQuery) && <CookbookRecipeTile recipe={recipe} key={recipe.id} handleDelete={handleDelete} />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Search

frontend/tailwind.config.js

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