Nothing Special   »   [go: up one dir, main page]
We will be undergoing planned maintenance on February 13th, 2025 at 1:00am UTC. Please make sure to save your work.

pomo-fomo

A web app that uses the Pomodoro Technique to create a virtual study space for students.

Comment 1

Inspiration

Studying sucks. Unless you're with friends, cause misery loves company.

At the start of quarantine, students were hopeful to create familiar study spaces despite attending Zoom University. However, as quarantine progressed, there’s been a 50% decrease in study hours and academic success among students due to the pandemic. The pandemic has stripped us of the usual study resources we had in person such as: libraries, specialized study spaces, and most importantly -- your friends. Studying over Discord or Zoom poses potential distractions and isn’t regulated enough to be considered an optimal study environment.

Now, pomo-fomo gives you a way to virtually suffer alongside your friends in a curated study space with library-esque vibes! With the help of the Pomodoro technique, students will be able to use our web app to help study groups facilitate 25 minute quiet study times and interactive activities during their breaks!

Our goal is to provide students with a virtual and collaborative study environment and combat productivity declines. Our web application hopes to provide a safe and socially-distanced alternative to studying in person and get students out of their lull to make sure they succeed in their academic career.

What is does

“Pomo” comes from the first four letters of “pomodoro” and “fomo” is a commonly used acronym for “Fear Of Missing Out.” pomo-fomo’s goal is to help students combat the fear of missing out on studying with their peers by using our web app that incorporates pomodoro’s time management techniques!

The steps are simple:

Make a room and invite friends.

Study together on camera in sustained bursts of 25 minutes (one “pomodoro”).

After each “pomodoro” do 5 minutes of a group activity!

After four “pomodoros” take a 15 minute break.

Rinse and repeat.

But what is the Pomodoro Technique? And why are we using it?:

The Pomodoro Technique is a well known time management technique to help those with goldfish-attention-spans and those who frequently experience burn-out manage their productivity effectively. Developed in the 1980’s by Francesco Cirillo the name is a homage to the common tomato shaped kitchen timer (“pomodoro” is a sauce made from tomatoes). The system is based on the documented effectiveness of dividing your work and breaks into regular, short increments to avoid feeling overwhelmed by your tasks.

The Pomodoro Technique has been proven to:

  • Work with the time you have -- not against it!
  • Fight cognitive boredom with consistent short breaks
  • Increase work turnover and quality
  • Decrease distractions in your workspace
  • Eliminate burnout
  • Makes big tasks seem less intimidating!
  • And much more !

The method is a simple and effective way for individuals to be productive.

How We Built It

Through the blood, sweat, and tears prompted by typing a combination of keys into the keyboard that told the computer how our application should run.

More specifically, we built several modules concerning the different aspects of our application, including our React.js client, an Express/Node.js server handling our interactions with the Twilio Video API, as well as another Express/Node.js server which uses Socket.IO to have all users communicate room state with each other in real-time. We orchestrated these modules by simply making HTTP requests to get the necessary JWT tokens to access the video feeds provided by Twilio, as well as establish the web sockets needed for the real-time communication features.

Backend

  • Node.js
  • Express.js
  • Twilio Video API
  • Socket.IO

Frontend

  • React.js
  • Bootstrap

Challenges we ran into

The beginning was challenging as our team tried to decipher each person’s technical capabilities, technologies people wanted to work with, and what each person wanted to focus on and learn. We tried to make sure everyone was working on a part of the project they were interested in and had a meaningful hackathon experience!

After the idea brainstorming phase, the coding phase began, and with it multiple challenges for each person rose as we all at one point reached an unfamiliar technology. We found that talking out problems with each other was the best solution to address programming roadblocks because it allowed us to focus on what was causing the problem. Additionally, it was a great way to get a change of pace from silent programming.

Another big challenge we encountered was running out of time to actually deploy this application to truly achieve a multi-user experience. While running our application in our own local development environments technically did provide that experience if we ran the client application in multiple browser tabs, the video feeds were all coming from the same source, so our vision didn’t feel entirely complete.

Accomplishments that we’re proud of

Our team was extremely proud of being able to get main functionalities like creating a countdown timer, getting the participant videos to function and align the way we wanted them to, and mapping how the system would all come together.

What we learned

  • New technologies.
  • Collaborative programming methods and how to effectively work in a remote development environment.
  • Communicating with people of different expertises and work styles.
  • A deeper understanding of front-end and back-end development
  • That each person has something unique and great to offer and that if the team works together everyone can add value!

What’s next for pomo-fomo

We plan on expanding pomo-fomo from being a web application to a mobile application accessible by both iOS and Android users! In addition, we’d love to be able to include a larger variety of activities for the users to participate in during the breaks and add more customizable profiles for each participant.

Some Additional Features

  • Screen sharing capabilities
  • Ability for user to turn their own video on and off
  • User’s ability to upload break time activity videos
  • Fun games during the break time
  • Cool transitions within our app for a more satisfying user experience.

Code Modularity

If we had more time, we would have made a distinction between functional components vs. pages. Currently, our file structure is messy with little distinction for coders to see what each file does without actually examining the code in the file itself. Some files additionally could have been split up into subfiles for more digestible pieces of code. Also, would have preferred to implement modularized scss files rather than one bulky App.css file.

+ 3 more
Share this project:

Updates