Cattucino

Grab a cup of coffee and be productive! Listen to the ambient sounds of your choice and follow the Pomodoro method timer!

Comment

Inspiration

In the beginning, we were shuffling in between a rewarding reminder app and something to really help with productivity, so we merged those two ideas together and created a virtual cafe setting with ambient noise, a list of productive ideas, and a Pomodoro method timer to help with productivity. We were inspired by virtual cafes web apps such as (ex: imissmycafe), as well as the Pomodoro method and its positive effect on productivity. COVID has impacted our ability to study in coffee shops with the soothing ambient noise, and so we wanted to recreate the experience in a web app, while also having an effective timer that holds the "25-5-25" Pomodoro productivity method.

How we built it

First, we created a general idea of what we wanted to build and how we wanted it to look like by just prototyping a layout in Figma and creating a backdrop, all of us contributed ideas on what the final product could look like. For the site itself, we used HTML, CSS, and JavaScript, through a repository in GitHub and by using the Pages function. Those who programmed the main site itself used their personal IDEs and pushed the changes to GitHub through the "commit" function. Throughout the process, we added and deleted a lot of our code constantly. We used online resources such as W3Schools and GeeksForGeeks to learn how to design a website from the ground up because we were either new to website creation or haven't done it in a long time and needed a refresher. One large hurdle we had to overcome was the timer and implementing the sound, which undoubtedly took the longest amount of time, but we overcame the hurdle and were able to implement it the way we wanted to. We collected all of the sounds through a website called freesound.org.

Accomplishments that we're proud of

This was everyone's first hackathon! We are happy to have achieved as much as we did throughout this project, as web design is a first for most of us or a really big refresher. There were many hurdles we had to get through, such as timer creation, sound implementation, and footer alignment. Although the project may look slightly different than our original idea, we are very happy with the final product.

What we learned

We learned in more detail how HTML, CSS, and JavaScript interact with one another, and what the specific roles of each one are. HTML for the text, CSS for the styling, and JavaScript for everything else that is more complex such as animation and sound. Through GitHub, we learned how to collaborate in a way so that no one's code gets committed over somebody else's, and how to implement the Pages function of GitHub. In addition, we learned that having a large variety of skillsets on the team is valuable, as it brings more perspective and abilities to the table.

Team Members:

  • Genia Druzhinina: Programmer, created site favicon
  • Sara Alvarado: Programmer
  • Katie Zhao: Created backdrop
  • Sophia Lee: Prototyped layout
Share this project:

Updates