Project Story: PomoChamp

💡 The Inspiration

As someone with ADHD, I've tried every bloody productivity app on the market. Forest, Focus Keeper, Be Focused - they're all about as exciting as watching paint dry on a rainy Tuesday in Slough. These sterile, soul-crushing timers just reminded me how much I absolutely despise doing tasks.

The breakthrough came when I realised: What if productivity felt like playing Street Fighter instead of attending a bloody funeral?

What if completing a task felt like landing a devastating combo that would make Ryu weep? What if missing a deadline meant taking proper damage? What if the entire experience was wrapped in that glorious 90s arcade aesthetic that makes everything feel like you're the main character in your own epic saga?

That's when PomoChamp was born - not just another productivity app that makes you want to chuck your laptop out the window, but the world's first fighting game Pomodoro timer that doesn't make you want to cry.

🎮 The Vision

I wanted to create something that would make people with ADHD actually excited to be productive - mental, I know. Instead of dreading the next Pomodoro session like a root canal appointment, they'd be gagging to jump back into battle.

The core concept: Transform the mind-numbingly boring "start timer, do task, take break" cycle into an immersive fighting game where every completed task deals proper damage to your opponent, and every missed deadline means you take a right proper battering.

🛠️ How I Built It (The "Vibe Coding" Journey)

Here's the absolutely mental part: I had fuck all programming experience when I started this project.

Everything you see was built through what I call "vibe coding" - using AI assistants (ChatGPT, Claude, and Bolt.new) to translate my increasingly caffeinated rambling into actual reality. I'd describe what I wanted (usually whilst gesticulating wildly), the AI would write the code, and I'd test it, break it spectacularly, iterate, and somehow make it work.

Tech Stack:

