Tweets as an Image

After GitHub allows us to use README.md to showcase our portfolio on our GitHub profile many cool README generator projects came up, and I thought of adding the latest Tweet of any User will be a nice addition to it, so I started figuring out multiple ways to do so, and developed the project using Canvas, Puppeteer, and Twitter API.

First Version:

How I made it:

I used Puppeteer to open a headless Chrome at the server-side, then I am creating a Canvas over which I will be writing down the Tweet's Text.
I used Tweet API: https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=, fed in the user's handle and a nice get request will simply deliver the user's activity info. By fetching the last Tweet's id I made another API call and gets a sweet response which I needed.
After getting the response I am simply putting the text response on the canvas I earlier and taking a snapshot of it and sending it back as an Image whenever you request to the API end-point this project provides you with a Twitter handle in the Query part.

API for Version 1:

https://tweets-as-an-image.herokuapp.com/?twitterHandle={your_twitter_handle_here}&count={number_of_tweets_you_want_to_fecth}

Sample Image from Version 1 response:

Since I have the text here, I can do a lot of things, changing fonts, colours, adding designs, borders. But then I ran into a problem. The response I was getting was not a complete text, it was adding ... at the end of the Tweet's text was long. Isn't it a bit weird? As the number of characters is already limited of a Tweet.

So, I started looking for a different way and came across the oEmbed format. It's a simple yet powerful API that allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly. And then there was a...

Version 2:

Steps are pretty much similar to Version 1, but here instead of creating a canvas I am feeding in the HTML file to the Puppeteer and taking the snapshot of it. Here's the oEmbed URL for Twitter which I used: https://publish.twitter.com/oembed?url=https://twitter.com/

API for version 2:

https://tweets-as-an-image.herokuapp.com/tweet?twitterHandle={your_twitter_handle}&id={your_tweet_id}&theme={light_or_dark}&maxwidth={max_width_of_your_tweet_image}&height={height_of_the_image}&lang={language}

Sample Image from Version 2 response:

There are many other query params that you can include like language, width, height, etc.

You can find the details for the same along with the steps to deploy your version of this project here in my GitHub repository REAMDE.md.

Also, this one's worth noting that I am keeping the browser open at the top to reduce the response time(it will take time at the first call but the consecutive calls will have less response time):

Since I am using a free version of Heroku Dyno, so it might in sleep mode and you may not get any response on the first try, so please try again after a few minutes when you make your first call. Everything should work fine :)

P.S. Cheers! Keep Learning!