AI Software Engineering

Building an App using Vibe-Coding: A personal view

As someone with a background in data, artificial intelligence, and backend development, I recently set out to build a complete mobile app using Flutter—despite having no prior experience in frontend programming, app development, or the Dart language. What made the journey possible, and surprisingly efficient, was an approach increasingly known as "vibe-coding": the use of generative AI tools to drive the development process.

Getting Started Without a Frontend Background

I began the project with a goal in mind: to create a Connect Four-style game app. The initial issue was which framework and language to use, ChatGPT recommended the Flutter framework using the Dart programming language. The challenge? I had never touched Flutter or Dart before. My strengths lay in Python, backend systems, and AI logic. But thanks to tools like ChatGPT (particularly the GPT-4 mini o4-high variant) and some assistance from Gemini, I was able to bridge the gap.

I experimented with Windsurf in VS Code, hoping for additional insights or accelerated coding. However, it didn't add significant value to the vibe-coding process.

Learning to Prompt Effectively

Initially, I struggled. I would ask ChatGPT to write isolated code snippets, which often resulted in incomplete or context-missing responses; I had to abort my first attempt using this approach and start again. Over time, I learned that the key to effective vibe-coding lies in how you structure your prompts. Instead of asking for fragments of code, I began describing the problem in detail—the goal, constraints, and the desired behavior of the app.

For example, instead of asking, "How do I create a slider in Flutter?", I learned to say, "I want to allow the user to select a difficulty level from a slider, which should update a global game setting" The difference in output quality was remarkable.

The Role of Coding Experience

Although AI was doing much of the heavy lifting, my background in software engineering turned out to be crucial. When AI-generated code didn’t work or missed edge cases, I could usually spot the issue quickly. On a few occasions, I hand-wrote code or refactored AI output to ensure the app behaved as expected. This experience made it clear: vibe-coding is not a substitute for programming knowledge, but a powerful accelerator for those who have it.

Development Time and Output

The app took just a few weeks to build—far less than I expected for someone with no frontend experience. The vast majority of code was generated by ChatGPT, with Gemini providing occasional second opinions or UI tweaks. As the app evolved, I continued to refine my prompting strategies and design patterns, which helped reduce iteration time and improve code quality.

The AI player

The AI player is a neural network trained using reinforcement learning engine that can learn to play any game or scenario that can be coded. I wrote the reinforcement learning engine in Java a few years ago, before the advent of LLM's or vibe-coding, I'm convinced I could build it more quickly now.

 

Alternative Approaches: Beyond the Basic Prompt

While direct prompting with large language models like ChatGPT and Gemini formed the core of my "vibe-coding" experience, it's important to acknowledge the growing ecosystem of AI-powered development tools that offer alternative or complementary approaches:

  • Cloud-Based Development Environments with AI: Platforms like Replit are at the forefront of this, offering online coding environments with deeply integrated AI assistants. These platforms often provide real-time code completion, bug detection, and even code generation capabilities directly within the browser, making development more accessible and collaborative.
  • Specialized AI Development Tools: Emerging tools like Google Jules represent dedicated efforts to streamline specific aspects of the development lifecycle using AI. These might focus on areas like UI generation from mockups, backend service creation, or complex algorithm implementation.
  • IDEs with Integrated AI: The traditional Integrated Development Environment (IDE) is rapidly evolving to incorporate AI directly into the developer workflow. Cursor is an IDE built from the ground up with AI as its central feature, allowing developers to prompt, debug, and refactor code using natural language. Similarly, popular IDEs like VS Code are enhancing their capabilities with powerful extensions such as GitHub Copilot, which provides AI-powered code suggestions and completions as you type, becoming an intelligent pair programmer right within your familiar environment.

These alternative approaches offer varying degrees of AI integration, from being entirely AI-driven environments to intelligent assistants that augment human developers. They all point towards a future where AI is not just a tool for generating text, but an intrinsic part of the software development process itself.

 

Final Thoughts

Vibe-coding has changed how I approach software development. For experienced developers, it’s like having a super-powered coding assistant that never tires, forgets, or runs out of coffee. But it does require skill: the better you are at understanding code and articulating problems, the more effective the AI becomes.

It's clear it's worth experimenting and keeping up to date with advances in vibe coding, I am now aiming to code a project using Google Jules which was released today (22nd May 2025).

The result of my experiment is Four in AI Row, a Connect Four app built using AI-assisted development, now available on Google Play and the web. It's a testament to what developers can achieve when they combine their expertise with the capabilities of modern AI.

And of course, AI helped to write this article too!

 

 

See the four in AI row app

Google Play

Web (resize your web browser to be twice as long as it is wide before playing)

© Copyright. All rights reserved.

Legal Notice| Privacy Policy

We need your consent to load the translations

We use a third-party service to translate the website content that may collect data about your activity. Please review the details in the privacy policy and accept the service to view the translations.