HealthTab

Dashboard
On Click of Calender
After Selecting the mood on calender
Showing up message of break time

Inspiration

We wanted to turn the Chrome new tab into more than just a search page. With people spending hours online, we saw an opportunity to subtly encourage wellness—hydration, mindfulness, and focus—right where it matters most: your daily browser routine. HealthTab was born to promote healthy habits without disrupting workflow.

What it does

HealthTab replaces your new tab with a smart wellness dashboard. It tracks water intake with animations, displays daily health tips, offers a calendar with progress tracking, and provides quick access to Google services like Gmail, Drive, and Calendar—all while looking modern and responsive.

How we built it

We used HTML, CSS, and JavaScript with Chrome Extension APIs. chrome.storage stores user data like daily water progress. chrome.alarms resets stats at 12 PM. We used Lottie for engaging animations, implemented a timeline and calendar for progress, and styled everything with a Montserrat-based responsive layout.

Challenges we ran into

Setting up the Chrome alarms correctly and ensuring smooth syncing of chrome.storage was tricky. Getting animations to trigger based on real-time user interaction and updating the calendar UI dynamically also took time. We fine-tuned performance and layout for the best experience.

Accomplishments that we're proud of

We successfully designed a fully working Chrome extension that feels intuitive and delightful. HealthTab gives users an elegant and fun way to track health. We’re proud of the custom animations, daily reset logic, real-time calendar updates, and overall modern UI experience.

What we learned

We deepened our knowledge of Chrome Extension APIs, particularly storage, alarms, and event listeners. We also learned how to build clean, responsive UI components and synchronize animations with user actions. It taught us how small habits can be nudged via subtle UX changes.

What's next for HealthTab

We plan to add features like mood journaling, screen time analysis, meditation timers, user authentication with Google, and cloud sync. We’ll refine the UI and make it even more interactive and personalized—building HealthTab into a true wellness dashboard inside your browser.