Pomodeck

Inspiration

Productivity shouldn't feel like a chore. We were inspired to bridge the gap between "deep work" (Pomodoro) and "long-term consistency" (Habits). Most apps do one or the other; PomoDeck brings them together in a calming, green-tinted environment designed to reduce cognitive load.

What it does

PomoDeck is a unified productivity dashboard. It features a customizable Pomodoro timer with active task selection, streak tracking, and custom soundscapes. The integrated Habit manager allows users to track daily rituals with heatmaps, drag-and-drop reordering, and beautiful weekly/monthly progress charts to visualize growth over time.

How we built it

The application was built using React and Vite for a lightning-fast frontend, styled with Tailwind CSS and shadcn/ui for a soft, rounded aesthetic. We used Supabase for real-time data persistence and authentication. For the interactive elements, we integrated @dnd-kit for habit sorting, Recharts for data visualization, and Framer Motion for tactical UI feedback (like the habit completion burst).

Challenges we ran into

One of the biggest hurdles was ensuring the Pomodoro timer remained accurate when the browser tab was backgrounded; we solved this using a dedicated Web Worker. Additionally, synchronizing local drag-and-drop states with the database in real-time while maintaining 60fps animations required a deep dive into optimistic UI updates.

Accomplishments that we're proud of

We are particularly proud of the Habit Completion Animation—it makes every check-in feel like a small victory. We also successfully implemented a modular color system that allows for a "Green-shade" theme that works perfectly across both light and dark modes without losing accessibility.

What we learned

We gained extensive experience in Web Audio API synthesis for our custom chimes and learned the intricacies of managing complex, persistent state for multi-feature productivity tools using Zustand.

What's next for PomoDeck

The roadmap includes AI-driven task prioritization, a mobile companion app built with React Native, and "Focus Rooms" where users can sync timers with friends for collaborative deep work sessions.

Built With

• medo