Twitter Lab

This reposity contains the source code behind twitter.siwadon.com created with React (create-react-app) and Material-UI. Currently hosted on Firebase Hosting.

Features

1. Allow users to search tweets
2. Sort search results by retweet counts, favorite counts, and date.
3. Limit number of tweets on search result: 20, 50 and 100.

Dependencies

• node, and yarn or npm
• firebase-tools

Set up

Simply run yarn and yarn start (or npm install and npm start).

File structure

Main files/folders for the project

twitter-lab
├── firebase.json       // Firebase configuration including url rewrites
├── functions           // Firebase Cloud Functions
│   ├── lib
│   ├── package.json
│   └── src
│       └── index.ts    // proxy functions calling Twitter endpoints
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src                 // Main source code folder
│   ├── components
│   │   ├── App
│   │   ├── SearchBar
│   │   ├── TweetCard
│   │   └── TweetList
│   ├── index.css
│   ├── index.js        // entry point that renders our <App>
│   └── lib             // in-house libraries
│       └── Twitter.js
└── yarn.lock

How it works

There are 2 main parts of the app: React app and Cloud Functions.

Cloud functions acts as a proxy to Twitter REST API. So we don't need to store our app token on the client side. Even though this causes longer wait time, I think it is acceptable (~1 second).

It currently supports standard search operators, with a minor difference. If the search query contains one or more hashtags, it will use OR instead of the default AND operator.

Acknowledgement

Icon made by Freepik from Flaticon is licensed by CC 3.0 BY