Dedicora - Focus, Timing, and Productivity Flow

Dedicora is an accessible, AI‑powered focus and productivity web app with task breakdowns, timers, and performance reports, built with Next.js and Tailwind.

Comment

Inspiration

Staying focused during hackathons (and everyday work) is hard. We wanted to build a tool that doesn't just set a timer — it actually understands your task, breaks it down into manageable steps using AI, and guides you through a structured productivity flow with voice guidance and accessibility at its core.

What it does

Dedicora is a productivity web application that guides users through a structured five-stage focus flow designed to turn overwhelming tasks into manageable action. The experience begins with a Welcome stage where users configure accessibility settings such as audio narration, color-blind modes, and dark or light themes. In the Enter Task stage, users describe what they need to accomplish. During Assign & Plan, they can either choose “Only This” for a single focused session or select “Break It Down,” where Google Gemini intelligently decomposes the task into 3–6 actionable sub-steps with realistic time estimates. Once planning is complete, users move into the Timer stage, where they work through each step using a countdown timer supported by an animated stickman companion, a task sidebar, pause and resume controls, and a built-in notes panel. After the session, the Report stage generates an AI-powered productivity summary complete with bar charts and key insights. The entire experience is enhanced by voice narration powered by ElevenLabs, with each stage featuring its own text-to-speech guidance to create an immersive, accessible workflow. Users can toggle the voice experience on or off at any time through settings.

How we built it

Next.js 16 (App Router) with React 19 and TypeScript, Tailwind CSS v4 + shadcn/ui (Radix primitives) for a polished, accessible UI, Framer Motion for smooth page transitions, Google Gemini 2.5 Flash for intelligent task breakdown and productivity report generation, ElevenLabs for AI-generated voice narration across all pages, Recharts for data visualization in the productivity report, Lucide React for iconography, Custom SVG stickman animation with working/break/done states Space Grotesk + Bai Jamjuree typography

Challenges we ran into

One of our main challenges was ensuring that Google Gemini returned consistently structured JSON for task breakdowns, which required careful prompt engineering and iterative refinement to prevent malformed responses. We also had to handle browser autoplay restrictions when integrating voice narration from ElevenLabs, designing a solution that respected user interaction requirements while maintaining a seamless experience. Additionally, building a fully responsive and accessible interface — including support for protanopia, deuteranopia, and tritanopia color-blind modes — required thoughtful UI design and testing to ensure usability across different visual needs.

Accomplishments that we're proud of

We’re particularly proud that the AI-powered task breakdown genuinely analyzes each user’s specific input rather than relying on hardcoded or generic steps, creating a personalized and meaningful planning experience. The app also features a full accessibility suite, including an audio toggle, three color-blind modes, dark and light themes, and persistent settings to ensure an inclusive experience. Combined with a clean five-stage flow, smooth transitions, and a playful stickman companion, the interface feels both structured and engaging. To complete the experience, users receive AI-generated productivity reports with real chart data, turning each focus session into measurable insight.

What we learned

Building Dedicora taught us that integrating AI into real workflows requires more than just calling an API. We learned how critical prompt engineering is when working with Gemini to enforce consistently structured JSON for dynamic UI rendering, and how small wording changes can significantly impact reliability. We also gained experience managing complex multi-stage state in Next.js, coordinating smooth transitions, and handling browser autoplay restrictions when integrating AI voice narration. Beyond the technical challenges, we learned the importance of designing accessibility-first from the start. Supporting multiple color-blind modes, theme customization, and voice guidance pushed us to think in systems — using semantic colors, strong contrast, and persistent settings. We also saw how thoughtful UX details — animations, structured flow, and real data visualizations — can meaningfully impact motivation and engagement in productivity tools.

What's next for Dedicora

Next for Dedicora, we plan to introduce multi-session history and long-term productivity tracking to help users measure progress over time. We also aim to support collaborative task flows for team hackathons, integrate Pomodoro-style break scheduling for healthier focus cycles, and eventually develop a mobile-native version to make the experience accessible anywhere.

Built With

Share this project:

Updates