Inspiration
Picture Khang, an MCIT student, working tirelessly on his 593 homework on Codio for hours. His concentration starts to fade, his shoulders grow tense, and his mind becomes cloudy from staring at endless lines of code. Out of nowhere, a playful pop-up appears on his screen, encouraging him to take a well-deserved break. That’s when we realized the importance of promoting wellness awareness, which sparked the idea for our project. And that's how we started creating a solution to remind students and professionals to prioritize their well-being during long working sessions.
What it does
Paws For Break is a Chrome extension designed to promote mental-health, lower stress level and improve focus through nature-inspired breaks. It periodically reminds users to take a pause from work, transporting them to calming, immersive nature scenes with soothing sounds and interactive relaxation activities. It’s the perfect way to boost wellness — right from your desk!
How we built it
We used JavaScript as the core of our project for logic and interactivity, with React for the frontend to create modular components like the dropdown menu and Play/Pause functionality. CSS was used for styling to keep the interface clean and user-friendly, while static assets like icons and audio files were dynamically loaded from React's public folder. The project was deployed on GitHub Pages, where we also managed the repository.
Challenges we ran into
Creating the reminder Chrome extension presented its own challenges, such as handling notifications and storing local reminder frequency, all while maintaining a simple interface. While working on the website with many animations, we faced difficulties achieving smooth transitions between different scenes, and fixing timing bugs proved to be tricky. Additionally, using large video files for the background caused performance issues, and the GitHub repository didn’t support these large files so we have to use large file management for those.
Accomplishments that we're proud of
One of our biggest accomplishments was creating a fully functional and interactive app within the short timeframe of the hackathon. We’re especially proud of how seamlessly the dropdown menu, Play/Pause functionality, and environment switching came together. Additionally, we successfully integrated calming audio tracks and icons dynamically, tailoring the user experience for Forest and Ocean environments. Finally, deploying the app on GitHub Pages made our project accessible and user-friendly.
What we learned
From the technical perspective, we have learnt how to use React, Node.js and CSS. It is the first time for some of us. We also Learned to prototype solutions rapidly and developed a better understanding of version control collaboration using Git/GitHub with multiple team members.
From the product side, we need to understand user needs and pain points to craft a solution that truly addresses user challenges to have an effective product. We discovered new debugging techniques to troubleshoot issues more efficiently in a high-pressure environment and understood how to break down complex problems into manageable steps to avoid feeling overwhelmed.
What's next for Paws for Break
We have a backlog of ideas on product development and expansion from improved levels of personalization, a greater library of natural sceneries and interactions, and so on. We will conduct user testing to gather feedback and insights to guide our future product development.
Log in or sign up for Devpost to join the conversation.