Recipe Manager

This is a simple single-page Recipe Management System built with HTML, CSS and JavaScript. It stores recipes in the browser's localStorage so you can add, edit, delete, search and scale recipe servings without any server.

Features

• Add, edit and delete recipes
• Search recipes by title, description, procedure or ingredient
• Change serving size and automatically scale ingredient quantities in the current view
• Upload and display a recipe image (stored as a data URL in the browser)

Getting started (macOS)

1. Open Terminal and navigate to the project folder:

cd ~/Desktop/recipe-app

2. Start a simple static server (recommended) so relative paths and some browser features work properly:

python3 -m http.server 8000

3. Open http://localhost:8000 in your browser.

How to use

• Click "+ Add Recipe" to open the form. Provide a title, description, estimated time, original servings, ingredients (qty, unit, name) and procedure.
• Use the image field to upload a photo (preview shown). Images are stored as base64 data URLs in the browser.
• In the recipe view, use "Change servings" and Apply to scale ingredient quantities for the current view (this does not modify the stored original recipe unless you explicitly edit and save it).
• Use the search box to filter recipes by title, description, procedure or ingredient name.

Data persistence

• Recipes are stored in the browser's localStorage under the key recipes_v1.
• Each recipe has the shape:

{
  "id": "string",
  "title": "string",
  "description": "string",
  "time": number,
  "servings": number,
  "imageUrl": "string (base64 or URL)",
  "ingredients": [{"qty": number|null, "unit": "string", "name": "string"}],
  "procedure": "string"
}

Notes

• This is a static, client-side app intended for demonstrations and coursework. For multi-user access or secure storage, replace localStorage with a server or cloud datastore (e.g., Firebase or a REST backend).
• Images are stored in localStorage as base64 data URLs; this is convenient but can consume storage quickly. For production use, store images in a backend or cloud storage and save URLs in the recipe objects.

License: MIT