Giter Site home page Giter Site logo

madaleines / api-muncher Goto Github PK

View Code? Open in Web Editor NEW

This project forked from ada-c10/api-muncher

0.0 2.0 0.0 6.04 MB

Project: Create a rails application that allows the user to search and list recipes using the Edamam API

Ruby 75.44% JavaScript 2.94% CSS 6.71% HTML 14.91%

api-muncher's Introduction

API Muncher: Recipe API Consumer

At a Glance

  • Individual, stage 2 project
  • Due before class, Mon 11/5

Learning Goals:

  • Configure an API for consumption
  • Create authenticated API requests using HTTParty
  • Consume JSON responses from an API
  • Map response to application-specific data
  • Separate API logic from application logic

Objective

We will create a web application that displays recipes based on a search term. We will utilize an API from Edamam called the Recipe Search API.

Getting Started

Before you start writing any code:

  • Explore the API documentation to become familiar with the request(s) you can make
  • Create a Trello Board listing the features you will need to add and use it to track the progress of your app.

Once you've explored the API docs, this project:

  • requires you to create a Rails application
  • Use better_errors for debugging purposes
  • Deploy your completed app to Heroku

Requirements

Search

  • As a user, when I can type a search term into a text input and submit it, then the web app:
    • Makes a request to the Edamam Recipe API using the search term
    • Displays the results in a list

List View

  • As a user, when I look at the list of recipes that were the result of a search, then the web app:
    • shows a paged list of recipes for a given search term, ten at a time
    • shows the name of the recipe and the corresponding photo
    • shows next to within each listed recipe a link to that recipe's detail page

Show View

  • As a user, when I look at a recipe's detail page, then the web app shows the following details about the individual recipe:
    • Name
    • Link to the original recipe (opens in a new tab)
    • Ingredients
    • Dietary information

Non-functional Requirements

  • Follow the requirements of attribution to Edamam, as required by their Terms and Conditions
  • Create thorough tests for your any API Wrappers, classes, and controllers using VCR
  • As a user, when I interact with the site and there is a problem, then I can see an error message detailing what the problem is and what I should do
    • As a user, when I put in an incorrect parameter for an individual recipe in the browser's address bar, then the site reports a friendly error explaining that this recipe doesn't exist, and doesn't show an exception

Important Notes

  • How will you go from a list of recipes pulled down from an API, to being able to view a specific recipe in detail? Take time to consider your answer, write down the steps, and make a plan. Then, look at the API documentation to understand the detail of how you will execute it. Use Postman and your debugging skills to aggressively check what your requests look like in order to get specific recipe detail data. Edamam's API is not RESTful; this is not trivial. You'll have to use some clever code to get this to work! Be patient, and you'll get there.
  • Using this API as a developer limits the number of API calls in a month to 5000. This means that we must try to minimize API calls for testing purposes as much as possible, to ensure you do not exceed this number of API calls in the one week of development we have.

Optional Enhancements

  • Keep track of most recent search terms and allow users to return to those searches
  • Implement an OAuth strategy using Google
    • Allow users to save recipes to a "favorites" section that they can return to
  • Provide checkboxes or other controls to limit the search to options such as:
    • Peanut Free
    • Soy Free
    • High Protein
    • Etc

Optional Wireframes

You have creative control over the design and layout of this project. Below are optional wireframes you may use. It is not a requirement that you do.

Homepage

Splash Page Wireframe

Results Page

Results Page Wireframe

Recipe Show Page

Results Page Wireframe

Can you make your layout responsive? When the screen width shrinks to a medium screen, have a row with only two recipes. On a small screen width, have only a single recipe per line.

What Instructors Are Looking For

Check out the feedback template which lists the items instructors will be looking for as they evaluate your project.

api-muncher's People

Contributors

cheezitman avatar madaleines avatar tildeee avatar kariabancroft avatar

Watchers

James Cloos avatar  avatar

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.