DEV Community


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

⚡️ Instant GraphQL APIs to build realtime apps & APIs. Connect Hasura to your database & other data sources (REST & GraphQL servers, 3rd party APIs) and get a unified data access layer instantly.
Originally published at on ・2 min read

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.

Part 1: Search

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

Discussion (1)

asiasin profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct

Interesting ... but I think it is also worth adding points for researching competitors and niches! for example, in the article there is some good information about how yelp works about its main functions and about the cost of their development