Inspiration

A common problem most of us face is having to context switch between different tasks making it hard to stay on track and know exactly what to do.

What it does

ClearNext is a workflow and productivity application designed to eliminate digital noise and help you achieve "pure focus". It acts as a bridge between various communication channels (like Slack and Meetings) and a calm, gamified workspace. The app is structured around four key areas to streamline deep work: • The Hub: A central command center where you see your "Queue" of tasks pulled from different sources. Completing tasks here rewards you with Oxygen (O₂), which is used to maintain your workspace. • Focus Mode: A dedicated deep-work interface that triggers a timer (e.g., 40 minutes) for a specific task. As you work, you see a plant grow from a Sprout to a Giant, providing a visual sense of progress. • Koda the Koala: productivity companion. Koda reacts to your work habits—he needs O₂ to stay happy and energized, but he also gets "sad" if you try to exit a focus session or logout early, creating a gentle emotional nudge to stay on track. • Daily Vibe Tracking: A simple system to log your mood (from "Blooming" to "Wilting"), helping you track your mental energy alongside your task completion.

How we built it

Frontend Tailwind: We migrated to TypeScript early to ensure our "Oxygen" and "Task" data types remained consistent across the entire app, preventing bugs Styling: Tailwind CSS 4.0 with Framer Motion. We used Tailwind for rapid, responsive UI development and Framer Motion to create the "breathing" animations for Koda and the smooth transitions between the Dashboard and Focus Mode Database: Supabase. This provided us with a reliable way to store productivity APIs to handle tasks from Slack and Google

Challenges we ran into

Designing for "Calm" environment in a high stress setting

Accomplishments that we're proud of

The Seamless "Focus-to-Growth" Engine Emotional UX & The "Koda" System Clean, Modular Architecture Team Collaboration Intentional Design Aesthetic

What we learned

Building ClearNext was as much about technical hurdles as it was about defining a new way to work. During the development of this, the team gained critical insights into full-stack integration, emotional design, and the realities of collaborative engineering.

What's next for ClearNext

• analyze task urgency • Dynamic Focus Recommendations: If the system detects a heavy meeting schedule, Koda might suggest shorter "Micro-Focus" sessions instead of the full 40-minute block. • Community Gardens: collaborative features where teams can "pool" their Oxygen to grow a shared forest, turning collective productivity into a visual team achievement. • Koda’s Evolution: Allowing Koda to "level up" or change appearance based on long-term focus streaks, making the emotional bond with the user even stronger.