We Rate Tweets - Search your tweets and learn Algolia

We Rate Tweets is a search-as-you-type experience for exploring your twitter timeline. Tweets are sorted by their total of retweets and likes, not chronologically. This makes it possible to see your most popular tweets at a glance, while increasing the chance that the first search result is the one you were looking for.

Tweets are fetched from the twitter API and then indexed with Algolia. We Rate Tweets is a good way to learn how Algolia works, including how data is structured, indexed, and made searchable on the UI. All of the code is open source, commented for readability, and ready for you to remix. You can give it a test drive before you remix by visiting we-rate-tweets.glitch.me.

How to Remix 🎏

First, hit that sweet, sweet Remix this link above. Your remix won't have environment variables yet, but that's ok, it will soon! If you load it in the browser, you'll see this screen:

Create a new Twitter API application 🐦

Before you're able to create a new Twitter app you'll need to either already have a Twitter developer account, or you can apply for a developer account.

Once your Twitter developer account is active, click here to go to the new twitter application page. Once you're there:

Fill in the application's name and description. They can be as simple as sampleTwitterGlitchApplication and This app makes tweets searchable with Algolia. In the URL field, use the one Glitch auto-generated for your remix, which will look like https://dazzling-brick.glitch.me. Be sure to grab the https:// prefix!

You will also need check the box to "Allow this application to be used to sign in with Twitter". This will allow our app to access the signed in user's Tweets and will force the Callback URL to be filled in. The Callback URL will start with the URL that Glitch auto-generated for your remix, followed by /login/twitter/return.

After creation, you'll see a summary page of your new application with tabs at the top for Keys and tokens and Permissions.

We recommend that you navigate to the Permissions tab and change the access level to "Read" as that's the only scope needed.

Finally, navigate to the Keys and tokens tab create an access token. Then grab the four keys shown (you will need to click "Create" under the secret token section) and prepare to copy them to your Glitch app's .env file.

Here's how to map the keys into the .env file:

TWITTER_CONSUMER_KEY - Consumer Key (API Key)
TWITTER_CONSUMER_SECRET - Consumer Secret (API Secret)
TWITTER_ACCESS_KEY - Access Token
TWITTER_ACCESS_TOKEN_SECRET - Access Token Secret

That's it for Twitter! Let's move on to Algolia.

Create a new Algolia application 🔎

If you don't already have an Algolia account, you can sign up here and redeem a special offer for the Glitch community.

During the sign up process, you'll create a new Algolia application. If you were already an Algolia user, you can create a new application from inside the Algolia Dashboard.

Once you have your new application, navigate to your API Keys on the left hand side of the screen. Copy three values into your Glitch application's .env file.

Here's how to map the keys into the .env file:

ALGOLIA_APP_ID - Application ID
ALGOLIA_SEARCH_API_KEY - Search-only API key
ALGOLIA_ADMIN_API_KEY - Admin API key

Once Glitch has applied your changes, you can visit the live version of your app and see the first page.

Assuming everything is configured correctly, you can authenticate with Twitter and start indexing and searching your tweets!

Note: tweets will be stored in your Algolia application inside of an index called tweets-username where username is your twitter account handle.

Remix possibilities

There are several benefits to remixing We Rate Tweets, which include indexing a larger number of tweets, indexing any public Twitter timeline, and full customization of the look and feel, including the emojis that are used for rating the tweets.

Amount of tweets indexed

You can change the value of the NUMBER_OF_TWEETS_TO_FETCH environment variable. The maximum value of tweets that Twitter lets you fetch historically for a user is 3,200. Note that the real amount indexed will be lower, since retweets are not included.

Searching other users' timelines

In your remix, you can index timelines for users other than the logged in user, just set the environment variable ALLOW_INDEXING_OF_OTHER_TIMELINES to 1. An input box will appear near the bottom of the tweets search page that will let you index and search the tweets of other users.

Relevance

Explore the Algolia dashboard to see how relevance is configured, and you can also make changes.

If you'd like tweets to be ranked purely by retweets or purely by likes, you can do that. You can also choose to rank chronologically. The Algolia documentation will be your best friend as you explore the options.

Rating emojis

The emojis that map to the rating of each tweet can be found in public/search.js. Change any of them to create a more personal experience.

var ratemoji = {
  0:  "💩",
  1:  "😖",
  2:  "😣",
  3:  "😦",
  4:  "😒",
  5:  "😞",
  6:  "😐",
  7:  "😑",
  8:  "🙃",
  9:  "😏",
  10: "🤔",
  11: "😌", // 11 - 19
  12: "🙂", // 20 - 39
  13: "😃", // 40 - 59
  14: "😃", // 60 - 79
  15: "🤓", // 80 - 99
  16: "😅", // 100 - 999
  17: "😂", // 1,000 - 9,999
  18: "😘", // 10,000 - 99,999
  19: "😍", // 100,000 - 999,999
  20: "🦄"  // 1,000,000 - 9,999,999
}

Getting help

If you run into any issues using or remixing this app, let us know on Algolia's Community Forum and we'll be happy to help. Happy remixing!

gagand03/we-rate-tweets