{"id":19154038,"url":"https://github.com/thinkswan/react-twitter-stream","last_synced_at":"2026-05-01T21:02:56.032Z","repository":{"id":54086383,"uuid":"194310751","full_name":"thinkswan/react-twitter-stream","owner":"thinkswan","description":"A React app that displays a live Twitter feed.","archived":false,"fork":false,"pushed_at":"2021-03-09T15:27:01.000Z","size":18,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-22T21:25:59.613Z","etag":null,"topics":["express","javascript","react","tutorial","twitter"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thinkswan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-28T17:29:19.000Z","updated_at":"2019-07-12T19:30:16.000Z","dependencies_parsed_at":"2022-08-13T06:40:17.923Z","dependency_job_id":null,"html_url":"https://github.com/thinkswan/react-twitter-stream","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thinkswan/react-twitter-stream","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thinkswan%2Freact-twitter-stream","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thinkswan%2Freact-twitter-stream/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thinkswan%2Freact-twitter-stream/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thinkswan%2Freact-twitter-stream/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thinkswan","download_url":"https://codeload.github.com/thinkswan/react-twitter-stream/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thinkswan%2Freact-twitter-stream/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32512670,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","javascript","react","tutorial","twitter"],"created_at":"2024-11-09T08:25:15.220Z","updated_at":"2026-05-01T21:02:56.001Z","avatar_url":"https://github.com/thinkswan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-twitter-stream\n\nA React app that displays a live Twitter feed.\n\nBased on the tutorial found at\nhttps://scotch.io/tutorials/build-a-real-time-twitter-stream-with-node-and-react-js.\n\n## How to use\n\n#### Clone the repo\n\n```\ngit clone git@github.com:thinkswan/react-twitter-stream.git\n```\n\n#### Generate a Twitter consumer key, secret, and access token\n\n1. Create a new Twitter app at https://apps.twitter.com/app/new\n1. Visit the **Keys and Access Tokens** tab\n1. Generate a consumer key, secret, and access token\n1. Add the generated keys to `config/default.json-example`\n1. Rename the config file: `mv config/default.json-example config/default.json`\n\n#### Install MongoDB\n\n- http://docs.mongodb.org/manual/tutorial/install-mongodb-on-os-x/\n- http://docs.mongodb.org/manual/tutorial/install-mongodb-on-ubuntu/\n- http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/\n\n#### Install dependencies\n\n```\nnpm install\nnpm start\n```\n\nThis will start a server at http://localhost:5000/.\n\n## How to deploy\n\nClick the button below to spin up your own copy of the app in a Heroku\ninstance.\n\n[![Deploy to Heroku](https://www.herokucdn.com/deploy/button.png)](https://heroku.com/deploy)\n\nOnce the app is deployed and you have the app name, you must set your generated\nTwitter keys as Heroku environment variables.\n\n```\nheroku config:set TWITTER_CONSUMER_KEY=\u003cconsumer_key\u003e --app=\u003capp_name\u003e\nheroku config:set TWITTER_CONSUMER_SECRET=\u003cconsumer_secret\u003e --app=\u003capp_name\u003e\nheroku config:set TWITTER_ACCESS_TOKEN_KEY=\u003caccess_token_key\u003e --app=\u003capp_name\u003e\nheroku config:set TWITTER_ACCESS_TOKEN_SECRET=\u003caccess_token_secret\u003e --app=\u003capp_name\u003e\n```\n\nThe app will now be live at `https://\u003capp_name\u003e.herokuapp.com/`.\n\n## How it works\n\nThe server (`server.js`) runs an Express app that watches Twitter for new tweets\nmatching a keyword (eg. `canada`). When a new tweet is found, the `StreamHandler`\nclass saves the tweet to the database and uses Socket.IO to emit the new tweet\nto the client.\n\nThe client (`app.js`) is a React app that listens for the `tweet` event and\nrenders new tweets as they arrive. It also uses infinite scrolling to load\nsubsequent pages of old tweets.\n\nState is maintained by using a Mongo database to store all previously-fetched\ntweets.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthinkswan%2Freact-twitter-stream","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthinkswan%2Freact-twitter-stream","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthinkswan%2Freact-twitter-stream/lists"}