Building a Full-Stack Yelp Clone with React, GraphQL & Hasura

Subscribe to the Hasura Newsletter

In this video series, we'll build a mini Yelp clone where instead of reviewing restaurants, users review planets from the classic sci-fi series "Dune". (Why? Because there's a new Dune movie coming out... but back to the main point.)

👉🏽 Here's the written tutorial.

👉🏽 Here's the repo if you'd like to code along.

We start off with a search feature so users can search for planets.

  1. Deploy to Heroku
  2. Create planets table
  3. Create React app
  4. Set up Apollo Client
  5. Style list with Emotion
  6. Search form & state

Part 2: Live reviews

Our users will be visiting these planets, and writing reviews about their experience. We add routing to display reviews for each planet, and subscriptions so they update live.

  1. Create reviews table
  2. Track relationships
  3. Set up routing
  4. Set up subscriptions

Part 3: Business logic

We implement a way to submit reviews through our UI, and (by special request from the Bene Gesserit themselves) some business logic to make sure the word "fear" doesn't appear in reviews.

  1. Add input form
  2. Test review mutation
  3. Create action
  4. Add business logic
  5. Order reviews
  6. Add review mutation
  7. We did it! 🎉

search icon

About Hasura

Hasura allows you to mobilize & federate your organisation’s data by building a powerful, secure & flexible GraphQL API, that can query data in your databases, HTTP services, serverless functions as well as third party APIs.
Like what you read? Join our team! We’re hiring

Subscribe to the Hasura Newsletter

Sezgi Ulucam

Sezgi Ulucam

Developer Advocate 🥑 @ Hasura | Front-End Dev | Baker | Dancer | Massage Therapist | WFR

Read More