Inspiration In a world filled with digital distractions, the line between being busy and being productive is easily blurred. We were inspired by the universal struggle to stay focused and the common feeling of being overwhelmed by large projects. We noticed that most productivity tools are passive; they track time or list tasks, but they don't actively help you think or plan. Inspired by the clean, efficient design of developer-centric platforms like Vercel, we set out to create a tool that wasn't just a utility, but an intelligent partner that helps you build and maintain focus—to build momentum.
What it does Momentum is an intelligent productivity dashboard designed to be your personal focus coach. At its core, it's a fully customizable Pomodoro timer integrated with a smart to-do list. However, its true power lies in its AI capabilities, powered by the Gemini API:
AI Task Breakdown: Enter a large goal like "Launch a new website," and the AI will break it down into small, actionable sub-tasks.
AI Prioritization: With a single click, the AI analyzes your to-do list and intelligently reorders it into the most logical and efficient sequence for your day.
AI Daily Summary: At the end of the day, Momentum provides an encouraging summary of your accomplishments and a motivational note for tomorrow based on your completed and remaining tasks.
With a sleek, cinematic design and subtle animations, Momentum makes the act of being productive feel empowering and satisfying.
How we built it Momentum was built from the ground up using core web technologies to ensure it's fast, lightweight, and accessible.
Frontend: The structure is built with semantic HTML, and the sleek, responsive user interface is styled using Tailwind CSS.
Logic & State Management: All client-side functionality, including the timer, state management, and DOM manipulation, is handled with vanilla JavaScript. User settings and tasks are saved to localStorage for data persistence between sessions.
AI Integration: The app's intelligence is powered by the Gemini API. We make asynchronous fetch calls to the API for three key features: generating structured JSON for task breakdowns, reordering task lists, and generating natural language summaries.
User Experience: We used Tone.js to create non-intrusive audio alerts for the timer. The polished feel is enhanced with custom CSS animations and a mouse-following sparkle effect.
Challenges we ran into One of the primary challenges was crafting precise prompts for the Gemini API to ensure it returned reliable, structured JSON data, especially for the task prioritization feature. This required significant iteration and testing. Another challenge was managing the application's state (timer status, task lists, user settings) in vanilla JavaScript without the abstractions of a larger framework, forcing us to be meticulous with our code organization. Finally, integrating multiple powerful features while maintaining a clean, minimalist, and intuitive UI was a key design challenge we focused on overcoming.
Accomplishments that we're proud of We are incredibly proud of creating a tool that feels both beautiful and genuinely useful. The AI-powered features are not gimmicks; they solve real problems of planning and prioritization that often lead to procrastination. We're also proud of the polished user experience—from the Vercel-inspired theme and cinematic title to the fluid animations and sparkle effect, every detail was crafted to make the app a pleasure to use. Building this entire, feature-rich application using only vanilla HTML, CSS, and JavaScript is an accomplishment that demonstrates a strong command of fundamental web development skills.
What we learned This project was a fantastic learning experience in the practical application of large language models in a user-facing product. We learned how to design effective prompts, handle asynchronous API calls gracefully, and parse structured data to dynamically update the UI. It was also a great exercise in robust, framework-free JavaScript development, reinforcing our understanding of state management, event handling, and the DOM.
What's next for Momentum The journey for Momentum is just beginning. Our roadmap includes:
User Accounts & Cloud Sync: Integrating a backend service like Firebase Firestore to allow users to sign in and sync their tasks and settings across all their devices.
Expanded AI Features: Introducing AI-powered time estimation for tasks and generating weekly productivity reports with insights and suggestions.
Calendar Integration: Allowing users to connect their Google or Outlook calendars to automatically import events and tasks for the day.
Themes & Customization: Adding more theme options and further customization to allow users to personalize their focus environment.
Log in or sign up for Devpost to join the conversation.