Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thinkswan/react-twitter-stream
A React app that displays a live Twitter feed.
https://github.com/thinkswan/react-twitter-stream
express javascript react tutorial twitter
Last synced: 28 days ago
JSON representation
A React app that displays a live Twitter feed.
- Host: GitHub
- URL: https://github.com/thinkswan/react-twitter-stream
- Owner: thinkswan
- License: mit
- Created: 2019-06-28T17:29:19.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-03-09T15:27:01.000Z (almost 4 years ago)
- Last Synced: 2024-11-09T08:33:57.268Z (3 months ago)
- Topics: express, javascript, react, tutorial, twitter
- Language: JavaScript
- Size: 17.6 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-twitter-stream
A React app that displays a live Twitter feed.
Based on the tutorial found at
https://scotch.io/tutorials/build-a-real-time-twitter-stream-with-node-and-react-js.
## How to use
#### Clone the repo
```
git clone [email protected]:thinkswan/react-twitter-stream.git
```
#### Generate a Twitter consumer key, secret, and access token
1. Create a new Twitter app at https://apps.twitter.com/app/new
1. Visit the **Keys and Access Tokens** tab
1. Generate a consumer key, secret, and access token
1. Add the generated keys to `config/default.json-example`
1. Rename the config file: `mv config/default.json-example config/default.json`
#### Install MongoDB
- http://docs.mongodb.org/manual/tutorial/install-mongodb-on-os-x/
- http://docs.mongodb.org/manual/tutorial/install-mongodb-on-ubuntu/
- http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/
#### Install dependencies
```
npm install
npm start
```
This will start a server at http://localhost:5000/.
## How to deploy
Click the button below to spin up your own copy of the app in a Heroku
instance.
[](https://heroku.com/deploy)
Once the app is deployed and you have the app name, you must set your generated
Twitter keys as Heroku environment variables.
```
heroku config:set TWITTER_CONSUMER_KEY= --app=
heroku config:set TWITTER_CONSUMER_SECRET= --app=
heroku config:set TWITTER_ACCESS_TOKEN_KEY= --app=
heroku config:set TWITTER_ACCESS_TOKEN_SECRET= --app=
```
The app will now be live at `https://.herokuapp.com/`.
## How it works
The server (`server.js`) runs an Express app that watches Twitter for new tweets
matching a keyword (eg. `canada`). When a new tweet is found, the `StreamHandler`
class saves the tweet to the database and uses Socket.IO to emit the new tweet
to the client.
The client (`app.js`) is a React app that listens for the `tweet` event and
renders new tweets as they arrive. It also uses infinite scrolling to load
subsequent pages of old tweets.
State is maintained by using a Mongo database to store all previously-fetched
tweets.
## License
MIT