Skip to content

marvellous122/react-realtime-chat

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pusher & React Real-Time Chat App

This is an example chat application using React for a componentised UI and Pusher for real-time chat messages.

The UI components can be found in static/javascripts/ui_components.

The back-end is a Python app, found in app.py.

Project Test Criteria

For this test project, you will modify this sample project to be written in Apollo instead of plain React. The chat websockets will be powered by Pusher.com.

For more information using Apollo subscriptions please read: http://dev.apollodata.com/react/subscriptions.html

Time limit: 5 hours

Finished project: Clone this repo and provide a link to the final solution

Example Tutorial

There is a full tutorial on building a real-time chat application with React and Pusher available.

You can see a demo here: http://pusher-chat-demo.herokuapp.com/

Running the App

You'll need a Pusher account, so signup for a free account.

You'll then need to install the application Python package dependencies. We'd recommend you do this in a Virtual Environment:

$ virtualenv venv
$ source venv/bin/activate

Then install the dependencies:

pip install -r requirements.txt

Prior to running the Python app you'll need some environmental variables to be set.

  • PUSHER_CHAT_APP_ID - your Pusher application ID
  • PUSHER_CHAT_APP_KEY - your Pusher application key
  • PUSHER_CHAT_APP_SECRET - your Pusher application secret

You can do this from the command line as part of running the application:

PUSHER_CHAT_APP_ID=YOUR_APP_ID PUSHER_CHAT_APP_KEY=YOUR_APP_KEY PUSHER_CHAT_APP_SECRET=YOUR_APP_SECRET python app.py

Or, probably much more easily, with the help of foreman and by setting these values in a .env file:

PUSHER_CHAT_APP_ID=YOUR_APP_ID
PUSHER_CHAT_APP_KEY=YOUR_APP_KEY
PUSHER_CHAT_APP_SECRET=YOUR_APP_SECRET

Then running:

$ foreman start

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 97.1%
  • HTML 1.9%
  • Other 1.0%