• React + TypeScript for the frontend architecture (fancy!)
• Tailwind CSS for the retro 90s styling that would make your nan nostalgic
• Web Audio API for professional-grade audio that doesn't sound like it was recorded in a bin
• Zustand for state management (because apparently that's important)
• Vite for lightning-fast development (faster than a greased weasel)

The Development Process:

Week 1: Core Concept

• Built the basic Pomodoro timer functionality (surprisingly didn't explode)
• Created the fighter selection system (choosing your champion, innit)
• Implemented the damage mechanics (task completion = your opponent gets absolutely chinned)

Week 2: Audio Revolution

• Integrated Web Audio API for gapless background music (no more awkward silences)
• Added character-specific sound effects (each fighter sounds appropriately mental)
• Implemented complex audio sequencing that would make Hans Zimmer jealous

Week 3: Polish & Experience

• Added the break period system with neon beach aesthetics that's more relaxing than a spa day
• Created the comprehensive fighter roster (12 absolute legends)
• Perfected the 90s arcade cabinet visual design that screams "insert coin, you muppet"

Week 4: Professional Features

• Music consent modal for browser autoplay compliance (because browsers are proper jobsworths)
• Advanced audio settings with volume mixing (more knobs than a BBC studio)
• Easter egg "Spinal Tap" mode where everything goes to 11 (because why the hell not?)

🔥 The Biggest Challenges

1. Web Audio API Mastery

Learning how to implement professional-grade audio without any prior experience was like trying to perform brain surgery with a spoon. Browser autoplay policies, audio context management, gapless looping - these are typically advanced topics that take years to master and usually involve at least three nervous breakdowns. Through AI collaboration and the kind of relentless iteration that would make a honey badger proud, we built an audio system that could make commercial games weep with envy.

2. Timer Precision

JavaScript timers are about as reliable as British weather forecasts. We needed drift correction, multiple simultaneous timers, and clean state management across complex user interactions that would make a Swiss watchmaker have a proper meltdown. The solution involved custom hooks, ref management, and cleanup patterns more meticulous than Marie Kondo on a cleaning bender.

3. State Synchronisation

Managing game state across multiple screens (task planning → fighter selection → battle → break period) whilst maintaining data integrity and smooth transitions required architectural planning more complex than Brexit negotiations.

4. ADHD-Optimised UX

The biggest challenge wasn't technical - it was psychological. How do you make productivity feel genuinely engaging without being more gimmicky than a carnival game? Every interaction needed to provide immediate feedback and dopamine hits whilst still serving the core productivity function, without making users feel like they're being patronised by a motivational poster.

🧠 What I Learned

Let me be brutally honest here: I didn't learn fuck all about CSS, Tailwind, Audio APIs, or any of that technical nonsense. The vibe coding gods (ChatGPT, Claude, and Bolt.new) figured all that out and implemented it whilst I sat there like a proud parent watching their kid ace a maths exam.

What I Actually Learned

• Prompt Engineering: How to effectively communicate the mental chaos in my head to AI without sounding like I'd escaped from a psychiatric ward
• LLM Juggling: When to use ChatGPT vs Claude vs Bolt.new, and how to move between them without losing your bloody mind
• Project Management: Keeping proper changelogs and project briefs so I didn't forget what the hell I was doing between sessions
• Thought Translation: The dark art of getting what's rattling around in your brain into prompts that actually make sense to an AI
• Patience (Shit Loads of It): Because sometimes the AI would completely misunderstand what I wanted and I'd have to explain it seventeen different ways
• Open Source Crediting: How to properly attribute Creative Commons assets without looking like a proper pillock
• User Feedback Collection: How to get real people to test your mental creation and tell you what's brilliant vs what's complete bollocks

The Real Skills

The technical implementation? That's all AI magic. But learning how to be an effective AI conductor - that's the actual skill. Knowing which LLM excels at what, how to structure prompts for maximum effectiveness, and how to maintain project coherence across multiple development sessions with different AI assistants.

It's like being a film director who can't operate a camera but knows exactly how to get the cinematographer to capture the perfect shot.

🎯 The Impact

PomoChamp proves that anyone can build professional-grade applications with the right tools, determination, and an unhealthy amount of caffeine. This isn't just a productivity app - it's a proper demonstration of how AI democratises software development and lets ordinary humans build extraordinary things.

More importantly, it solves a real problem for millions of people with ADHD who struggle with traditional productivity tools that have all the charm of a tax return. By making focus feel like gaming, we've created something that people actually want to use instead of avoiding like a plague-infested badger.

🚀 What's Next

The foundation is solid as a rock, but this is just the bloody beginning:

• Tournament Mode: Multi-round championship brackets that would make Wimbledon jealous
• AI Fighter Generation: Let users create custom characters more unique than a snowflake
• Social Features: Leaderboards, team battles, sharing achievements that actually matter
• Mobile App: Native iOS/Android versions for productivity on the bog
• Advanced Analytics: Detailed productivity insights sharper than a Michelin-starred chef's knife

💪 The Real Victory

The biggest win isn't the technical achievement - it's proving that with AI assistance, determination, and a vision clearer than HD television, anyone can bring their barmy ideas to life. PomoChamp started as a frustrated ADHD brain wondering "why does productivity have to be more boring than watching cricket in the rain?" and became a fully-featured application that people genuinely enjoy using.

From zero programming experience to production-ready app faster than you can say "Bob's your uncle." That's the power of AI-assisted development, and that's the future of software creation - democratised, accessible, and absolutely brilliant.

---

Built with ❤️, AI collaboration, and an unhealthy obsession with 90s fighting games that would concern a therapist.

Built With

• autoprefixer
• bolt.new
• chat-gpt
• chatgpt
• claude
• dnd-kit/core
• dnd-kit/sortable
• dnd-kit/utilities
• eslint
• lucide-react
• postcss
• react-dom
• react-router-dom
• supabase/supabase-js
• tailwind-css
• typescript
• use-sound
• vite
• web-audio-api
• zustand