Your Cooking Manual

Background

An individual course project for Full Stack Application Development, finished in Fall 2023. I created a solution for busy people who want to cook but lack time for finding recipes. My website offers a quick and easy recipe searching tool, helping users find their favorite recipes and identify needed ingredients effortlessly.

Front-end: HTML, CSS, JavaScript, Bootstrap
Back-end: JavaScript, Node.js with the Express framework
Database: a JSON file
External API: spoonacular API

Final Project Showcase

1. Search Box

The primary functionality is the search feature, allowing users to find recipes based on various criteria such as recipe name, cuisine type, included or excluded ingredients, available equipment, and time constraints. It simplifies the process for busy individuals to quickly discover a suitable recipe.

search box GIF


2. Recipe Instructions

The instructions page provides a comprehensive breakdown of steps for the selected recipe. Users can utilize the two upper buttons to either save the recipe to their favorites list or include its ingredients in their shopping list.

recipe instructions page GIF


3. My Favorites

This list offers users a convenient and personalized space to keep track of their preferred recipes. Users can simply click the heart icon to remove a recipe from their favorites. Additionally, clicking on any recipe card will direct them to the instructions page for that recipe.

my favorites GIF


4. Shopping List

The shopping list compiles ingredients required for selected recipes, each item representing the ingredients and their quantities. Users can customize it by editing entries to keep only what they need. Additionally, items can be removed with a simple click on the trash icon for easy management.

shopping list GIF