The Focus App I Built by Arguing With an AI (In a Good Way)

Hey everyone!

Recently, I've been trying to understand how to actually deploy an AI agent and the apps it builds and not just running everything on local host, but taking it live. While looking into this, I came across the perfect course for it: Alexey Grigorev's course AI Dev Tools Zoomcamp. This post is about what I built while going through week 1.

The Concepts I Learnt

1. Moving from "prompting" to AI developer workflow

• Instead of using the hit and trial methods with prompt to the agent to understand the tasks, we will have to adapt to the AI developer mindset. In this process we will enforce the habit with structured, repeated process.
• Instead of just focusing on the code to be done, we will also have to play the different roles such as Product Manager and Architect.
• The goal is not only to write the code but also design the system and organise the tasks and structure the overall project.

2. Spec-Driven Development

• The single prompt to code down the system fails most of the time cause the agent makes a huge amount of assumptions based on the prompt which can be vague and not completely understandable.
• Instead of directly jumping into the code, try to ideate with the agent and try to come to the best possible plan for the project and store it as plan.md file.
• According to the plan now break down the project into tasks and backlogs.

3. Context Engineering

• Context engineering ensures that every time you start a new coding session, the agent does not waste tokens or make incorrect assumptions trying to rediscover what your project is about.
• Instead of writing lengthy, custom prompt cycles, you establish persistent context files in your repository, primarily agents.md and process.md.

4. Loop Engineering

• Moving away from manually typing sequential, turn-by-turn prompts by setting up automated prompt cycles.

5. Graph Engineering

• Organising independent AI agents into structured software teams with specialised roles and clear boundaries.
• Example: An Orchestrator agent coordinates the entire process by launching specialised sub-agents instead of implementing the tasks itself.

The flow might look something like this:

---

I always loved studying with lofi beats playing and a Pomodoro timer set for mental breaks, and this is what struck me to create one for this homework.

The problem? I'm not really a developer. I know enough code about building AI models, but not enough to build something like this from scratch. And I only had one week of homework-free time to try.

Here are the steps I followed to build one with zero Django experience:

Step 0: Pick any of your favorite AI code agents

• There are plenty of options to choose from, like Claude Code, Antigravity, OpenCode, etc. I went ahead and chose Kilo, which is an open-source platform.
• To read more about Kilo: https://kilo.ai/docs/getting-started

Step 1: Ideate

• My first instinct was to just say "build me a Focus app" and see what came out. I'm glad I didn't.
• Instead, I asked the AI assistant to brainstorm with me first:

"I want to build a study-with-me app. Help me scope this precisely. Ask me one question at a time."

• It asked about the platform I wanted, which features were must-haves and nice-to-haves, where the audio would come from, what visual style I was going for, and how much time I actually had. Each answer narrowed things down. Six questions later, I had a clear, written-out plan in plan.md file.

Step 2: From Spec to Project Skeleton

• With the scope locked, I asked the coding agent to start the project:

"Create a Django project with a light and day theme."

• It generated the whole structure in seconds — manage.py, settings.py, urls.py, models, templates. I just had to run migrate.
• Then I asked it to wire up the audio mixer, the timer, and the task checklist. Each feature came as a separate chunk of code I could review.

Step 3: Bugs Found, Bugs Fixed — Fast

When I tested it, three things were broken:

1. The timer reset every time I added a task. Adding a task caused a full page reload, which killed the running timer. I converted the task CRUD to JSON endpoints so the timer survived.
2. No audio played. The agent had guessed some Pixabay URLs that didn't work. I switched to local audio files, trimmed into seamless loops.
3. The UI looked rough. Panels were stacked awkwardly, labels were inconsistent. I asked the agent to redesign the CSS with a proper grid layout, consistent spacing, and a day/night toggle.

Each fix took minutes because the agent already understood the codebase — it just needed the bug described clearly.

Step 4: The Backlog That Keeps Growing

I asked the agent to act as a project manager and generate a backlog. It produced 16 items across four priority tiers — timer persistence, keyboard shortcuts, session history, PWA support, tests, and more.

I picked the first one (timer state persistence via localStorage) and implemented it. The agent updated the backlog to mark it done.

Step 5: Tests

I asked the agent to write tests for the JSON endpoints. It created 12 tests covering add, toggle, delete, and session completion — all passing locally.

Then I asked it to set up GitHub Actions CI. It created .github/workflows/ci.yml with a test matrix across Python 3.11/3.12/3.13. The first run failed because the audio generation step needed an encoder that wasn't available on the runner — I removed that step, pushed, and it went green.

Final Look

What I Learned

• Spec first, code second. The more precise the spec, the less the agent guesses.
• Iterate on bugs, don't rewrite. The agent already knows the codebase and describing the bug is faster than rewriting the feature.
• Write tests as you go. They catch regressions when the agent "improves" something that was working.
• Commit often. If a change breaks things, you can roll back to the last good state.

---

Try It Yourself

Pick a small project. Talk to an AI assistant like a coworker. Ask it to code, test, document, and deploy. You'll be surprised how much you can build in an afternoon.

---

• Check out the project here: Focus-app
• Follow along with the course here: AI Dev Tools Zoomcamp