Yelp Frontend

Alternatives To Yelp Frontend
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Awesome React55,648
12 days ago4
A collection of awesome things regarding React ecosystem
Gold Miner32,117
2 months ago1
React Redux Links21,729
9 months ago31
Curated tutorial and resource links I've collected on React, Redux, ES6, and more
Js Stack From Scratch19,396
7 months ago1January 19, 201748mitJavaScript
🛠️⚡ Step-by-step tutorial to build a modern JavaScript stack.
Awesome Nextjs8,776
10 days ago59
:notebook_with_decorative_cover: :books: A curated list of awesome resources : books, videos, articles about using Next.js (A minimalistic framework for universal server-rendered React applications)
Graphql Editor5,83413 days ago21September 24, 202221mitTypeScript
📺 Visual Editor & GraphQL IDE. Draw GraphQL schemas using visual 🔷 nodes and explore GraphQL API with beautiful UI. Even 🐒 can do that!
React Router Tutorial5,564
4 years ago73JavaScript
5 years ago10mitTypeScript
👩🏻‍🏫 Learn Apollo - A hands-on tutorial for Apollo GraphQL Client (created by Graphcool)
React Gh Pages4,976
a month ago23TypeScript
Deploying a React App (created using create-react-app) to GitHub Pages
React From Zero4,616
4 years ago3gpl-2.0HTML
A simple (99% ES2015 less) tutorial for React
Alternatives To Yelp Frontend
Select To Compare

Alternative Project Comparisons

1 About

This repository contains the source code for the Build Yelp in React | React Hooks Tutorial provided by

Sign up for this email list so you get a vote in what we will publish next.

For updates please follow @_jgoebel on Twitter.

Please help this repo with a ⭐️ if you find it useful! 😁

2. Demo

Please check out the videos on Youtube

Yelp Home

3. Screenshots

The application uses real data by leveraging the Yelp Fusion API.

3.1. Home

Yelp Home

3.2. Search for businesses / restaurants

Yelp Search

4. Caveats

  • This app uses the CORS Anywhere because the Yelp Fusion REST API is meant for server to server communication and does not support CORS
  • For the sake of the tutorial, we decided to proxy all request through CORS Anywhere so we can focus on building the frontend part of the application.
  • You should not run this in production because you would expose a Bearer token on the client side. We only did this so that this tutorial can focus on the frontend. Later on we might develop a server for this application as well if people express enough interest.
  • DO NOT commit your bearer token to source control if you work on a public repository.

5. How to run this Application

This application looks pretty much the same like the original Yelp website.

It leverages the free Yelp Fusion REST API for which you need an API key.

  1. Head over to the Yelp Fusion API documentation
  2. Click on Create App and sign in if you haven't done so already
  3. Once you have signed in, click on the Get Started button. If you already have an app, then you will already see the API key
  4. Fill out the form for creating a new app
  5. Copy the generated API key. This is a bearer token that must be put inside the header of each request
  6. Navigate to the src/hooks/yelp-api/config.js file and assign the BEARER_TOKEN variable the following content
    const BEARER_TOKEN = '<your-token-here>'
  7. Install the dependencies by running npm install or yarn install
  8. Run the app with npm start or yarn start

6. Used Technologies

7. Disclaimer

This project is solely intended for educational purposes and is created under fair use.

It is not intended to create any kind of Yelp competitor, but to teach advanced concepts in frontend development.

Just see it a nice educational project that will help you to improve your coding skills.

Popular Reactjs Projects
Popular Tutorials Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Create React App