I'm not a software engineer, and I've never claimed to be. But I've always been interested in web design, and I always wanted to build my own app one day. So that's what I'm doing. HELM is a real productivity app, built in React 19 and TypeScript, running on Supabase and packaged for iOS through Capacitor. The codebase is real, and I'm directing every line of it without writing the code myself.
I've always wanted to learn HTML, CSS, TypeScript and React. But while I was focused on building my data skills, it was hard to find the time. Vibe coding changed that. It let me build an app before I had the technical skills to do it on my own, and learn as I go.
Some people say "vibe coding" like it's a joke. I don't. It's been one of the best ways I've found to learn, and it's shown me what really goes into making an app.
This post is the honest version of how it's gone so far. The tools. The parts that worked. The parts that nearly stopped me. And what I'd tell anyone thinking about doing the same.
What vibe coding actually means
Vibe coding is directing AI tools to build software you couldn't build on your own yet. You're not writing the code. But you're not ignoring it either. You're reading it, judging it, rejecting it, accepting it, and using plain English to steer the AI towards what you want.
Think of it like being the director rather than the camera crew. You decide what gets made and how it should feel. The AI does the typing.
AI is now good enough at writing code that the hard part isn't the code anymore. The hard part is everything around it. Do you know what you want to build, why, and in what order? Can you tell when the AI has got it wrong? Can you describe your idea clearly enough for it to act on? Those were the questions I kept having to ask myself, because the AI won't produce your vision on the first try. It needs you to know what that vision is.
That's the actual skill. And it's not nothing.
The tools I used
Five tools did almost all the work.
Figma was where it started. Before anything else, I used Figma and Figma Make to experiment with the first design of the app and sketch out the early screens. Figma also held the design system.
Google AI Studio came next, for prototyping. Before committing to a feature, I'd describe it in AI Studio and watch a rough version appear. It taught me how important it is to know where the app is heading before spending hours building it, only to change the whole structure and start over again.
Claude was the main brain. It wrote most of the React, but it did a lot more than that. It helped me come up with ideas, wrote the prompts I gave to Antigravity, and went through my files and code with me. It's very good at keeping track of long conversations, which mattered because HELM has a lot of moving parts.
Antigravity is the IDE where the changes actually happen. I'd tried Windsurf and other IDEs before, but Antigravity was the one that clicked. It introduced me to the idea of an IDE and AI working together, and I liked having Google's Flash models built in. I'm thinking about trying Codex on HELM next, since it's worked well on other projects.
Capacitor wraps the React app into an iOS build, so the same code runs as a native app on my phone.
Where it started
The first version looked nothing like HELM does now. It was built around one goal and a daily loop, with a progress ring and a streak counter.
At first I thought it looked cool. Then I realised it looked like every other app built by AI. Something was missing, and it took me a while to work out what. It had no soul. No theme, no personality, nothing that made it stand out or made you feel something when you used it.
I actually gave up on it after that first version. I had so many ideas and features I wanted to add that I lost sight of the main thing, what I actually wanted the app to be. So I stepped back and simplified the concept. I researched how app designers make things that look and feel good, and studied how other apps did it. That's where HELM came from.
You can see what it looks like now on the HELM case study.
The actual process
The loop looked something like this.
I'd start with a design in Figma. Then I'd share a screenshot of it with Claude, go through the design together, and get it to help me build the basic code for it.
I'd add the code in Antigravity and run the app. Sometimes I'd ask Claude to explain the code line by line, so I understood what I was adding. If something didn't look or work right, I'd go back to Claude with the changes and the error, and we'd go round again. The conversations were long. Sometimes embarrassingly long. But they taught me more about React than any course would have.
Testing was a big part of the loop. Sometimes it wasn't about reading the code at all. It was about using the app and seeing what broke. My aim with every new version was to try and break it. And each time, the same questions came up. Does this make sense? Why does this feature matter to the person using it?
The hardest parts
The scoring algorithm, and getting the AI features working inside the app, were the hardest parts by far.
The algorithm is the whole point of HELM. It decides which Leg you should do next, so you don't have to. Getting it right meant working out why it should behave the way it does, not just what it should do.
The first versions worked, but they were too basic. So I sat down and sketched the idea out by hand. Just a simple sketch of how each factor should push a score up or down. The sketch helped me get clear in my own head about how the algorithm should work, and that made it easier to keep steering the AI in the right direction.
Getting the AI features into the app was a challenge of its own. There was a lot of backend work involved, and I had to understand how it all fit together before it would work properly.
The lesson was uncomfortable. AI is a powerful tool, but it can't read your mind. If you can't explain the system you want, it can't build it. The thinking still has to happen. It just happens in plain English instead of code.
What I'd tell anyone thinking about doing the same
-
Design before you code. Even a rough design gives the AI something real to build from. It's fast at building. It's not fast at deciding what to build.
-
Make a moodboard. I made two or three, with app designs I liked, images that matched the theme, and features I wanted. They helped me, and the AI, understand what I was going for.
-
Use the code to learn. I didn't know the code when I started, so instead of just accepting it, I used it to learn. Ask questions. See how it's put together. That's where the learning happens.
-
Learn to debug. You don't need to be a React expert. But reading errors and working out how to fix them is a skill you'll pick up fast, and you'll need it.
-
Use Git like your life depends on it. Commit often. Git saved me more than once by letting me recover files from broken builds.
-
Build something you actually want. Not the next money app. Build something you'd use and feel passionate about. The AI is good at bringing a specific idea to life. It's much worse at rescuing a generic one.
Why I'm writing this
I'm not writing this to defend vibe coding. I'm writing it because building an app is really cool, and the fact that you can do it using plain English is even cooler.
Before HELM, I didn't even know what prompt engineering was. This project has taught me a lot about it. Knowing what to build, and being able to describe it clearly enough for an AI to act on, is a real skill.
I could have gone down the traditional route and learned to code everything first. But it would have taken a lot longer. As far as I can tell, there isn't an app quite like HELM out there yet, and I wanted to build it now.
It isn't finished, and it isn't on the App Store yet. But the codebase is real, the engine works, and this is the honest version of how it's being built.
If you've got an idea you keep putting off because you can't code yet, that's not the blocker it used to be. Start with a sketch. The code can come later.
