Inspiration
Have you ever tried to prepare for an exam or complete an assignment but had difficulty focusing on your studying? As students ourselves, we understand that more people have become reliant on tools to help develop good study habits. We have used study helper apps in the past such as Forest and Study Bunny that provide an ‘aesthetic’ yet motivational mode of studying. The calming colour palette was influenced by the studygram aesthetic. Inspired by the effectiveness of the pomodoro technique, we wanted to create our own twist on the pomodoro study technique applications and provide a gamification aspect by developing our own character and additional features such as soothing music and short mini-games, to help you with but at the same time not distract you from your studies.
What It Does
FocusMode is a web application that helps you focus on your studying. Mode, your whimsical virtual study buddy who is one part monkey and other part dinosaur, will guide you through an effective study session inspired by the pomodoro technique. You can choose how long your study and break sessions are by changing the settings. You can also play or pause calming music with the music player to help your focus. Click the start button to begin the timer and focus on your studies. Your buddy Mode will give you motivation and encouragement throughout. Once your study session is over, you can take a break also timed by FocusMode. During your break, you can choose to destress by playing a mini-game with Mode, like Tic-Tac-Toe.
How We Built It
We started with a prototype on Figma, to determine the user flow, to lay out the features we wanted, and to visualise the user interface. We drew and animated the character Mode using Procreate. Then, we translated our prototype into code with React.js to build the application.
Challenges We Ran Into
As most of us had more back-end experience and limited front-end experience in React, it was hard for us to turn our vision into a reality in a short amount of time. We had many more ideas that we originally wanted to implement into the app to make it more engaging such as connecting the music player to either Spotify or Youtube, creating more mini games such as Rock, Paper Scissors and also having the motivational quotes change at certain points in the study session. We also had difficulty collaborating together on GitHub but managed to figure it out in the end.
Accomplishments That We’re Proud Of
It was some of our team members' first hackathon or first time working with people around the world in different time zones so it was definitely a great experience to build something together!
What We Learned
We all expanded our knowledge in React. One team member learned how to make animated gifs and improved on Figma prototyping skills. We took an attempt at implementing the features mentioned above, but in the end we recognized that if we wanted to make a complete application with the core functionality, we needed to scale back and keep it simple. While we did not finish some of what we had wanted to do, we still learned a lot in the process, such as connecting to Spotify’s API.
What’s Next
We want to make FocusMode more engaging and thematic! We would like to incorporate a music player that has a playlist of songs from Spotify, make more mini-games that you can play with Mode, add a user inputted task list with the ability to check off tasks, as well as more interactivity with Mode, such as being able to respond to questions or trivia during the study breaks! In the future we hope Mode can provide more study tips or motivational quotes as well. Additionally we would like to make the app mobile friendly, making a responsible web app as well as coding in React Native to make a mobile app version!
Built With
- figma
- react
Log in or sign up for Devpost to join the conversation.