This tutorial was written by Abhijeet Signh and published as part of  the Hasura Technical Writer Program - an initiative that supports authors who write guides and tutorials for the open source Hasura GraphQL Engine.

In part-1 of this series, we setup our backend and Auth0. In this part, we will setup our React app and connect it to our backend.

We will start with user authentication. We will be using JWT (JSON  web tokens) for authentication. Let’s first create some basic header in our react app for showing login button.

Replace the contents of styles/index.css file as shown:

These styles will be used throughout our app so you don’t have to worry about the styling.

Replace contents of App.js to use Apollo GraphQL client as shown below. (See apollo github repository for more help).

Here, we are passing id as props (path={“/user/:id”}), which is accessed via props.match.params.id . This is a react-router way of passing prop. See this example for more details.

Finally,  we have our app ready with user-profiles section. You can navigate to  user-profiles, create new posts and see real-time updates of new-posts,  upvote posts and see real-time updates of upvotes.

You should now have a working Hacker News clone. Incase you'd like to reference it, the final code for this app is hosted here. Visit the live demo here.

Abhijeet Signh is final year UG student in Computer  Science and Engineering from IIIT Kalyani. He has done work in Full  Stack Development, Android, Deep Learning, Machine Learning and NLP. He  actively takes part in competitive programming contests and has interest  in solving algorithmic problems. He is a startup enthusiast and plays  table tennis and guitar in spare time.