How to Vibe Code with Claude: Build Your First App (No Experience Needed) | Code with Beto

People with zero coding experience are building and shipping real applications right now. As a professional developer, I've seen it in my own community. People who have never written a single line of code are publishing apps on the App Store. And in this guide, I'll show you exactly how to do it using Claude Code.

Here's the thing: this isn't a simplified beginner-only workflow. This is the exact same process I use every time I start a new application from scratch, and I've been building mobile apps professionally for years. Whether you're brand new or you've been coding for a while, you'll get something out of this.

Watch the full video: Build Your First App with Claude Code (No Experience Needed)

What Is Vibe Coding with Claude?

"Vibe coding" is the term developers use to describe building software by directing an AI agent with natural language: you describe what you want, and the agent writes the code. Claude Code is the best tool for this right now.

What makes Claude Code different from just asking ChatGPT to write code is that Claude Code runs in your terminal, has access to your actual project files, and can make changes, run commands, and iterate in real time. It's a proper AI coding agent, not a chatbot.

Install Node.js

Before anything else, you'll need Node.js, a program that lets your computer run JavaScript code. React Native, Expo, and Claude Code all require it.

Go to nodejs.org, download the LTS (Long-Term Support) version, and install it. Once installed, verify it:

node -v

If you see a version number, you're good to move on.

Install Claude Code

Open your terminal. On Mac, you can use the built-in Terminal app or something like Warp, which I personally use and recommend.

Run the install command from the Claude Code landing page:

npm install -g @anthropic-ai/claude-code

Once it's installed, verify it worked:

claude --version

Create Your Expo Project

For this guide, we're building a React Native app with Expo. The big advantage: your app will work on both iOS and Android, and you don't need to install Xcode or Android Studio to test it.

Navigate to the folder where you want to create your project:

cd ~/Desktop/apps

Then create your Expo project:

npx create-expo-app@latest my-app

Pro tip: Don't let Claude Code create the project for you. It's a waste of tokens, and it might use an older version or do unexpected things. Always scaffold the project first, then hand it off to the agent.

Change into your project folder:

cd my-app

Open It in Your Editor

I recommend Cursor or VS Code. Both are free. If you have Cursor installed, open your project with:

cursor .

This gives you a visual file explorer on the left, which is helpful even if you're not familiar with mobile development yet. Just become familiar with what's there. You don't need to change anything.

Install Expo Go on Your Phone

Download Expo Go from the App Store (iOS) or Play Store (Android). This app lets you preview your project on your actual device while you develop. No cables, no simulators required.

Start your development server:

npx expo start

Scan the QR code with your phone camera and open it in Expo Go. You'll see the default Expo starter template running on your phone. This confirms everything is working.

Install Agent Skills

Before you start prompting Claude, add Expo's official agent skills to your project. Skills are context documents that guide Claude to follow Expo best practices: the right patterns, the right APIs, the right UI conventions.

npx skills add expo-skills

Select Build Native UI from the list, choose Claude Code as the agent, and install it at the project level. You'll see new folders like .claude/ appear in your project. That's the skill installed and ready.

To verify, open Claude Code inside your project:

claude

Then ask it:

List my skills in this project

It should detect the Expo skill. You're ready to build.

Use Plan Mode Before You Build

This is the mistake most beginners make: one-shotting the entire app in one prompt. Sometimes it works. More often, you get a mess.

The better workflow is to start in Plan Mode. In Claude Code, type:

/plan

Or press Shift + Tab to toggle between plan mode and agent mode.

In plan mode, Claude will analyze your request, explore the project structure, and ask you clarifying questions before writing a single line of code. This is how you catch misunderstandings early.

Here's the prompt I used to build a habit tracker:

I want to build a minimalistic habit tracker application with light mode only. Use just white and black colors. For storage, keep everything local. Use SQLite to save data on the device. Focus on a beautiful UI. Important: show a heatmap of the user's consistency in following their habits. Please ask me any questions and clarifications you need before proceeding. Make sure the code is composable, with reusable components, and follows best practices.

After submitting, Claude asked me things like:

What screens or navigation structure do you want? (I said tabs)
What habit frequency? (I said daily)
How far back should the heatmap go? (I said the last 3 months)
Do you want mood tracking? (I skipped it to keep it simple)

That back-and-forth is the value of plan mode. You align before the agent starts burning tokens.

Review the Plan, Then Build

Once you've answered Claude's questions, it generates a detailed plan. Read it carefully, especially if you're building something serious.

The plan I got included:

A clean grayscale color palette (pulled from my description)
SQLite for local storage
Proper React Native hooks and component architecture
Expo Router for tab-based navigation

Once you're happy with the plan, clear the context before building:

/clear

Why clear the context? Every token used in the planning session eats into the context window. Developers report that past 50% context usage, the agent gets noticeably worse. Clear it and start fresh with just your codebase.

Then tell Claude to build it based on the plan. After about 10 minutes, you'll have a working app running on your phone.

Save Your Progress with Git

The agent just created a bunch of files. Before you ask it to do anything else, commit your work.

In Cursor or VS Code, click the Git tab on the left sidebar, stage all changes, and commit with a message like initial habit tracker build. You can let the AI generate the commit message for you.

Why this matters: if the agent breaks something in the next session, you can always discard the changes and return to your last good state. Developers have this advantage: they know how to use git. Now you do too.

Want to learn git properly? I have a full Git and GitHub course.

Iterate with Natural Language

After clearing the context and starting fresh, keep building. For example, I added a color picker feature to the settings screen:

Can you add an option on the settings screen to allow the user to select a primary color for their habits? Right now we're using black for everything, but let's let the user choose. For now, hard code five colors they can select.

Within minutes, the feature was live. Purple habits, blue habits. The user picks.

Two tips for better prompts:

Reference specific files with @filename (e.g., @app/(tabs)/index.tsx) to point Claude to exactly where you want changes made.
Check context usage with /context. If you're past 30-40%, clear it before continuing.

Building with AI is a conversation. Every iteration gets you closer.

The Workflow at a Glance

Install Node.js: download LTS from nodejs.org
Install Claude Code: npm install -g @anthropic-ai/claude-code
Scaffold the project: npx create-expo-app@latest
Start the dev server: npx expo start
Install Expo skills: npx skills add expo-skills
Use plan mode: /plan then describe your app
Let Claude ask questions: align before it builds
Clear context, then build: /clear
Commit your work: always after a successful build
Iterate with clean context: new features, new sessions

Want to Go Deeper?

This workflow gets you started. But if you want to understand why things work (how routing works, how hooks work, how to debug issues, how to ship to the App Store), that's where knowing React Native gives you a massive edge.

Developers who understand the fundamentals can direct the agent much better. They catch bad plans. They know when output is wrong. They know how to fix it.

If you want to level up, I have a full React Native course. It covers everything from fundamentals to production deployment. One price, lifetime access, and everything I build goes in there.