Skip to content
Home/Resources/Build guides/First app with an AI app builder
Build guide

Build Your First App With an AI App Builder: Spec, Prompt, Review, Secure and Ship, Step by Step

By Younus FardeenUpdated 3 Nov 20265 min read
Short answer

Write a one-page spec, paste it into an AI app builder such as Lovable, Bolt or Google AI Studio, and build one screen at a time. Add a Supabase database with row-level security, test it with two accounts, sync the code to GitHub and publish. On free plans the whole build takes three to five hours and costs nothing.

You will buildAn expense-splitting app for a group of friends: sign in, create a group, add expenses and see who owes whom, with every group's data private. Live on a public link, with the code in your GitHub.
TimeAbout 3 to 5 hours
Cost₹0 on free plans
LevelBeginner (no coding needed, but you will read what the AI writes)

Tools you need

The 10 steps

01

Write the spec before you open any tool

Credits on a free plan run out in a few long chats, so decide first. Write six lines in a notes file:

Who it is for: hostel friends splitting shared costs
Problem: nobody remembers who paid for what
Must have: sign in, create a group, add an expense, see who owes whom
Not now: payments, notifications, receipts
Data stored: groups, members, expenses (amount, who paid, who shares)
Rule that must never break: a user only sees groups they belong to

The last line matters most. It becomes your security test in step 6.

02

Pick one builder and check its free limits

Create an account with a personal email. Lovable's free plan gives 5 build credits a day, up to 30 a month. Bolt gives 1 million tokens a month with a 300,000 daily limit. Google AI Studio's Build mode is free but not available on school or college Google Workspace accounts, so use a personal Gmail. Choose one and stay with it for this guide.

03

Build one screen first, with no database

Paste your spec and ask for a single step:

Build a web app called SplitEasy from this spec: [paste spec].
Start with only the group screen and the add-expense form, using sample data in memory.
No database or sign-in yet. Keep the design simple and mobile friendly.

Small prompts save credits and make mistakes easy to spot.

04

Review the preview and fix in batches

Click every button and try bad input such as an empty amount or a negative number. Write down everything wrong, then send one prompt that lists all of it. Every build costs credits, so fixing five things in one message is cheaper than five messages. When something works, move on.

05

Add a database and sign-in

Connect a backend: Lovable Cloud or your own Supabase project in Lovable, Bolt Cloud or Supabase in Bolt, or Firestore and Firebase sign-in in Google AI Studio. Then prompt:

Store groups, members and expenses in the database. Add email sign-in.
Turn on row-level security on every table so a user can only read and change
groups they are a member of. Never put a secret key in the browser code.

Open the database dashboard and look at the policies yourself. If a table has none, ask the AI to add them.

06

Test the rule that must never break

Create two accounts using two different emails. Make a group as the first user and add an expense. Sign in as the second user and check that the group and its expenses are not visible, even if you guess the web address. In 2025 and 2026 researchers found many AI-built apps where this exact test would have failed. Follow the security checklist for the rest.

07

Sync the code to GitHub

Open your builder's GitHub or Git settings, connect your GitHub account and create a private repository. Open the repository and confirm you can see the code. This is your insurance: builders change plans and some shut down, and Firebase Studio closes on 22 March 2027.

08

Publish

Use the builder's publish button for a free address, or deploy the GitHub repository on Cloudflare Pages: choose the repository, set the build command to npm run build and the output directory to dist, and add your environment variables. Note the limits: Lovable's free plan can unpublish an inactive project, and Vercel's free Hobby plan is for non-commercial use only.

09

Write a README that shows your judgement

In the repository add a README with: what the app does, the live link, a screenshot, the stack, how you tested the privacy rule, and the three prompts that changed the design most. Add one limit you know about, such as no payments yet.

10

Share it and learn from three real users

Send the link to three friends and watch them use it without helping. Write down where they hesitate. Fix the top problem with one prompt and note the change in your README.

Make it yours

  • A habit tracker with daily streaks and a weekly summary.
  • A quiz maker where a teacher creates quizzes and students see only their own scores.
  • A feedback board where each person gets one vote per idea.
  • Rebuild the same spec in a second builder and compare the code and the credits used.

Troubleshooting

ProblemFix
The AI keeps breaking a screen that workedGo back to the last working version in the builder or Git history, then ask for a smaller change. Name the file and the exact behaviour you want.
Credits ran out halfwayFree plans reset daily or monthly. Sync the code to GitHub, then continue in an editor such as VS Code with a free coding assistant.
Sign-up emails never arriveSupabase's built-in email is limited to a few messages an hour. Add custom SMTP, for example with Resend, once real users arrive.
It works in the preview but not when publishedEnvironment variables are usually missing on the host. Add them in the hosting settings and redeploy.
A second account can see the first account's dataRow-level security is missing or wrong. Do not share the link. Ask the AI to add policies that check the signed-in user, then run the two-account test again.

Frequently asked questions

Do I need to know how to code to use an AI app builder?

No, but you must be able to read what it produces and test it. An app you cannot explain or check is a risk, especially once it stores other people's data.

Which AI app builder should a beginner start with?

Lovable or Google AI Studio's Build mode for a first web app, because both sync the code to GitHub. Compare them on the free vibe coding tools list.

How many credits will one app use?

It depends on how many times you prompt and how large each change is. A small app with a clear spec and batched fixes fits inside a free plan's monthly credits; a vague spec burns them quickly.

Can I put this app on my resume?

Yes. Include the live link, the repository, the spec and your two-account privacy test. That shows more judgement than the app itself.

Learn this with mentors

Programmes for builders and engineers with admissions open: live classes, mentors and project work.

Continue learning

About 2 to 3 hours

Secure a vibe-coded app

A 12-step security pass for AI-built apps, with real tests.

Step by step →12 steps
Free tools

Free vibe coding tools

Lovable, Bolt, v0, Replit, Base44 and more, with the real free limits.

See the list →12 tools
About 4 to 6 hours

Ship a vibe-coded app

Move an AI prototype to your own repo, database, domain and alerts.

Step by step →11 steps