Fetching Yelp API via Netlify Function with React.js [ToC]

A little more than a month ago, I started writing tutorial about fetching API via Netlify Function using React app. Today I published the last part of it. For everyone's convenience I prepared a little table of contents. Thanks for reading!

part 1

  • installing React.js boilerplate
  • organizing files and folders
  • using components

part 2

  • installing React Developer Tools (as a browser extension and as a project dependency)
  • importing and initializing useState hook
  • passing state as prop to CHILD component
  • creating basic HTML form
  • declaring onChange and onClick events
  • entering searching criteria into input fields
  • submiting entered data to CHILD component's state

part 3

  • registering to Yelp Fusion API and getting API Key
  • fetching data with Postman app
  • installing react-router-dom package and scaffolding some navigation
  • making use of useHistory hook, adding query string to URL
  • applying conditional rendering
  • installing react-router-dom package and using it with useLocation hook to parse query string from URL
  • utilizing useEffect hook to make an attempt to fetch data from Yelp API

part 4

  • installing netlify-cli package, running app at port 8888
  • solving “Cross-Origin Request Blocked” problem with cors-proxy redirection
  • returning real data from Yelp API to the browser console
  • building Netlify serverless function and fetching Yelp API from it

part 5

  • registering new account on Netlify
  • initializing new app with netlify init command
  • running app with netlify dev --live command
  • creating environment variable at Netlify dashboard and hiding API Key in it
  • fetching Yelp API without exposing API Key in browser DevTools

part 6

  • rendering fetched data with useState hook, map method and key prop
  • styling UI with Sass using SCSS syntax
  • refactoring some rendered data with ternary operator and length property

part 7

  • fixing functionality issues (browser reload, new search, incomplete search)
  • styling fetched data with grid, flex and position properties,
  • deploying app to Netlify

17