How to vibecode

Vibecoding is building software by describing what you want in plain English and letting an AI write the code. You act as the director: you decide what the app should do, test out what the AI builds, and guide it until your idea comes to life. You don’t need any prior coding experience.

Lovable is one popular way to do this. You describe an app in your web browser, it generates the code, and a single “Publish” button puts it online. It is fast and user-friendly, which makes it appealing for quick ideas.

However, I prefer using Codex locally on my computer. Codex comes included with ChatGPT Plus, Pro, Business, and Enterprise plans. Think of Codex as an AI assistant that sits directly inside a folder on your computer. It can create files, run your app, test for errors, save your progress, and help put your finished app online.

Building locally keeps extra development costs close to zero. Storing your code on GitHub is free, and hosting your app on Vercel is free for personal projects. Usually, the only thing you ever pay for is your custom website address (your domain name).

Setting up your computer takes about 30 minutes the first time. After that, you have a free, flexible, and powerful setup. Unlike platforms that charge usage credits every time you ask the AI to fix a small mistake, running Codex locally lets you make endless tweaks without extra fees. If your app grows into a real business, Codex can work on backends, databases, user accounts, and extra features in the exact same project.

This guide takes you through the entire process step-by-step: preparing your computer, building your first app, saving your work safely, publishing it online, and adding a custom web domain.

Choose How Much Convenience You Want

Lovable combines several tools behind one simple web page. It writes code, previews your app, connects services, and handles hosting for you. Its pricing uses a credit system, where credits are consumed whenever you generate code, fix bugs, or run AI features in deployed apps.

There is real value in skipping setup work. If you want a quick landing page this afternoon, paying for an all-in-one tool to avoid technical setup is reasonable.

For personal projects or new app ideas, however, I prefer spending 30 to 60 minutes setting up standard tools. If you already pay for ChatGPT, paying an extra monthly subscription just for a code generator can feel wasteful - especially when small bug fixes eat into your monthly credits.

Maintenance is where local development shines. In a local project, you can ask Codex to inspect a bug, modify files, run tests, and fix errors. No builder credits are charged for every attempt.

Lovable also offers to buy and register website domains for you. While convenient, I prefer buying my domain names from an independent domain registrar (like Namecheap). Keeping your domain separate ensures you retain total control over your web address, even if you decide to change host platforms in the future.

What About Tools Like Riff?

You might also hear about tools like Riff. Riff is built for large enterprise company workflows - like automated software agents that process corporate purchase orders, check inventory across factories, and update logistics databases.

Think company supply chains rather than personal expense trackers. Riff provides complex enterprise security, database connections, and corporate support. It is great for big businesses, but complete overkill if you are a solo builder or non-coder testing a new app idea. For small projects, Codex and a local project folder are all you need.

More Control Gives You More Power

Website builders work best as long as your app stays simple. The moment you want an unusual feature, you hit platform restrictions.

By using Codex directly on your computer, there are virtually no limits. You can ask Codex to:

• Connect to any payment provider, database, or external service;
• Build custom backends and user login systems;
• Create mobile apps, browser extensions, or desktop applications;
• Move your app to any web hosting provider anytime;
• Inspect and fix any part of your app when something breaks.

You don’t need all these features on day one. Start with the simplest possible app! The advantage is knowing that as your app grows, you won’t be forced to rebuild it from scratch somewhere else.

Quick Jargon Guide for Beginners

Before starting, here are a few simple definitions for terms you will see in this guide:

• Git: A Time Machine / Save Point system for your project. Every time your app works, Git saves a snapshot (called a “commit”). If the AI accidentally breaks something later, Git lets you rewind time back to when it worked.
• GitHub: Google Drive for code. While Git saves snapshots on your computer, GitHub keeps a secure backup copy in the cloud and connects your code to web hosting services.
• Node.js: The engine installed on your computer that allows web app tools and scripts to run.
• npm: An app store for pre-made code building blocks. Instead of coding complex features from scratch, npm downloads free, reliable building blocks (like calendar pickers, chart tools, or button designs).
• Localhost: Your computer’s private testing screen. When testing your app locally, it opens a special address like http://localhost:3000. This is only visible to you on your machine.
• Vercel: A free hosting platform that takes your project from GitHub and turns it into a live public website link for the world.
• Domain & DNS: Your Domain is your custom web address (e.g., mycoolapp.com). DNS is the internet’s address book that directs visitors to your website host.

