Twitter Skyline

Home Page
Skyline Page

Inspiration

In the age of technology, people are starting to feel isolated and disconnected. Our mission for Twitter Skyline is to bring people back together and enable a sense of community and social togetherness. What better way is there to connect with people across the globe than to create and share a unique 3D skyline generated from a country's trending topics? Using one of the most globalized social media platforms, Twitter, Twitter Skyline is a great way to connect people and present a snapshot of the ever-changing information flowing through a country.

What it does

Twitter Skyline lets users pick a country and pulls all of the trending Twitter topics for this country. The metrics for these topics are then used to generate a 3D skyline. Each building represents a trending topic, and the height of the building is the tweet volume for this topic. When each building is clicked, some of the top tweets from that topic are displayed in a pop-up, along with a button that will redirect the user to Twitter to see more tweets about that topic.

How we built it

Our app uses Typescript and is built on the Nextjs framework. There are many API calls to Twitter, including standard search, trends, and oEmbed. The 3D modeling was built using the three.js framework. We used post-processing for the bloom effect and ray tracking to hyperlink each building to a twitter topic. The metrics fetched from the Twitter API are used to render the 3D buildings that are put together to build an entire skyline.

Challenges we ran into

One of the main challenges we ran into was finding a viable public, free API to use for the metrics behind the 3D skyline design. We were debating between many API's, but settled on Twitter, because of its robustness and insightful metrics. Another challenge we ran into was learning languages and frameworks from scratch. We were all knew to Three.js and 3D modeling, as well as Typescript. Learning these tools and producing a project that incorporated all of our ideas was a challenge in the time limit.

Accomplishments that we're proud of

We are very proud of how much technical knowledge we gained. A lot of the frameworks we learned were new to us, and we are super happy that we could learn and produce a cool product simultaneously. We are also proud of the potential our product has. Twitter Skyline is the epitome of global connectivity and lets people get a real insight into the ideas of people in other countries.

What we learned

In addition to learning technical skills, such as Typescript and three.js, we also learned a lot about collaboration, taking challenges on in stride, flexibility, and the importance of constantly iterating. We ran into countless problems during development, but we made sure to communicate well with each other, in order to keep progressing and improve. Constant iteration was important, because it let us keep improving our final product.

What's next for Twitter Skyline

The next steps for Twitter Skyline would be to have a 3D globe model to display the skylines, where users can rotate the globe and easily view the skylines for countries. Additionally, we want to incorporate more features for sharing the skylines on other social media platforms to further promote connectivity.