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
.
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
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/
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 IDPUSHER_CHAT_APP_KEY
- your Pusher application keyPUSHER_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