Code Monkey home page Code Monkey logo

savor's Introduction

SAVOR

A recipe search and bookmark app designed for the amateur home cook! View the deployed app at this link!

Table Of Contents

Overview

  • Amateur home cooks crave outlets to find new and exciting recipes, and as it tends to play out, they rely on these staple recipes to get them fed through the work week! Savor is an app that allows a user to search a wide range of recipes to try out in their own kitchen. When they find a recipe that hits the spot, they can easily save it to the 'My Recipe' section for use on a busy weeknight down the road, thus saving them the time it takes to consider, "Where did I find that recipe I liked a few weeks ago??"

Examples

ezgif com-gif-maker (3)

Setup Instructions

  • The easiest way to experience Savor is to view this deployed link.
  • You can also run it locally on your computer! To do this, please follow these easy steps:
    • Clone this repo down to your computer.
    • CD into the Savor directory
    • Once inside, type npm install into the command line. This will install all of the apps dependencies.
    • Now you can type npm start into the command line to open a browser window where you can interact with the app.

Using The App

  • Once you have Savor open in your browser, you will be greeted with a simple home page that consists of a header and a search bar.
  • Simply type a query into the search bar, for example "Cauliflower Steaks", and click on the the magnifine glass icon (or just tap enter!)
  • You will be shown the results of your query.
  • The recipe cards will show you some brief but relevant info including the recipe's title, cuisine, serving amount, calories, and a thumbnail image of the recipe.
  • Clicking on the image or recipe title will open a new window in your browser that takes you to the source article.
  • To favorite a recipe, simply click on the bookmark icon in the lower right hand corner of the card. The icon will turn red, and when you navigate to the 'My Recipes' page, you will see it displayed.
  • To unfavorite a recipe, click on the red bookmark icon, and it will be removed from your favorites.

Learning goals

  • Design an app that fits the needs of a specific audience.
  • Deliver a workable product in the timeframe provided.
  • Create a simple architecture using the React framework and implement React-Router to handle url paths.

Future features

  • I plan on adding extra filtering functionality to the recipe search. For example- A user would be able to set a calorie range, or define what type of quisine they are specifically looking for.
  • Using an express server to handle the favoriting instead of relying on local storage in the browser.
  • Multi-user login functionality to handle more than one chef using the same browser.

Technologies used

  • React
  • React-Router
  • React-Hooks
  • Cypress
  • JavaScript
  • Heroku
  • GitHub Projects
  • Miro

Contributors

Reflections And Wins

  • As always, the relatively short time frame for seeding the concept to delivering the minimum viable product is a challenge. This forced me to plan efficiently and set attainable goalposts, which in the end were crucial!
  • Being a amateur home cook, I'm proud to have designed an app that I will actually use in my daily life! There is something so rewarding about taking a project from 'practice to practical'.
  • The repetition of building in the React environment has been very useful to my workflow. I feel that I am getting a better grasp of the overall structure of how apps can be made, as well as getting quicker at achieving functionality.

Return to top

savor's People

Contributors

mtcawthray avatar

Watchers

 avatar

savor's Issues

As a user, I can search for recipes

As a user, I can enter a food query into the search bar on the home page and when submitted I will be presented with a display of recipes that match my query.

acceptance criteria:

  • upon clicking the submit button, the input value will be interpolated into a fetch call
  • the response from the fetch will be stored in a hook in the display component
  • the returned response will be iterated over and made into recipe "cards"
  • the card will display the recipe name, image, and a short description
  • when a user clicks a card, it will open another browser window and show them that recipe's link

As a user, I can add a recipe to my favorites

As a user, I can click on a bookmark icon on a recipe card, and save that recipe to my favorites to be viewed at a later time.

acceptance criteria:

  • There should be an icon on each card that displays if it is bookmarked.
  • That recipe should appear on the favorites page when the user navigates there.
  • A user can click the same icon in order to remove the recipe from favorites if they so choose.
  • Favorites persist across page loads

Initial codebase setup

  • Repo should have a components directory nested in the src directory
  • Each needed component directory should have it's own directory that holds a css and js file within.
  • install react-router-dom
  • install cypress
  • create utilities js file that will hold fetch calls
  • create .env file in src and add to .gitignore. this is where we will store the apiKey

As a user, I can navigate to the home page

As a user, I can click on the header of Savor or the home button in the header to be taken back to the home page where I can search for another recipe.

acceptance criteria:

  • when I click the 'home' link I see the url change to have no path and I can see the search bar
  • when I click the Header I see the url change to have no path and I can see the search bar

Create error display component

Create an error display component that renders based on if there is a thrown error from the api

  • create route for error display in App
  • You could also conditionally render off of error hook located in app
  • interpolate error message into an h2 or some such tag
  • find a friendly icon that displays
  • create cypress test that intercepts and stubs with a 404 and 500 error

As a user, I can see a homepage when I visit the app

As a user, I want to see a simple and intuitive home page that shows me what I should do to get a recipe. I should be able to search for a recipe, or view my favorite recipes.

Acceptance Criteria:

  • user can see that the header is present
  • user can see a search input and can input text
  • user can see a submit button for the aforementioned input
  • user can see a link/tab labeled favorites

Cypress- recipe favorite user flow test

  • intercept and stub data for /recipes pageload
  • click bookmark on card
  • navigate to /favorites page
  • check for card on page
    • check for article
    • check for image
    • check for h2
    • check for calories
    • check for cuisine
    • check for bookmark logo to be selected

Error handling for home page search bar

Error handling needed to:

  • prompt a user to enter a query into search bar
  • prompt user to search for another query if theirs did not yield any results
  • write a cypress test spec to check for this

As a user, I can add notes to a recipe card

As a user, I can click an 'add notes' icon on the recipe card to add personalized details to any recipe I choose.

acceptance criteria:

  • An add notes icon should be present on each card
  • Clicking will display a Notes section in the card
  • If there are no notes for a recipe, a user is prompted to enter them in a textArea and submit
  • After each submit, a user can visit the note and see what they wrote, as well as add to or edit the note

cypress test for removing favorite

Create a cypress test that covers the user flow of removing a favorite.

  • test to see if the recipe card is removed from the page
  • test to see if the user gets the error handling message

Cypress- Navigate to homepage test

  • visit /recipes page
  • intercept and stub data
  • check url for '/'
  • check for searchbar
  • check for button
  • check for h1
  • check for my recipes link
  • check for search link

Cypress- recipe search user flow test

  • visit page and intercept, stub data
  • check to see if url changes to /recipes
  • check to see if cards display (number)
    • check for h2
    • check for image
    • check for link to recipe
    • check for calories
    • check for cuisine
    • check for favorite button

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.