Inspiration ✨

As all three of us are full-time high school students who are much too familiar with struggling to be productive and getting tasks done, we tried thinking of a way to eliminate distractions and stay motivated. According to a UC Davis health article, COVID fatigue has been prevalent throughout the pandemic, which results in a severe consequence prominent among students -- a lack of motivation to complete daily tasks, particularly homework. In order to make studying more fun, and to alleviate the fatigue, we combined a Pomodoro timer with something we all love -- boba -- and made a web app out of it!

What it does 🕐

ProductiviTEA is a web app that merges the Pomodoro technique and a milk tea cafe experience to create a fun study session for high schoolers and young adults. The Pomodoro method is a way to focus on a task by working in intervals, consisting of long periods of work and small breaks in between. The user is greeted by a user-friendly homepage and is prompted to enter their name for a personalized experience. Next, they will choose a boba order and customize their order with ice and sugar levels, representing their study and break time. Users are also able to choose a cafe layout that suits their preferences, and the final step is to start the brewing & study session, with a built-in to-do list and lofi cafe beats.

How we built it 👩‍💻

We built ProductiviTEA using HTML, CSS, and Javascript on Glitch, and used Figma for prototyping. Our icons and images were created using Assembly. We registered our domain name on

Challenges we ran into 💗

As all three of us have very limited experience with HTML, CSS, and Javascript, we struggled with debugging and fixing our code when the features of our web app weren't working properly. We also struggled with creating the to-do list, but in the end, we finished creating a fully working web app!

Accomplishments that we're proud of 💻

Although we all have limited coding experience, we're big on UI/UX design so we are very happy with how our web app design turned out. We aimed for a minimalistic, user-friendly design with a simple color palette that can help create a seamless user experience. All of the features of our Pomodoro timer are also working properly, and we are proud that we finished creating a web app that each one of us is happy to use in our daily lives.

What we learned 💭

We gained experience and learned a lot of HTML, CSS, and Javascript while we were building the features of our Pomodoro timer, such as the timer, to-do list, and music player.

What's next for ProductiviTEA 📱

We hope to turn ProductiviTEA into a mobile app that users can download on their phone for increased convenience and accessibility, as well as implement new features such as notifications and an improved UI/UX design. We also want users to be able to share their study session link with friends so they can study together.

Built With

+ 1 more
Share this project: