React and Redux recipe search: Part 2. API Access with thunks

Tags React Redux Thunks
Hard Prerequisites
  • PROJECTS: React and Redux recipe search: Part 1. Presenting the form
  • TOPICS: [TODO] Redux Thunks

    • Now that your frontend is awesome, let’s get the “search” button to work.

    Take a look at this neat little API:

    http://www.recipepuppy.com/about/api/

    As APIs go it’s pairly straight-forward. It’s also free and requires no authentication.

    Instructions

    Add a Button labelled “Search” to your web application. When the user clicks on this button do the following:

    1. Access the api using a thunk
    2. once the results arrive, display them in a nice table. Make sure you display all the info and that it is nice and neat.
    3. Make sure that the user can easily do another search without having to refresh the page or anything weird like that

    Getting to Excellent

    If you want to be marked as excellent then there are a few things you can do:

    • Add a “next” and “previous” button to add paging to your application. Or, better yet, automatically fetch the next page of results as the user scrolls to the end of the returned recipes list.
    • Make use of a spinner widget to show that the search results are still loading: https://material-ui.com/components/progress/
    RAW CONTENT URL