Focus Flow

Inspiration

As a student, I know the feeling all too well: you sit down with a long to-do list, determined to be productive. You tell yourself you'll just take a "quick five-minute break," but the next thing you know, an hour has vanished into a rabbit hole of YouTube videos or social media feeds. This cycle of distraction is one of the biggest challenges we face.

I was inspired to build a tool that doesn't just block sites, but is smart enough to understand my goals. I didn't want a simple blocker — I wanted a personalized focus coach that could help me, and other students, win back our time and reduce the stress of procrastination.

What it does

FocusFlow AI is a smart Chrome extension designed to create a personalized focus environment. Here’s how it works:

Users set their goals: You start by telling the AI what you're working on (e.g., "Write an essay on Macbeth," "Study for my Chemistry test").
AI-powered blocking: When you visit a website, the AI instantly analyzes whether the site is relevant to your tasks. If you go to a productive site like Wikipedia or your school library, you get through. If you navigate to a distracting site like YouTube or social media, FocusFlow gently blocks it and reminds you of your focus goals.
Structured work sessions: Includes a built-in Pomodoro timer to structure your work into focused sprints and regular breaks.
Progress tracking: A stats page shows how many focus sessions you've completed and how many distractions were blocked, providing motivation and accountability.

How I built it

FocusFlow AI was built using standard web technologies, making it a great project for learning the fundamentals of software development.

Frontend: Created with HTML, CSS, and JavaScript. The popup has multiple views for the timer, task list, and statistics.
Core Logic: A background service worker (background.js) uses Chrome Extension APIs like chrome.storage, chrome.tabs, and chrome.webNavigation.
The "AI": We use the OpenAI API (GPT-3.5 Turbo). When a user visits a new site, a fetch request sends task context to the AI, which returns "YES" or "NO" to determine if the site should be allowed.

Challenges I ran into

As a beginner, this project was a fantastic learning experience. The biggest hurdle was working with Chrome’s Manifest V3 Content Security Policy (CSP). Inline JavaScript isn’t allowed, so I had to refactor everything to use addEventListener — a great intro to secure, modern JS.

Prompt engineering was also a challenge. It took work to craft efficient, accurate prompts that didn’t delay browsing too much. Balancing features with time constraints was also a great lesson in MVP thinking.