pomoplay

Let's have fun studying! pomoplay is an application that eliminates distracts for students while they are studying and rewards them with breaks at intervals. Inspired by the Pomodoro Technique.

Comment

Inspiration

We are both students who often have a hard time concentrating when studying. Oftentimes notifications on our phone will distract us, or we will take a short break that devolves into scrolling on TikTok for 30 minutes. We wanted to create a product that would help solve this problem.

We were also inspired by the Pomodoro Technique. It is a popular time management technique that involves using a timer to study in short and intense sessions without any distractions; this creates a cycle of 25 minute study sessions followed by a 5 minute break.

What it does

pomoplay enables users to create better studying habits. On our Lockdown page, users can determine for how long they want to study (up to 5 hours) and how many breaks they would like throughout. When they are studying, the app "locks" the user's phone. They are unable to swipe out of the application until after the entire study session is completed. When it's time for a break, the app notifies the user. They can step back from their study materials and walk around, take a restroom break, or play a game hosted on our app. Once break time is over, the app goes back to locking the user's phone until it's time for the next break. While the user is studying, the app displays a timer with a countdown until the next break.

To incentivize users to study more often, we also implemented a currency system in the app. For every five minutes that the user studies, they receive a coin. Users can then use these coins to purchase a play at one of our in-app games. Users also will receive badges whenever they hit certain milestones on our app, which are displayed on a user's profile page.

How we built it

We used React JS to build a web-based version of the application. To help build our components, we used React Bootstrap and Material UI's bootstrapping frameworks. We then hosted our application using GitHub pages. Before implementation, we designed our app first using a low-fidelity sketch to map out the general flow of our app and what screens were needed, then we used Figma to create a high-fidelity wireframe of the product.

Challenges we ran into

  • Learning how to use the Material UI bootstrapping framework
  • Formatting components using CSS
  • Figuring out how to create the Timer component of our application

Accomplishments that we're proud of

  • Becoming more familiar with using bootstrapping frameworks
  • Designing a wireframe of our product on Figma
  • Learning how to host React apps on GitHub pages
  • Creating an application that we would use ourselves to improve our study habits

What we learned

  • Creating a design framework at the beginning of our development process
  • Finding and implementing the code for various components from the prototype into the app
  • Using Material UI as a bootstrapping framework
  • Creating a high-fidelity prototype of our product before implementation

What's next for pomoplay

  • Have the application restrict the user from swiping out of the application until the timer is done
  • Allow users to add each other as friends
  • Create a leaderboard so people can compete

Built With

Share this project:

Updates