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

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! 🎉


Hasura is an open-source engine that gives you realtime GraphQL APIs on new or existing Postgres databases, with built-in support for stitching custom GraphQL APIs and triggering webhooks on database changes.


PS: We’re hiring!


Sezgi Ulucam

Sezgi Ulucam

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

Read More