A step-by-step guide for non-technical people to build and deploy real apps
By the end of this guide, you'll have:
Cost: for . Hosting and code storage are free. Monthly billing is easy to start and stop if you're a sporadic user.
Before we start, make sure you have:
That's it. No coding experience required.
Need help? If you get confused at any point, you can send a link to this guide to Claude and ask it clarifying questions about the instructions.
You'll need three accounts. Set them up in this order—each one connects to the previous:
1. GitHub (free)
Go to github.com/signup and create an account. This is your foundation—the other services will connect to it.
GitHub is like Google Drive, but for code. It stores your project files in something called a "repository" (or "repo" for short)—basically a folder for your project.
Why it matters: GitHub keeps a complete history of every change made to your code. If something breaks, you can always go back to a working version. It also lets save its work and makes it easy to collaborate.
Key terms you'll see:
2. Vercel (free) — connects to GitHub
Go to vercel.com/signup and click "Continue with GitHub". This automatically links your accounts so Vercel can see your repositories.
Vercel is a hosting service that turns your code into a website. When you connect Vercel to your GitHub repository, it automatically publishes your code as a live website that anyone can visit.
The magic of automatic deployments: Every time code is added to your repository, Vercel notices and updates your website within seconds. You don't have to do anything—it just works.
Preview vs. Production:
3. () — connects to GitHub later
Go to , create an account, and subscribe to . You'll connect GitHub later when you start your first project— will prompt you.
is that can write, edit, and manage code for you. It's specifically designed to build software projects.
What it can do:
How to access it: On the web at , or in the mobile app under the "" tab.
Connecting to GitHub: The first time you use , it will ask to connect your GitHub account. Click "" and authorize access. This only needs to be done once.
How it all connects: GitHub stores your code → Vercel reads from GitHub and hosts your website → writes to GitHub. All three work together automatically once connected.
Now for the fun part—let's build something! This detailed walkthrough covers every step.
Want to see an example? This guide itself is a working app built with . View the repository on GitHub to see what a finished project looks like.
First, create a new repository on GitHub to store your project:
Why private? Private repositories are only visible to you. This is a good default while you're building. You can make it public later if you want to share your code.
Copy this starter prompt, customize it with your idea, and send it to :
Create a new PWA project with the following: - Single page app using vanilla HTML/CSS/JS (no framework) - Mobile-first responsive design - PWA manifest and service worker for "Add to Home Screen" support - [DESCRIBE YOUR APP IDEA HERE] Set up the repo structure with a README explaining what the app does.
Example app ideas: habit tracker, recipe organizer, workout timer, daily journal, gift idea list, expense tracker, meditation timer.
Tip: Be specific about what you want! Instead of "a notes app," try "a notes app with categories, search, and the ability to pin important notes to the top."
After you send your prompt, will:
This usually takes a minute or two. will show you what it's doing as it works.
Once finishes writing the code, you'll see a button that says "Create pull request" (or similar):
Tap/click this button to create a proposal on GitHub containing all of 's changes. You'll get a link to view it.
What just happened? saved the code to a separate branch (not your main app yet), and created a proposal asking you to review and approve the changes.
Before you can see your app live, connect your repository to Vercel:
Vercel will now automatically create previews for all your proposals and deploy approved changes.
Go back to your proposal on GitHub. You should now see a comment from Vercel with a preview link:
This is a temporary preview. Your real site won't update until you merge the proposal.
Test your preview. Click around, try all the features. Things to check:
Want changes? Go back to and describe what you'd like fixed or added. will update the same proposal with improvements.
Happy with it? Continue to the next step to go live!
When you're satisfied with the preview, it's time to publish:
Congratulations! You've built and deployed your first app. Share the link with friends!
Once your app is deployed, you can add it to your phone like a native app. This step is optional—your app works perfectly in a browser, but adding it to your home screen makes it feel more like a native app.
On iPhone (Safari):
On Android (Chrome):
Your app now appears alongside your other apps!
Here's how to make sure you're never surprised by charges:
GitHub
The free tier is very generous. You'd need thousands of users or complex automation to exceed it. No action needed.
Vercel
Go to Settings → Billing → Spend Management and set your spending limit to $0. This ensures you stay on the free tier and won't be charged even if you exceed limits (your site just pauses temporarily).
This is a fixed subscription. There are no usage-based charges or surprise fees. You can cancel anytime.
Here's how building apps works at a high level:
Setup (once per project):
Iteration Loop (repeat as needed):
Vercel automatically creates a preview for every proposal. When you approve and merge, it goes live instantly.
When makes changes to your code, it doesn't change your live app directly. Instead, it creates a proposal (technically called a "pull request" in GitHub).
Think of it like this: your app has a main version that everyone sees. When writes new code, it creates a separate draft version. You can review this draft, see a live preview of how it looks, and decide whether to accept it.
Why this matters:
The review process:
Don't worry if this sounds complicated— will guide you through it, and you'll get the hang of it after your first project.
When your code goes from GitHub to a live website, that's called a deployment. Vercel handles this automatically, but it's helpful to understand how it works.
Two types of deployments:
Every time creates a proposal, Vercel automatically builds a preview deployment—a temporary version of your app with those changes applied.
your-project-xyz123.vercel.appWhen you merge a proposal into the main branch, Vercel creates a production deployment—this is your real, live website.
your-project.vercel.appWhere to find your preview link: When you view a proposal on GitHub, scroll down to the "Vercel" section in the comments. You'll see a "Visit Preview" link that takes you to the temporary preview site.