tl;dr

Summarize a news article quickly with our Google Chrome extension to better understand current news.

Comment

Inspiration

With the world changing daily, it's become more important than ever to stay up to date on current events. However, news articles can be difficult to read due to their inter-related information and need for context. Therefore, we wanted to create something that would help users get over that hurdle by summarizing information in a more digestible way.

What it does

tl;dr is a Chrome extension that summarizes news articles in a single paragraph and helps users to be able to understand current events without need all of the context and historical information about a topic.

How we built it

We used React and TypeScript to build the frontend and used Bootstrap for UI design and components. These 3 technologies helped us to build up the settings and main page where the summarized text is displayed. We also followed a lot of the Google Chrome extension documentation. In terms of the logic and backend, we found an API called Smmry that summarizes articles and lives on a webpage. However, we chose to implement this as a Google Chrome extension to make the experience more seamless with reading an article.

Challenges we ran into

We ran into a multitude of problems as we struggled to deal with the API docs of the chrome extensions. We also needed to completely overhaul our project structure in order to deal with our Typescript as we hadn't built the React app templated for that in the first place and ran into issues in conversions. In addition, there was a multiple of syntax that we've had so many issues running into merely querying the API, grabbing specific activate states for tabs, TypeScript syntax, and more.

Accomplishments that we're proud of

I think this was the first time that the 3 of us had coded before in a such a small team and it forced us to really step up and learn things that were new to us. Felix had never done any TypeScript before and spent the majority of the hackathon building out the main page using a tech-stack he's never used before, but still managed to create some sort of design for the main page by piecing together various web dev skills.

What we learned

This weekend was filled with a lot of challenges and a lot of learning moments. The 3 of us all spent time programming in languages and frameworks that we had never used before and none of us had created a Google chrome extension. We came out of this project having had a better sense of frontend technologies and a little bit more API and Google Chrome extension experience.

What's next for tl;dr

There's a lot of smaller enhancement functionality that could improve a user's experience with tl;dr such as changing the length of the summary and keeping track of seen articles.

Built With

Share this project:

Updates