---

Follow This Step-by-Step Guide

You do not need any coding experience. Follow these steps in order and ask Codex to explain anything unfamiliar.

1. Install and Open Codex

1. Visit the official ChatGPT desktop app download page. The desktop app includes Codex on both macOS and Windows.
2. Download and install the app for your computer.
3. Open ChatGPT and sign in to your account.
4. Click and select Codex inside the app.

2. Create a Folder for Your App

This folder will hold all the files belonging to your app.

• On Mac: Open Finder → Documents. Create a folder called Projects, open it, and create a subfolder called expense-tracker.
• On Windows: Open File Explorer → Documents. Create a folder called Projects, open it, and create a subfolder called expense-tracker.

Now return to Codex:

1. Click Add project.
2. Select the expense-tracker folder you just created.
3. Click Continue.

Codex now has access to work inside that folder. Always keep each new app in its own separate folder.

3. Ask Codex to Prepare Your Computer

To build web apps, your computer needs three helper tools installed: Git, Node.js, and npm.

You do not need to learn how to use a terminal or type command lines yourself - Codex will run the necessary commands for you!

Copy and paste this prompt into Codex:

I have never set up a coding environment before. Check whether Git, Node.js, and npm are installed on my computer. Explain the results in simple terms. If anything is missing, guide me on how to install it using official installers. Tell me what you plan to do before taking action. When finished, verify all three tools and show me their versions. Do not build the app yet.

Codex will check your computer automatically by running three background checks:

git --version
node --version
npm --version

If a tool is missing, Codex will ask for your permission to install it or give you an official link:

• Node.js: Install the recommended LTS version from nodejs.org.
• Git (Windows): Download and install Git from git-scm.com using default options.
• Git (Mac): Running the check may open Apple’s developer tools prompt. Click Install, let it finish, then reopen Codex.

Once installed, ask Codex to run the check prompt again. Continue once Git, Node.js, and npm all show version numbers.

4. Build the First Version of Your App

Copy and paste this prompt into Codex:

Build a mobile-friendly expense tracker app for one person. It should let me record an expense amount, date, category, and a short note, then display my spending totals grouped by category. Store the data in the browser for now. Keep the design clean and modern, and choose the simplest suitable web framework. Explain your plan first, build the app, test that it works, and show me how to open it in my browser.

Codex will propose a plan and ask for your approval. Allow it to create files and install necessary packages inside your expense-tracker folder.

When Codex finishes, it will give you a local web link, such as http://localhost:3000. Click the link to open your app in your browser!

Note: localhost means the app is currently running privately on your computer. Nobody else on the internet can see it yet.

If you close Codex or restart your computer and the page stops loading, simply reopen Codex, select your project folder, and type:

Start the app locally and give me the web address.

5. Test Your App

Try using the app like a real user. Add a few expenses, try leaving inputs blank, refresh the page to see if your data stays saved, and try resizing your browser window.

If you find any bugs or layout problems, describe them in plain English to Codex and ask it to fix them.

Then paste this follow-up prompt:

Test the main expense-recording flow and check for any errors. Run a production build check. Explain where my data is currently stored and whether any external paid services are being used.

Ask Codex to fix any errors before moving to the next step.

---

6. Save Your Project on GitHub

GitHub keeps a secure backup copy of your project in the cloud. This backup is what connects your app to free hosting services like Vercel.

