Sections

Make your website/blog stand out by showcasing a wall of selected tweets that are elegantly designed to draw people's attention to it.

Comment

Inspiration

I was inspired to create this project after seeing that https://publish.twitter.com/ hasn't been updated in a while. I found myself always visiting websites that have a Twitter timeline embedded and I thought there has to be a more engaging way to embed a Twitter timeline into your site. I decided to create my version of it, though slightly different and more customizable.

What it does

Sections allows you to embed a customizable Twitter timeline into your website. You choose the tweets you want to be displayed on your timeline, and you can continue adding/ deleting tweets into that same timeline and it will get automatically updated wherever that timeline is embedded.

How we built it

I choose to build Sections using an all typescript/javascript stack. The frontend is using Nextjs and is hosted on Vercel. The backend is using node.js and is hosted on Heroku. The database, PostgreSQL, is also hosted on Heroku, and the Redis cache is hosted on RedisLabs.

I decided to use GraphQL as the main method of API communication, as I wanted to get more familiar with it and found it pleasant to use. I didn't use any Twitter SDKs to communicate with the Twitter API but went and single-handedly sent API requests using Axios as it helped me better understand how the Twitter public API is organized.

My PostgreSQL schema contains a Users table and a Tweets table. There is a one-to-many relationship between users and tweets. The tweets table is very simple, it contains a unique ID, userId, and the tweet URL. When the twitter wall is displayed, the frontend sends a GraphQL query to the server and expects it to return an array of tweets. The server queries the PostgreSQL database, gets all the Tweet URLs that the user added to their "tweet timeline", and then checks the Redis cache to see if the tweet information (user, profile pic, likes, text, etc.) is already there. If that information is not in the cache, we send a request to the Twitter API to retrieve such information and store it in the cache for future use. Each tweet's cache TTL is 5 days.

Challenges we ran into

I ran into quite a few challenges throughout developing this application. The first challenge I ran into was due to the rate-limiting implemented by the Twitter API. I was nearing the end of finishing a working prototype of the application, and then my requests to Twitter's API started failing every now and then. I kept getting a "429 Too many requests" error and then investigated Twitter's rate-limiting guidelines to learn more about it. I decided to incorporate Redis into my application to help resolve this issue, as well as speed up the process of retrieving tweets’ information.

Another challenge was building the layout for the timeline of tweets. I was having issues with positioning the tweets next to each other without gaps. I first used flexbox and its properties to help position the tweets next to each other, which proved to be a bad idea. I then switched to using CSS grids, in which I experienced the same issues as with flexbox. Finally, I got the tweet layout to appear as I wanted them by using CSS columns. Each tweet component has the same width, but different heights depending on its contents, and everything is neatly positioned.

One last challenge I ran into was styling the tweets component. I ran into a few iterations of building it before settling on a final product. There are a lot of things that compose a tweet: images, links, text, etc. I tried to mimic Twitter's way of displaying tweets to make them very familiar to our users. There were challenges with different sizes of tweets and how to display the tweet's contents into a component. Images were also a challenge, displaying tweets w/ 1 image is very different than displaying tweets w/ 4 images.

After battling with CSS for a while, I figured out a way to properly display tweets with all of their contents.

Accomplishments that we're proud of

I'm really proud that I've managed to build out a such application that integrates the use of many different technologies. A couple of months ago I would've never seen myself capable of building something like this, but after a lot of reading, practicing, and learning, I'm really proud to have developed the modern-day tech skills that helped me build this website.

What we learned

I learned a lot from building this site. First of all, It was my first time using a couple of new technologies such as GraphQL, Apollo client & server, and Prisma in a full-stack application. It was also my first time integrating OAuth2.0 and OpenID connect into an application “(Login w/ Twitter or Google”). I found myself spending a lot of time reading the documentation on these technologies to help me navigate my way through them. It was also my first time using the Twitter API, which I found very pleasant to use due to being supported with helpful resources.

What's next for Sections

There are still many areas of improvement for Sections. A couple of features that I want to add are:

  • Dynamic tweet timeline: have a tweet timeline of users / a timeline that is dynamically updated based on a user's likes/retweets, or hashtags.
  • Add customizable styles for the timeline: Allow user's to change the color template of the tweet wall to better match their application
  • Allow users to have more than one timeline they can build: Currently, a user can only have one tweet timeline.

Built With

Share this project:

Updates