Friday, 6 September, 2019 UTC
Summary
This tutorial was written by Abhijeet Singh 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.
React App SetupWe will firstly implement 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/App.css file with this file. These styles will be used throughout our app so you don’t have to worry about the styling. Also download this file and place it in your styles/ directory. We will use this to show various buttons within our app.Setup Apollo GraphQL Client
Replace contents of
App.js to use Apollo GraphQL client as shown below. (See apollo github repository for more help)If the user is authenticated, we will show a upload button which will open the following popup when clicked:
Finally, we have our app ready with upload post functionality. You can navigate to user-profiles, create new posts and see real-time updates of new-posts, likes and follows.
You should now have a working Instagram clone. Incase you'd like to reference it, the final code for this app is hosted here. See live demo of the app here.
Acknowledgements :TimeDifference function: https://github.com/howtographql/react-apollo
Few Styles taken from : https://pusher.com/tutorials/instagram-clone-part-1
About the author Abhijeet Singh 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.