Using AI Code Generators To Build Apps - The Ups & Downs

Using AI Code Generators To Build Apps - The Ups & Downs

My journey of learning to build with AI continues, and I’ve successfully built two apps using AI code generators. Here’s what I learned—and how someone with zero IT or tech experience can use AI tools to build almost anything.

The first app takes any YouTube URL and generates a downloadable transcript in English, even if the video is in a different language (like Urdu, Arabic, or Chinese). It also structures the transcript into proper notes, and both the original transcript and the notes are downloadable as a text file.

The second app converts YouTube song URLs into MP3s, removes the background music, and creates an acapella version. I’ve always loved acapella—it lets you enjoy the pure voice of the singer, without any music.

How i build these apps without technical background

For the acapella app, I used ChatGPT. I described the app in detail, asked it to generate the full code, and requested detailed step-by-step instructions. Since I’m on Windows and using Visual Studio Code, I made sure to include that too in my prompt. From installing Python to setting up the file structure, I just followed the instructions, copied, and pasted—and voilà, the app was ready.

For the second app, the YouTube transcript generator, I used an AI code generator. And let me tell you—it’s like magic. You watch as it creates files and writes code, and you just tell it what to do.

Inside Visual Studio Code, there’s an extension called "Cline" (it’s available in most code editors). After installing it, I chose an LLM to work with—Claude 3.5 Sonnet in my case—and got an API key from the console. It’s surprisingly affordable; I’ve spent about $20 in credits and still have most of it left.


Cline Extension


Setting up Cline with the LLM of choice

Once set up, I just told Cline what I wanted to build, and it started generating files and writing code. Watching it work is such an amazing thing as it creates all the files and opens files and writes code and then runs and tests everything.

What i learned is that smaller prompts lead to fewer errors. For example, if you want to improve the outlook of the home page and also add buttons and authentication, never ask it to do all three thing in one go. Instead start with improving the outlook first, and when it is done, then in the next prompt ask it to create buttons and move on like that.

Breaking it down like this helped reduce errors significantly. Sometimes the AI would get stuck in a loop, repeating the same errors. When that happened, I prompted it to “try a totally different approach,” which usually worked to get out of the loop.

The Deployment Challenge

Once both apps were ready and working on my local computer, I faced the next hurdle: deployment. For someone without a tech background, building apps is manageable, but deploying them is challenging. For single-page apps, the deployment instructions work fine. But when I tried deploying my transcript app, it failed because I didn’t understand server-side app requirements.


deployment errors

As a result, all the apps I’ve built using either ChatGPT or Cline are currently stuck on my local machine. This, I believe, is the biggest hurdle non-tech people face—getting their product out into the world.

What’s Next?

I’m seeing this as a learning cycle. One option I’ve noticed is using online platforms like Replit or Bolt, where you can build and deploy apps directly. Since they’re already on a server, deployment becomes much easier, in-fact what i have seen in some videos all you need to do is a single click and the app gets deployed. This does mean I need to use a paid platform, but that’s what I plan to try next.

Learning by Doing

I realized something interesting recently: without fully understanding it, I was using terms like “Node.js,” “React,” “Tailwind CSS,” “Shadcn components,” and “Firebase authentication” in my prompts. I may not understand the technicalities, but I do know what each of these tools does, and that’s from watching others build things online. It’s a small step, but I can see my knowledge slowly expanding.

Current Experiment: Building an Android App

After building two apps locally and failing to deploy them, I’ve shifted my focus for now on something different, before going to the paid platform for building the web apps directly online. I’m now building an Android app.

Google has an online code editor called IDX, which works like Visual Studio and has the same Cline extension (and i still have a lot of my credit left to play with). The best part? There’s an emulator right inside the editor where I can see what I’m building.


cline on the left, code in the middle and emulator on the right side


The only challenge is the daily token limit. I get about 40-45 minutes of work before I hit the limit, and then I have to wait 24 hours. While it’s usually fine given my limited availability, it does get annoying when I’m in the middle of something.

Below, you can see some of the pages I’ve created so far. I think I started wrong—I began with the homepage and authentication instead of focusing on core features first (May be !!). Now, I have several half-built pages and am figuring out how to wrap it all up. But no worries—I’ll find a way and share the app once it’s ready.



If you’ve ever wanted to build something but didn’t know how—now you have no excuse. AI has made it easier for anyone, regardless of their background, to build and bring ideas to life.


Bogdan Merza

Einfachheit ist die h?chste Stufe der Vollendung

3 个月

Congrats for your journey. I hope to see more and more free apps in the near future. Please consider uploading the code on GitHub also ??

Khurram Saleem

Senior Analyst at Vodafone

3 个月

Thanks for sharing Haroon… definitely useful along the way

回复
Davide Michel Morelli

senior web developer, Drupal , Flutter, Prestashop, Wordpress, Elementor, WooCommerce, Ecommerce SMM, Chatbot developer, PHP, Symfony, Angular, TypeScript, IonicFramework , DBA MySQL/MariaDB

3 个月

I have created a simple mobile TODO APP based on Flutter using only Cluad-e and "copy from artifacts and paste on WebStorm". You can see the code here: https://github.com/ziobudda/todoapp

要查看或添加评论,请登录

Muhammad Haroon Butt的更多文章

社区洞察

其他会员也浏览了