fred/recipe_app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

prep/cook times and some fit and finish

Browse source
This commit is contained in:
fred 2025-07-29 09:34:33 -07:00
parent a3b0fffe45
commit 9656888cb7
14 changed files with 141 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

6
backend/backendServer.js
View file

@ -49,7 +49,7 @@ app.get("/backend/recipe/:id", async (req, res) => {
try { try {
const recipeQuery = db("recipes") const recipeQuery = db("recipes")
.where("id", "=", id) .where("id", "=", id)
.select("id", "name", "author", "cuisine", "stars"); .select("id", "name", "author", "cuisine", "stars", "prep_minutes", "cook_minutes");
const ingredientsQuery = db const ingredientsQuery = db
.from("recipe_ingredients") .from("recipe_ingredients")
@ -81,13 +81,15 @@ app.get("/backend/recipe/:id", async (req, res) => {
// ### ADD RECIPE ### // ### ADD RECIPE ###
app.post("/backend/add-recipe", async (req, res) => { app.post("/backend/add-recipe", async (req, res) => {
const { name, author, cuisine, stars, ingredients, steps } = req.body; const { name, author, cuisine, stars, ingredients, steps, prep_minutes, cook_minutes } = req.body;
try { try {
const [id] = await db("recipes").insert( const [id] = await db("recipes").insert(
{ {
name: name, name: name,
author: author, author: author,
cuisine: cuisine, cuisine: cuisine,
prep_minutes: prep_minutes,
cook_minutes: cook_minutes,
stars: stars, stars: stars,
}, },
["id"], ["id"],

22
backend/migrations/20250728174922_add_times_recipes.js Normal file
View file

@ -0,0 +1,22 @@
/**
* @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')
})
};

4
frontend/index.html
View file

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

1
frontend/public/icon.svg Normal file
View file

@ -0,0 +1 @@
<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>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
frontend/public/vite.svg
View file

@ -1 +0,0 @@
<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>
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

2
frontend/src/App.css
View file

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

2
frontend/src/components/AddBulkIngredients.tsx
View file

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

2
frontend/src/components/AddBulkSteps.tsx
View file

@ -47,7 +47,7 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
return ( return (
<div> <div>
<p>Please enter each step on a new line</p> <p>Please enter each step on a new line:</p>
<textarea <textarea
rows={8} rows={8}
value={textValue} value={textValue}

3
frontend/src/components/CookbookRecipeTile.tsx
View file

@ -1,6 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { type RecipeSmall } from "../types/Recipe" import { type RecipeSmall } from "../types/Recipe"
import Modal from '../components/Modal.tsx' import Modal from '../components/Modal.tsx'
import { Link } from 'react-router-dom';
interface CookbookRecipeTileProps { interface CookbookRecipeTileProps {
recipe: RecipeSmall; recipe: RecipeSmall;
@ -21,7 +22,7 @@ function CookbookRecipeTile({ recipe, handleDelete }: CookbookRecipeTileProps) {
return ( return (
<div className="recipe-card m-2 bg-amber-300 p-4 rounded shadow"> <div className="recipe-card m-2 bg-amber-300 p-4 rounded shadow">
<div className="flex justify-between items-center recipe-name"> <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"> <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"> <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" /> <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />

47
frontend/src/components/RecipeBookTabs.tsx
View file

@ -1,23 +1,55 @@
import React from 'react';
import { useState, useEffect } from "react";
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import { getRecipes } from "../services/frontendApi.js";
const RecipeBookTabs = () => { const RecipeBookTabs = () => {
const location = useLocation(); 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 = [ const tabs = [
{ id: '/', label: 'All Recipes', icon: '📚' }, { id: '/', label: 'All Recipes', icon: '📚' },
{ id: '/recipe/', label: 'Recipe', icon: '🥗' }, { id: `/recipe/${lastViewedRecipeId}`, label: 'Recipe', icon: '🥗' },
{ id: '/add-recipe', label: 'Add Recipe', icon: '➕' }, { id: '/add-recipe', label: 'Add Recipe', icon: '➕' },
{ id: '/about', label: 'About', icon: '🍽️' }, { id: '/about', label: 'About', icon: '🍽️' },
]; ];
return ( return (
<div className="bg-gradient-to-b from-amber-50 to-orange-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg"> <div className="bg-amber-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
{/* Navigation Tabs */}
<div className="relative h-full"> <div className="relative h-full">
{/* Tab Background Line */}
<div className="absolute bottom-0 left-0 right-0 h-0.5 bg-amber-200"></div> <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"> <div className="flex space-x-1 px-6 pt-4 h-full items-end justify-center">
{tabs.map((tab) => { {tabs.map((tab) => {
const isActive = location.pathname === tab.id || (location.pathname.startsWith(tab.id) && tab.id === "/recipe/"); const isActive = location.pathname === tab.id || (location.pathname.startsWith(tab.id) && tab.id === "/recipe/");
@ -41,13 +73,12 @@ const RecipeBookTabs = () => {
<span>{tab.label}</span> <span>{tab.label}</span>
</div> </div>
{/* Tab Shadow Effect */}
{isActive && ( {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 className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div>
</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 className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
</div> </div>
</> </>

16
frontend/src/pages/About.tsx
View file

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

37
frontend/src/pages/AddRecipe.tsx
View file

@ -21,6 +21,8 @@ function AddRecipe() {
const [recipeCuisine, setRecipeCuisine] = useState(""); const [recipeCuisine, setRecipeCuisine] = useState("");
const [author, setAuthor] = useState(""); const [author, setAuthor] = useState("");
const [stars, setStars] = useState(0); const [stars, setStars] = useState(0);
const [prepMinutes, setPrepMinutes] = useState(5);
const [cookMinutes, setCookMinutes] = useState(5);
const addRecipeForm = async (event: React.FormEvent) => { const addRecipeForm = async (event: React.FormEvent) => {
event.preventDefault(); event.preventDefault();
@ -32,6 +34,8 @@ function AddRecipe() {
name: recipeName, name: recipeName,
cuisine: recipeCuisine, cuisine: recipeCuisine,
author: author, author: author,
prep_minutes: prepMinutes,
cook_minutes: cookMinutes,
stars: stars, stars: stars,
ingredients: ingredients, ingredients: ingredients,
steps: stepsHash steps: stepsHash
@ -74,13 +78,33 @@ function AddRecipe() {
value={author} value={author}
onChange={(e) => setAuthor(e.target.value)} 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> <div>
<StarRating rating={stars} onRatingChange={(newRating: number) => setStars(newRating)} /> <StarRating rating={stars} onRatingChange={(newRating: number) => setStars(newRating)} />
</div> </div>
<button type="submit" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700"> </div>
submit
</button>
</form>
<label className="mb-4 flex items-center cursor-pointer"> <label className="mb-4 flex items-center cursor-pointer">
<div className="relative"> <div className="relative">
<input <input
@ -90,7 +114,6 @@ function AddRecipe() {
className="sr-only" className="sr-only"
/> />
</div> </div>
<span className="ml-3 text-amber-800 font-medium">Bulk Entry</span>
</label> </label>
<div> <div>
<AddBulkIngredients ingredients={ingredients} onChange={setIngredients} /> <AddBulkIngredients ingredients={ingredients} onChange={setIngredients} />
@ -112,6 +135,10 @@ function AddRecipe() {
</li> </li>
))} ))}
</ul>*/} </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> </div>
) )
} }

4
frontend/src/pages/RecipePage.tsx
View file

@ -49,9 +49,6 @@ function RecipePage() {
updateStarsInDB(); updateStarsInDB();
}, [stars]); }, [stars]);
console.log(recipe)
console.log(stars)
console.log(initialStars)
return ( return (
<div className="recipe page-outer"> <div className="recipe page-outer">
@ -65,6 +62,7 @@ function RecipePage() {
<div className="border-b-2 border-amber-300 pb-4 mb-6"> <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> <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 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>
<div className="grid lg:grid-cols-2 gap-6 mb-6"> <div className="grid lg:grid-cols-2 gap-6 mb-6">

2
frontend/src/types/Recipe.ts
View file

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