tags
POPULAR

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

21 May, 2020 | 1 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.

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

Close

Get Started with GraphQL Now

Hasura Cloud gives you a fully managed, production ready GraphQL API as a service to help you build modern apps faster.

Sezgi Ulucam

Sezgi Ulucam

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

Read More

Ready to get started?
Start for free on Hasura Cloud or you could contact our sales team for a detailed walk-through on how Hasura may benefit your business.
Get monthly product updates
Sign up for full access to our community highlights, new features, and occasional baby animal gifs! Oh, and we have a strict no-spam rule. ✌️