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