Pomo

Pomo is an interactive web app that helps teachers keep students focused on tasks and prevents academic burnout. Stay productive with the power of the Pomodoro technique!

Comment

Inspiration

Staying focused in today’s bloated media and technological landscape is difficult. Children face unique challenges in staying motivated and driven. In a survey, 52% percent of parents believe their children have trouble focusing while doing their homework. This number continues to rise with the advent of online education and social distancing. This research, coupled with our own challenge to stay motivated and on track for the hackathon, inspired Pomo!

What it does

Pomo is uniquely designed to meet the needs of young students and educators. Utilizing the science-backed Pomodoro technique, Pomo helps students manage their time by breaking down assigned tasks into manageable intervals.

After 20 minutes of working, students take a 5-minute break. To encourage participation and engagement, as well as differentiate from more adult-orientated Pomodoro timers, we reward students for their hard work by awarding cute virtual characters called Pomo after each task. They can collect Pomos and exchange them for rewards, as well as share their pomo collection with other students.

Pomo isn’t just some online timer. Our product comes with an (adorable) Pomodaur companion that strengthens user engagement by providing a physical form of encouragement. The Pomodaur provides notifications and verbal motivations, helps students navigate the platform, and provides a new medium for students to log in their homework hours!

We created our Pomodaur prototype using Particle Photon(an IoT-enabled chip) in order to lower costs down so our product would be as accessible as possible.

How we built it

We wanted to create a scalable Fullstack application as a proof-of-concept for this idea. We split this into 4 pages; A landing page, a My Pomos page, Timer Page, and signup/login page.

We started with creating a React boilerplate using create-react-app and organizing components into individual folders to keep all code compartmentalized. Additionally, we used dribbble.com to find kid-friendly graphics that would enhance the user experience.

Here, we installed the Bulma design library and created custom Sass files to theme our site for a more kid-friendly palette. By creating JSX components for the Pomodoro timer, fetch requests for user authentication and IoT querying, and React Routing for a multi-page application, the front-end was completed to be functional.

Next, we created a backend using NodeJS with Express as our framework. This backend app serves as our API proxy to connect the IoT Particle Photon chip on the Pomodaur to our frontend web application. The API contains routes to ping, query, and change the lighting of the Particle device. We utilized cloud functions, which are part of the Particle Photon Cloud API, to allow the web-app to send commands to the chip.

Then we had to configure and code the actual Particle Photon chip. Using C++, we coded functions that toggle an onboard LED to rainbow mode, in which the led cycles through a rainbow of colors to indicate break time. Using the Particle Photon APIs, we were able to put these functions and other specific variables on the Particle Photon Cloud. This connection allows the function and variables to be accessed from the cloud API itself.

For our user authentication and database, we decided to use Firebase due to its low cost and easy integration with the React frontend. On our Signup page, we use Firebase to create and store user data to our Firestore database. This data is then used to authenticate our users on the login page.

All of these technologies combined together to create the final Pomo web application. The build folder of this React application is deployed on Netlify and the Express Node API is deployed on Heroku. You can visit Pomo here.

Challenges we ran into

The main challenge we faced was getting firebase to store user data on sign up. This took several hours to fix but eventually, by converting the requests into async functions, we were able to have a fully functioning user system.

Another challenge was being able to display the correct time on the Pomodoro timer and change the duration for break times. Initially, the timer would display the correct animation but the text output would display in seconds. By changing our time calculations and making a reference to Date.now(), this issue was resolved.

Our final challenge was connecting the Particle IoT device to the website. This was relatively new territory for all of us and we had to learn how to configure our chip with the Cloud and how to utilize the Particle Photon Cloud API with our backend express app.

Accomplishments that we're proud of

As a new team, we are proud to have come up with a solution to a real-world problem. Our biggest accomplishment throughout this whole process was deploying a Fullstack application.

The Particle IoT device is connected and can be queried by anyone through our web-app, from anywhere in the world! We are proud of the various technologies we used and learned within this short period of time and hope that this idea can make an impact in the future when fully developed.

We are also proud of being able to work together as one cohesive team. Although Aditya and Rohan were previously acquainted, Cariny and Anoushka met at AngelHacks.

What we learned

We all entered this hackathon with different skill-sets but it’s no exaggeration to say that these past few days have been a learning process for everyone. Some key learnings we are particularly proud of are creating a deployable Full-Stack Application using ReactJS, Node, Firebase & Photon, integrating an IoT device with a web-application, implementing React Hooks and callbacks, and using Firebase for Authentication and Data Store. We also learned how to use Git branches to simultaneously work on a codebase and meet deadlines with more speed. This combination of collaborative learning made the overall experience extremely rewarding for all four of us.

What's next for Pomo

We wholeheartedly believe that our product has the capability to transform the educational environment into one based on focus-based learning, not time. Our next steps will be collaborating with key stakeholders, such as elementary-school teachers and students, to better fine-tune our product to their needs, conduct user testing, expand upon the features and functionalities of the Pomodaur companion, and reach out to school districts to bring Pomo to the world!

Share this project:

Updates