2025 has seen the emergence of many AI tools which make creating apps easily accessible for people with little to zero coding experience.
If you can imagine it, in just a few hours you can create it – but leaping into an unknown project can be daunting.
This article is sponsored by Hostinger and I was given access to a VPS and Hostinger Horizons for my project – but there are other tools and hosting providers that you can use.
My app
For my project, I went ambitious and decided to make an app to help me learn from my mistakes in online chess games.
I made the app using Hostinger Horizons, but then rebuilt it using Claude to demonstrate a more complex way to vibe code an app.
Hostinger Horizons is the most simple way to build an app because the tool does almost everything for you. Using Claude or any other LLM is a bit more hands on but you still don’t need to know how to code.
The simple way: Hostinger Horizons
To build the app with Hostinger Horizons, all I had to do was explain my idea and Horizons did the rest.
You don’t need to know the how or why, it just does it. Each time you type something into Horizons to ask it to do something, you use a prompt. Horizons is pretty good at getting most things right first time but it does sometimes require a bit of prompting to get the final product you’re looking for.
I needed to use multiple prompts to fix the chessboard and fix an error with finding mistakes in the games but it was just as simple as explaining what the problems were.
Fixing problems
When I entered my Lichess username it said no analyzed games were found – hinting at a connection issue. I told Horizons the error, it did some things in the background and I had another error.
A different error means progress! It said 15 games had been analyzed and no mistakes found – so, I knew the app could connect to my Lichess account, but it could still not find errors.
I told Horizons the error message, but I wasn’t specific enough – so when it tried to fix it, the app assumed that the position on the board was not an error, not that nothing was displayed at all. So, I gave a more detailed explanation of the error. Unfortunately, that didn’t work.
After telling Horizons that it still wasn’t working, it added debugging logs to see what was happening and asked me to press F12 to open the developer console in Chrome. Intuitively, I copy pasted over where there were orange and red warnings and pressed enter.
Horizons did its thing and shortly after, I had a working chess analysis app.
More complex build methods
You could just stop here – and, for most simple ideas, this would be a good place to stop. But I am curious and like to know the how and why. Plus, I wanted to have finer control over the app and iterate on my idea without being restricted by prompt limits.
It’s cheaper to do it yourself but it does mean that you need to venture into configuring using a VPS. Something that can seem a little daunting but can still be done without writing, or knowing how to write a single line of code.
I decided to use Claude because I’ve used it to vibe code apps before but you can use ChatGPT, or Google Gemini.
Claude
I gave my initial prompt to Claude, telling it I wanted to build a chess analysis and puzzle app, hoping that it would give me some suggestions on how to built it but it went ahead and just built the entire app for me. It created all the files and gave me instructions on how to make it work. It was a little overwhelming.
I asked it to take a step back, refine my idea and ask for step by step instructions. I added two things on top of Claude’s suggestions which was the inclusion of Stockfish, a chess engine, so I didn’t need to rely on another service for analysis and the use of n8n, a low-code orchestration layer, which would break up the task and help with debugging and easier iteration at a later date.
This wasn’t really necessary – if I had just followed Claude’s instructions and method the app would have worked, but I had the benefit of some past experience here that I wanted to include.
My full build
Orchestration later
The first step was to install n8n on a Hostinger VPS. This was extremely easy as all I had to do was push a button and create an n8n account. Then, Claude told me exactly what to do: Add a trigger, set it to 30 minutes, add a HTTPS node, paste this code, install the chess engine, and so on.
At a couple of points it didn’t work – things got stuck when trying to analyze the game with the chess engine, because the data was in the wrong format but it was easy to fix because the point where it was not working in the workflow had an error icon, I told Claude, which asked me to copy paste the error message, before giving me a fix.
The front end
Now I had a database with chess games, positions, and analysis I told Claude how I wanted the app to work. It generated the code for me and told me how to copy and paste it into the right place on the server.
It did a pretty good job of creating the app but there were some issues. For example, after I solved a puzzle it immediately skipped to the next puzzle, it included some puzzles where my move was the best move, and in some positions the chess board was flipped.
I told Claude about the issues, it rewrote the code, I pasted it in, and my chess app worked even better. There are still some things I want to improve but I’m at a stage with it where I’m happy.
App building tips
Cost
You can get started with Horizons for $6.99/mo but you only get 30 prompts a month and it renews at $9.99/mo after four years.
This would be enough for very simple apps without many moving parts and integration with other services – but you might find yourself wanting more prompts, so the Starter plan with 70 prompts a month might be better, starting at $13.99/mo for four years and then renews at $19.99/mo.
The alternative is to buy a VPS, which you can get from Hostinger for $4.99 for one year which renews at $9.99/mo. Then, use an LLM like Claude, ChatGPT, or Gemini, each of which have a free tier with prompt limits which renew daily. For my app I used a paid version of Claude which is $20/mo.
Prompts
With the initial prompt you need to be as detailed and specific as possible. Then, when it comes to fixing issues, it’s best to keep it simple and only fix one thing at a time. If something doesn’t work you need to say exactly what isn’t working.
For example, include which buttons are pressed, what is happening, and what you expect to happen. If you just say ‘the button doesn’t work’, it’s hard for AI to know what needs fixing.
If you use an LLM, at the beginning tell it not to create the app yet but to build an idea and method. Then, ask it to give you step by step instructions – and if you don’t understand the instructions, just say so.
VPS servers
To use a VPS you will need to use a terminal. This is a command line that lets you interact with the server. You paste the commands that the LLMs give you into it and the server carries out the task. Commands include downloading dependencies (think of these as a little bits of software the app needs to have installed to work), creating files, and pasting code into them.
It’s also where you can receive logs and error messages that you can copy paste back to the LLM to solve issues.
Terminals can be tricky to use. For example Ctrl+c is not copy. If you press this it will abort the current task and can stop the app from working. It’s fixable, it’s just annoying and a force of habit. Also, when you’re in a file and need to edit it, it can be tricky to find and move to the bit you need to edit.
There is an alternative to using the terminal and that’s to use an integrated developer environment (IDE) like Visual Code Studio. It makes developing apps easier but it’s an extra thing to set up.
Making your own app
A step by step guide to making your app would consist of three steps:
- Write your idea into an AI tool
- Do what AI says
- Repeat step 2 / Tell the AI something is broken
I hope you have fun making an app!
https://cdn.mos.cms.futurecdn.net/8vqtaZBr36DCiRgBtypEoA-1920-80.jpg
Source link
