Skip to content
This repository has been archived by the owner on Dec 26, 2022. It is now read-only.
/ Chatify Public archive

Video and Messages Chat using React Native and GraphQL

License

Notifications You must be signed in to change notification settings

LFSCamargo/Chatify

Repository files navigation

Chatify

Welcome to Chatify a simple chat application that uses React Native and GraphQL

Welcome to Chatify a simple chat application that uses React Native and GraphQL

The idea for this open source project is to show how we can use GraphQL Subscriptions to deal with Real time updates. And also to show people that WebRTC its not a Monster.

Also im preparing a blog Post to show you guys the processes and the troubles that i passed through.

How to run the app

  1. First install the dependencies yarn install
  2. Copy the env file to .env yarn server:config:local
  3. Run the server yarn server:dev
  4. Start packager yarn app:start
  5. Run on ios or android yarn app:ios or yarn app:android

PS: You need to have mongo installed on your machine

PPS: Android device or AVD must be running so reat native will be able to find the device to deal with the installation

To test the video calls you need two devices and ngrok to expose the server to the devices!

PPS: Run the server and the packager before all those steps above

  1. run this command ngrok http 5000 to expose the port to the device will appear something like this
Session Status                online
Session Expires               7 hours, 47 minutes
Version                       2.3.29
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://7963e9cd.ngrok.io -> http://localhost:5000
Forwarding                    https://7963e9cd.ngrok.io -> http://localhost:5000
  1. Copy the fowarding without the http:// like this 7963e9cd.ngrok.io and replace on the config.ts:
export const GRAPHQL_URI = 'http://something.ngrok.io/graphql'
export const SUBSCRIPTIONS_URI = 'ws://something.ngrok.io/graphql'
  1. Build on the device using XCode

  2. And test the video calls ❤️

Main Libraries Used to do the dirty job

Backend:

  • GraphQL
  • Mongoose
  • Jest
  • Apollo Server
  • GraphQL Tag

Front End:

  • React Native
  • React Native WebRTC
  • React Apollo
  • React
  • Jest
  • React Apollo Hooks

Mentions:

Sibelius
Sibelius Seraphini
Joao
Joao Marins
Thom
Raphael Thomazella