What's for Dinner?

Explore the project page

View it live on github-pages

Table of Contents

About The Project

The goal of this project was to create an application that will lift some of the burden of deciding what to make for dinner. The "What's for Dinner?" application allows the user to search for online recipes based on ingredients he/she may have on-hand. Additionally, users will have the option to save recipes for future use, which can easily be converted to a PDF to be used offline, or for the more tangible owners of the printer, printed out on paper.


Search Page Preview


Results Page Preview


Saved Page Preview


User Story

AS A busy parent
I WANT to easily find dinner ideas
SO THAT I can make a delicious meal/drink without much thought

Acceptance Criteria

GIVEN this website
WHEN I search using ingredients on-hand
THEN I am given a list of possible recipes using those ingredients
WHEN I find a recipe I like
THEN I can save it to a page of favorite recipes
WHEN I want to download the recipe locally
THEN I can click a button to convert the HTML page to PDF 
WHEN I click the taco
THEN I am presented with taco tuesday
WHEN I click the dice
THEN I am presented with a random recipe

Usage

This project can be used by anyone has an assortment of ingredients on-hand, but doesn't know what to make for dinner. The below outlines all major features of this project:

  • Search by ingredient or keyword: Users can search for a recipe using ingredients or keywords (e.g, type of cuisine). Ingredients are individually added to a working ingredient list to allow for larger searches.

  • Taco Tuesday Button: When clicked, a search for taco-related recipes is conducted.

  • Random Recipe Button: When clicked, a search for recipes is conducted based on a random ingredient or keyword.

  • Save Recipes: When results are populated, the user has the option to save individual recipes, which can be viewed on their “Saved Recipes” page. Saved recipes are viewable as cards, which can be removed.

  • PDF Download: On saved recipe cards, PDF buttons can be clicked to download a PDF version of the recipe page to be saved for offline use.

Demo

Watch the gif below to see how the quiz works.

What's for Dinner? Demo

Future Development

The below includes features that this project group would like to include:

  • Weekly calendar to insert recipes into for meal planning
  • Shopping list based off ingredients you don’t have
  • Saved categories to organize by meal time or type; rating system
  • Search categories or ways to sort results including, but not limited to:
  • Recipe ingredients, Recipe category, Calories, Recipe time
  • Add see more option at the bottom to show more than 10 results
  • Save buttons to shadow out as opposed to entire block
  • Cleaner results UI that is more compact and easy to consume
  • Movable Cards on the Saved Page, so user can reorganize
  • Auto-complete search recommendations
  • Reduced speed of search

Built With

This project was built using:

Contact

Project Link: https://github.com/cynthiwu/whats-for-dinner