1. Create a free account at github.com if you don’t have one.
2. Sign in, click the + icon in the top-right corner, and choose New repository.
3. Type expense-tracker as the repository name.
4. Select Public.
5. Leave all checkboxes (Add a README, Add .gitignore, Licence) unchecked, as your project files already exist on your computer.
6. Click Create repository.
7. Copy the repository address shown under Quick setup (it looks like https://github.com/your-username/expense-tracker.git).

Return to Codex and paste this prompt (replace the web link with your copied GitHub link):

Check the project for any sensitive data. Create a .gitignore file, initialize Git, create a save checkpoint called “First working version”, connect it to my GitHub repository at https://github.com/your-username/expense-tracker.git, and upload the code. Explain each step clearly.

GitHub may open a browser popup asking you to log in and authorize Git. Complete the sign-in. When finished, refresh your GitHub web page - you will see all your project files safely backed up online!

Understanding Git Checkpoints (The Save System)

Remember: Git saves checkpoints on your computer, while GitHub holds the online backup copy. A checkpoint (called a commit) saves your progress so you can rewind back if a future update breaks something.

Under the hood, saving progress involves these basic steps:

• git pull - Downloads any updates from GitHub.
• git status - Lists files you changed since your last checkpoint.
• git add . - Selects all your changed files for saving.
• git commit -m "Description" - Saves a permanent checkpoint on your computer with a label describing your changes.
• git push - Uploads your newest checkpoints to GitHub in the cloud.

You don’t need to memorise these commands! Whenever you make a great improvement to your app, simply ask Codex:

Show me what files changed, save a Git checkpoint called “Added monthly filter”, and push to GitHub.

---

7. Put Your App Online for Free with Vercel

Now that your project is on GitHub, you can turn it into a live public website with Vercel in just two minutes.

1. Go to vercel.com and click Continue with GitHub.
2. Authorize Vercel to access your GitHub repositories.
3. In Vercel, click Add New → Project.
4. Find expense-tracker in your project list and click Import.
5. Leave all default settings as they are and click Deploy.
6. Wait about a minute for Vercel to build your site. Once finished, click the generated link (ending in .vercel.app).

Congratulations! Your app is now live on the internet! You can open this link on your phone or send it to friends to try out.

Whenever you ask Codex to make improvements and push new checkpoints to GitHub, Vercel will automatically update your live website within seconds.

---

8. Connect Your Custom Domain Name

Once you are happy with your app, you can replace the .vercel.app address with your own custom web address (like myexpensetracker.com).

Buy your domain from an independent registrar like Namecheap. Then connect it to Vercel:

1. Open your project dashboard in Vercel and go to Settings → Domains.
2. Type your domain name (e.g., myexpensetracker.com) and click Add.
3. Vercel will display DNS record instructions (an A Record and a CNAME Record). Keep this window open.
4. In a new browser tab, log in to Namecheap, go to Domain List → Manage → Advanced DNS.
5. Click Add New Record and copy the exact Record Type, Host, and Value numbers shown by Vercel.
6. Click Save.

DNS updates usually take a few minutes to connect. Once verified, typing your custom address in any browser will open your live app!

---

What Will Eventually Cost Money?

A personal app that saves data in the browser can run completely free (aside from your domain name registration fee, which is usually around $10–$15 per year).

If your app grows and starts serving thousands of active users, common potential costs down the road include:

• Cloud databases for multi-device sync;
• User login authentication services (beyond free tier limits);
• File and image storage;
• Sending transactional emails;
• Paid AI API calls.

This is the beauty of building locally with Codex: you start with 100% free tools, see exactly where every feature lives, and only pay for external services when your app actually needs them.

---

Final Thoughts

All-in-one app builders like Lovable are great for visual prototypes or disposable landing pages when you don’t want to think about setup.

However, if you want to build an app that lasts, add custom features, or turn your idea into a business, starting locally with Codex gives you total freedom, lower costs, and zero platform locks.

Setting up your computer takes less than an hour, and Codex guides you through the entire process. If you already subscribe to ChatGPT, open Codex, create a project folder, describe your app idea, and build your first project today!