RECIPE BOOK

A lightweight, multi-page recipe browser built with Vite and Vue 3. It ships with 150+ preloaded recipes, rich filtering/search, saved (bookmarked) lists, and guided detail pages with ingredients, step tracking, speech, and quick YouTube lookups.

Features

• Multi-page: index.html (shelf) and recipe.html (detail) served via Vite multi-entry build.
• Large dataset: 150+ recipes in data.js, each with images and autogenerated YouTube search links.
• Search & Filters: Full-text search plus quick chips (Quick, Veggie, Comfort, Sweet, Weeknight).
• Saved list: Bookmarks persist in localStorage and surface in a dedicated "Saved recipes" strip.
• Guided cooking: Step navigator with progress, speech synthesis, ingredient checkboxes, and hover-free cards.
• Styling: Food-themed background, 3D buttons, responsive grid, lazy-loaded images with fallbacks.

Run locally

npm install
npm run dev
# build
npm run build
npm run preview

What I gained in the process

• Getting comfortable with Git pulls and resolving merge conflicts while iterating rapidly on a front-end project.
• Setting up a Vite multi-page build (custom rollup inputs) and handling base paths for navigation.
• Using Vue 3 (composition API) without a heavy router for a small multi-page flow.
• Managing localStorage state for bookmarks and last-opened recipe continuity.
• Handling robust media loading (image fallbacks, YouTube search links) to avoid broken embeds.
• Applying progressive enhancement (speech synthesis, lazy loading) while keeping no-build fallbacks minimal.

Project structure

• index.html / index.js – Shelf grid, search/filters, saved strip.
• recipe.html / recipe.js – Detail page with ingredients, steps, speech, bookmarks, and YouTube search CTA.
• data.js – Recipe dataset and asset URLs.
• vite.config.js – Multi-entry build config and Vue bundler flags.
• public/favicon.ico – Favicon placeholder (replace with your icon).

Customization tips

• Swap the background image by editing --bg-gif in index.html and recipe.html.
• Replace the favicon by dropping your icon into public/favicon.ico.
• If you want fixed tutorial videos per recipe, add a video field in data.js; otherwise the YouTube search link is generated from the title.