This is a demo application showing how to build a simple Instagram Clone using React and GraphQL with Realtime Functionality and Offline Support with Service Workers.
View tutorial: Part 1 Part 2 Part 3 Part 4
Follow these instructions to get a copy of this project up and running on your local machine for development and testing purposes.
- Git
- Node
- NPM / Yarn
- React
- GraphQL
Clone the repository
$ git clone https://github.com/christiannwamba/instagram-clone.git
Install dependecies for Frontend
$ cd instagram-clone
$ npm install
Install dependencies for GraphQL server
$ cd instagram-clone/server
$ npm install
Using Pusher To add realtime functionality, you need Pusher. Head over to Pusher and create a new application.
Note your application keys.
- Edit your
server/server.jsand add your application credentials - Edit the
src/App.jsand add your application keys so you can connect to pusher.
- Start backend server
$ node server
[Development]
- Run Frontend
$ npm start
[Production]
- Build Frontend
$ npm run build
- Serve static files with
http-server
$ npm install http-server
$ http-server build
Ensure your backend server is running simultaneously
- React - A Javascript library for building user interfaces
- Express - Node.js web application framework
- GraphQL - A Query language for APIs and a runtime for fulfilling those queries with your existing data.
- ApolloClient - Apollo Client is the ultra-flexible, community-driven GraphQL client for React, JavaScript, and native platforms.
- Pusher - Leaders in realtime technologies. We empower all developers to create live features for web and mobile apps with our simple hosted API.
- Pusher - Easy to use getting started guide
- React - Great documentation easy to use
- Matt Gaunt - Great introduction to service workers