FocusFlow

Inspiration

Our goal was to help students stay organized, reduce distractions, and make sense of complex material all in one place. As students ourselves, we constantly struggle with staying focused while studying on our computers. Most productivity tools are designed for mobile devices, but there are a lot of distractions that exist in the browser itself which is where studying really happens.

What it does

As a focused study hub built for college students, FocusFlow blends task‑based productivity with an intelligent chatbot, an interactive knowledge graph, and distraction‑blocking tools. It keeps learners on track with gentle check‑ins, helping them stay organized, understand complex topics visually, and maintain steady momentum throughout their study sessions, making deep, focused learning feel natural and sustainable.

How we built it

• React: This tool powers the components of FocusFlow, enabling UI elements such as the task panels, the chatbot interface, and knowledge graph view. This helps make the application scalable and responsive to user interactions in real time.

• TypeScript: This tool enables static typing and ensures safer component logic and clearer interfaces between features, specifically task management, AI responses, and state handling.

• Tailwind CSS: This tool allows FocusFlow to maintain a modern appearance and enables rapid and consistent UI design across the application.

• Lovable: This tool helped us create the initial version of the FocusFlow application, which we then exported to GitHub and VS Code to apply changes locally.

• Vite: This tool serves as the main development server for deploying the application locally, allowing us to run and view the code on a web server.

Challenges we ran into and What we learned from them

Along the way, we faced several challenges that shaped how we built FocusFlow. Initially, our AI responses were vague and often didn’t align with our intended layout or logic, which taught us the importance of effective prompting. We learned to give clearer context, define the AI’s role—such as explicitly treating it as an expert web developer—and use actionable statements like “Build a webpage that…” rather than open-ended questions like "Can you build a webpage that...?" We also encountered deployment and demo issues when using Lovable, including UI components not functioning as expected and an unreliable live demo. To address this, we transitioned to local development in VS Code and used GitHub Copilot to better translate our ideas into accurate, working code. Additionally, collaborating through GitHub with multiple contributors led to frequent merge conflicts during pushes and pulls, which pushed us to establish clearer workflows and temporarily centralize development so we could stay productive.

Accomplishments that we're proud of

We’re proud to have built a working study companion for ourselves and our peers at our first hackathon, and even prouder of the challenges we pushed through along the way. FocusFlow gives students real control over their online productivity—offering the same convenience as mobile apps, but with deeper focus, smarter guidance, and real‑time support as they work.

What's next for FocusFlow

Looking ahead, we plan to expand FocusFlow into a Chrome extension so it can support students seamlessly as they move across different websites. This would enable features like detecting tab‑switching and, with the user’s permission, blocking distracting pages such as Netflix or Instagram. We’re also exploring the integration of evidence‑based study techniques, including the Pomodoro Method, to help students work in focused bursts with intentional breaks that promote long‑term productivity.

Built With

• lovable
• react
• tailwindcss
• typescript
• vite