Inspiration

In today’s world, social media websites, streaming platforms, and online games are carefully designed to produce as much dopamine as possible in users and create addictions easily. Everyone knows the feeling of opening a laptop to get some work done and ending up on YouTube for six hours, so our team wanted to create a tool to help people avoid these distractions while also working towards their goals and remaining productive. That’s how we came up with Progresso.

What it does

Progresso is a web extension that allows users to create a work timer as well as a to-do list of different tasks. While they have not completed their desired work time or still have tasks left on their to-do list, Progresso blocks out select websites of the user’s choice. So, if the user is easily distracted by social media websites such as twitter or instagram, these websites can be added to Progresso’s block list, and the user will not be able to access them until all of their work is complete. As a result, the user can remain on-task and productive while browsing the internet.

How we built it

We designed Progresso with HTML and CSS for the front-end, and JavaScript for the back-end. In the front-end, Bootstrap was also used to create an aesthetic theme and an easy user experience. In the back-end, JavaScript was used for functional purposes, such as creating the work timer, to-do list, insights page, and blocked websites page.

Challenges we ran into

As this was our team’s first time creating a web extension, we quickly encountered challenges that are uniquely associated with designing an extension. Whether this meant changing all of the HTML/CSS front-end website design strategies we were accustomed to, using chrome storage instead of local data storage, or implementing additional back-end JavaScript functionality that is not required for a regular HTML page, we found and overcame many of the challenges we ran into.

Accomplishments that we're proud of

As an overall concept, we are extremely happy with the unique purpose that Progresso offers. We believe that no other application has served as both a productivity tracker and a distraction blocker in a way that is as useful as Progresso. Progresso’s to-do list work timer, and insights page allow users to stay on task and have a good idea of the work they are getting done. At the same time, the website blocking feature helps them avoid distractions, serving two key purposes of productivity in one web extension.

What we learned

Throughout the past few days building Progresso, we learned a lot about the ins and outs of HTML, CSS, and JavaScript to create a well-functioning and aesthetic final product. In the front-end, we bettered our HTML and CSS abilities by creating a sophisticated design for the web-extension and each of its features. This was also our first time using Bootstrap, and we learned about its advantages while designing an app that sticks to a theme. With respect to the backend, we became a lot more familiar with JavaScript as a language and, in particular, learned a lot about the chrome storage API. This API specifically was very useful in developing the extension, as it allowed us to store information about the user that wouldn't disappear as soon as the user clicked out of the popup.

What's next for Progresso

Being a web extension, we feel as though Progresso is an extremely useful tool for computer users. However, one failure of Progresso is that a user could still access distracting websites by using a mobile device instead. Therefore, the next step for Progresso is to also create a mobile app front-end, such that the web-extension and app can co-exist to also block apps on mobile while the user has not completed their work. This would help Progresso be a more practically useful and holistic idea, as it would ensure that users cannot cheat themselves and get distracted through other devices.

Share this project:

Updates