Introduction
Vibe coding is recognized as one of the most exciting and fast-moving areas of AI today, with AI coding models constantly becoming more powerful every single month. If you have been watching this revolution from the sidelines, you might feel like you are already falling behind, but I promise you, that is not the truth. The reality is that vibe coding is a lot easier to understand than you think, especially if you focus for just a few hours, even if you have zero prior coding experience. This technology allows beginners to build increasingly complex applications because the AI is writing all the difficult code. It is truly amazing that you, with no or little coding experience today, can use the most powerful coding models in the world-the exact same tools the best developers use every single day.
This comprehensive guide is designed to take you from an absolute beginner to someone who feels ready to build around 20 different types of apps. In fact, we are going to build between 13 to 15 different applications throughout this journey, all using the most powerful AI coding models available globally. What you will quickly realize is that vibe coding goes beyond just creating a standard "app"; you can basically create any experience that happens on a computer or a phone just by typing what you want. We will divide this into five clear parts: setting up the powerful agents (like Claude Code, Codeex, and Gemini), building static pages, creating full web apps with databases and APIs, building mobile apps, and finally, deploying everything to the internet and the App Store. I really enjoy making videos like these, even though they take about 30 hours, because I want to make sure you gain complete control over this next wave of AI technology. So, let's not waste any more time; let's learn exactly how to vibe code.
The Vibe Coding Revolution and Mindset Shift
Vibe coding is one of the most exciting and fastest-moving areas in the world of AI right now. If you have watched this revolution unfold from the sidelines, you might feel like you are already behind, but I promise you, that is not the truth. Vibe coding is actually much easier to understand than you think, even if you have zero prior coding experience. The core idea of vibe coding is typing what you want, and the AI agent attempts to create or modify the code to match your request. This process allows beginners to build increasingly complex applications because the AI is writing all the difficult code for you. This approach goes far beyond just building simple applications; it gives you the ability to create basically any digital experience that happens on a computer or a phone. We are not just creating tools; we are bringing experiences to life just by asking.
Defining Vibe Coding and the AI Wave
The fundamental concept of vibe coding is all about letting the AI write the code. It is a powerful wave of technology where you simply describe your idea using natural language, and the AI gets to work creating the finished product. I have found that as the AI coding models improve every single month, the complexity of the applications that beginners can build just keeps increasing. Vibe coding is essentially a conversation with the smartest coding models in the world. You can take an existing codebase-like the Next.js stack I recommend-and ask the AI to modify the code files until they perfectly match your request. It really is that simple: you say what you want, and the AI attempts to make it for you. This is the reason why I have become so obsessed with tools like Claude Code and Codeex; these companies are dedicated to creating the best AI coding models globally.
Beginner to Expert in 90 Minutes (Masterclass Structure)
I have broken down this journey into five clear parts so you can move from an absolute beginner to someone who feels ready to build 20 different kinds of applications. In the first part, we focus on understanding the powerful coding agents and getting everything set up. The second part is all about building static pages, which are crucial for quick marketing and validation. Then, we move on to the really fun stuff in Part Three: creating full web applications complete with user authentication, databases, and powerful AI features using APIs. Part Four shifts our focus to mobile app development, showing you how to build a fully functioning app on your phone. Finally, Part Five is vital: we cover how to deploy both our web and mobile apps to the internet or the App Store. We are going to build around 13 to 15 different apps across these sections, demonstrating that you can truly go from zero experience to feeling completely in control of the next wave of AI technology.
Moving Beyond Apps: Creating Digital Experiences
What you quickly realize when you start vibe coding is that it is not just about building a conventional "app". You can use these tools to build virtually any digital experience that runs on a computer or a phone. For example, instead of using standard presentation software, I showed how you can take a massive document and ask Claude Code to turn it into a full-screen, sharable slide deck. We are creating unique digital artifacts-like dashboards built from raw data or interactive prototypes drawn on a canvas-that you can immediately share with anyone. You are only limited by your imagination and what you type into the prompt box. You have full control to change the entire subject matter, the styling, and the layout of these experiences simply by asking.
The Opportunity: Learning Now vs. Later
Right now is the best possible time to learn how to vibe code. I genuinely believe that everyone will be doing this in a year or two, but the barrier to entry is slightly harder today, which is exactly why you should start learning now. By getting comfortable with the process and solving problems today, you position yourself ahead of the curve. It is true that you can use the same state-of-the-art coding models and tools that the world’s best developers use, even with little or no coding experience. By focusing for just a few hours, you gain immense power. As the AI technology continues to improve, creating cooler and cooler applications will only get easier. My goal is to make sure you have the skills to seize this opportunity now.
Mastering the Core AI Coding Tools and Setup
Before we start building, we need to talk about the core tools that make vibe coding possible. I want you to know that you are using the exact same powerful coding models and tools that the very best developers in the world rely on every single day. We don't need complicated setup or configuration; we can skip right to the fun part.
Essential AI Agents: Claude Code, Codeex, and Gemini
We are going to be focusing on the three most powerful tools available today. The first is Claude Code by Anthropic, a company that has raised billions of dollars specifically to create the best AI coding model in the world. Claude Code is often considered the most popular choice right now. The second tool is Codeex, which many experts believe is the most powerful AI coding model globally at the moment. Finally, we use Gemini (specifically Gemini 2.5 Pro). It is pretty amazing that you can access all three of these state-of-the-art models just by having one subscription and opening them up on the web. Each model might handle a prompt slightly differently, so having access to all three lets you choose the best result for your project.
Setting Up Your Workspace: Sandbox.dev and Nex.js
To use Claude Code, Codeex, and Gemini in a command-line interface (CLI) or web format, all you need to do is go to sandbox.dev This platform runs the coding environment in a terminal in the cloud. When you create a new sandbox, it asks you to select your coding stack. If you want to create a modern-looking website that has great styling by default, I highly recommend choosing Next.js By selecting Claude Code with Next.js, you can immediately begin typing your ideas into the cloud terminal, and the AI will start changing the code files to bring your vision to life.
Understanding Yolo Mode (Bypass Permissions)
When you are running these coding agents through the web environment, like in the sandbox, they often operate in what is called "Yolo Mode" (or bypass permissions mode). This is a technical term, but it simply means the agent does not constantly ask you for permission every single time it wants to make a code change. If you were running these tools locally on your computer, you would typically have to approve many of the changes. In Yolo Mode, the AI just automatically implements the changes and also saves your work to Git automatically, which is super convenient. However, just to be extra safe, I always suggest pressing "save" when you finish a section.
Using the Vive Code App for Mobile
If you want to create mobile applications, you will need a slightly different setup: the Vibe Code app. This mobile app also utilizes Claude Code technology. The Vibe Code app is essential for building and deploying mobile apps that you can eventually submit to the App Store. The great thing about the mobile app is that it comes pre-built with multiple important APIs-like OpenAI, Gemini, XAI (Grock), Anthropic, and 11 Labs-ready to go. This makes integrating advanced features into your phone app extremely easy without needing to configure the API keys yourself initially, although you can still integrate external databases like Instant DB later.
Context Management: The Secret to Powerful Prompts
Even though AI is powerful, it still has limitations, and understanding these limits is what transforms you from a beginner to an expert in prompt engineering-or, as I like to call it now, context management Managing the conversation is crucial to making sure the AI always performs at its best. We need to make sure the AI has access to the right context-the details of what you are currently building-and not a huge amount of irrelevant, old context.
Why AI Gets Worse: The Context Window Problem
Have you ever noticed that the longer your chat conversation with an AI model gets, the worse the AI seems to perform?. This happens because you are filling its context window. The context window is simply the maximum amount of information (tokens, or all the text and code changes we have discussed) that the AI can remember at one time. If you have been working on an app for a very long time, that window fills up. When it fills up, the AI starts to forget some of the earlier details or gets confused, which degrades the quality of its response. You might see a little circle pop up indicating you have used a significant portion of its context window-that is your sign to act.
The Power of `/compact` and `/clear`
To fight the context window problem, we use two vital commands, accessed by typing the slash (/) button in Claude Code. First, there is the `/clear` command. This completely resets the chat, wiping the slate clean. If you want to start a brand new project within the same sandbox, `/clear` is what you need. However, if you want the AI to remember the key points of your work without keeping the entire chat history, you use `/compact`. The `/compact` command takes potentially millions of tokens of conversation and summarizes it all down to a much smaller chunk, ensuring the AI remembers the main details while freeing up space for new instructions.
Tracking Costs and Switching Models (`/cost`, `/model`)
Another powerful set of commands deals with managing the power and cost of the AI model itself. When you hit `/cost` in Claude Code, you can see exactly how much you have spent so far. This is important because different models cost different amounts. The `/model` command allows you to switch between the available AI models. For instance, you might switch from the default setting to the more powerful Opus model, which is roughly five times as expensive, or to GPT-5 High, which many people consider the current state-of-the-art coding model. For really big or complex tasks, I often start with GPT-5 High, even though it is slightly slower, because the job it does is excellent.
Going Back in Time with `/res` (Revisiting Previous Work)
Sometimes, you might clear a chat, only to realize you needed something from that previous conversation thread. Or perhaps you made 50 different changes and realize one of the earlier versions was better. This is where the `/res` command comes in handy. Typing `/res` allows you to go back to a previous chat or conversation. It lets you revisit everything you have done previously, which is a great way to review your history and recover previous changes you might have thought were lost. Understanding these four simple commands-`/compact`, `/clear`, `/cost`, and `/res`-gives you the power to control these complex tools effectively.
Vibe Marketing: Rapid Static Page Creation
Moving into the building process, the first category we tackle is static pages. This is what many industry experts refer to as Vibe Marketing. Vibe Marketing is all about incredibly fast iteration, rapid prototyping, and quick validation of your ideas. You can get immediate feedback from potential users, which is essential for running a successful business online.
What is Vibe Marketing (Fast Iteration and Validation)
Vibe Marketing is truly a new wave. It leverages AI tools like Claude Code to quickly create landing pages or prototypes that allow you to validate your business idea almost instantly. Instead of spending weeks building a full product, you can spin up a simple landing page using natural language. This page can collect sign-ups for a waitlist, gather user feedback, or even take pre-payments before the product is even fully released. This speed is incredibly valuable. You want to validate whether a tool or idea is worth the effort as quickly as possible, and Vibe Coding gives you the power to do that.
Creating Stylized Landing Pages from Images
One thing I absolutely love about Claude Code is how good it is at creating styling based on images. Instead of trying to describe a complicated aesthetic, I can upload a screenshot or an inspirational image, and the AI will adopt that styling. For instance, I took a screenshot of a specific design and asked Claude Code to create a landing page for my app, `vibecodeapp.com`, but told it to use the styling from the image. I also told it to focus on copy that would be good for conversions. When the AI produces a result, you can immediately tell it to make changes-like changing a background color from pink to dark gray or making the font style more Japanese-and it updates live. This makes rapid styling and branding simple.
Designing Sharable Artifacts: Dashboards and Presentations
Vibe coding goes beyond simple marketing pages; it allows you to create complex, shareable artifacts. For example, I showed how you can take raw data-like the fictional performance data for my barber shop, Riley's Barber Shopand paste it directly into the prompt. I asked Codeex to turn this data into a professional business dashboard with multiple slides, aiming to attract investors. Instantly, the AI converted the data into visual charts showing total revenue, daily pay, and payment methods. You can also use this technique to create full-on presentations or slide decks. I asked Claude Code to take research and turn it into a full-screen, togglable slide deck with a cool "teenage engineering" style. I could even ask it to search the internet for topics like Nano Banana and add custom icons, creating a clean, professional slide deck that is immediately shareable via a link.
Building Simple Games (The 3JS Coin Collector)
Believe it or not, you can even use vibe coding to quickly spin up simple games, which are fun digital artifacts. I created a new sandbox using the 3JS development stack, which is optimized for game development. I asked Opus to create a simple game where you could fly around and collect coins, even telling it to search GitHub for inspiration. Within moments, I had a working, sharable game called "Skycoins Adventure" where you fly a paper-airplane-like object, collect coins, and try not to hit red obstacles. While the depth perception was terrible (I kept missing the coins!), the fact that a complete, playable game was created with a single prompt demonstrates the power of these tools for creating diverse digital experiences.
Generating Leads: The Power of Lead Magnets
A critical part of Vibe Marketing is capturing information, which is where the concept of a lead magnet comes in. A lead magnet is something of value-like a detailed guide or presentation-that you offer to people on the internet in exchange for their email address or other . This allows you to collect leads that you can use later for marketing future products.
The Purpose of a Lead Magnet (Collecting Information/Emails)
Imagine you spent time creating a detailed resource, perhaps a PDF guide on vibe coding. You want people to have it, but you also want to build a mailing list. A lead magnet solves this by requiring the user to submit information before gaining access. Collecting these leads is incredibly useful for your business. If you create a new product six months later, you can send an email directly to this engaged list. I have used this technique myself; for example, I collected over 6,000 emails for the Vibe Code app way back when it was first being developed.
Integrating External Tools (Tally and Embedding Forms)
To make collecting this data easy, we leverage tools designed specifically for forms, like Tally. Tally allows you to build a multi-page form where the first page asks for the name and email, and the second page contains the actual guide. I use a feature where I copy the public view link of my guide (which could be hosted on a service like Gamma or Notion) and paste it into the second page of the Tally form. This ensures the user only sees the guide after they hit "Next" and submit their details.
The Step-by-Step Lead Magnet Creation Process
The process of embedding this form into a custom vibe-coded landing page is straightforward. First, you create your form and hit "publish" on Tally. Tally then provides an embed code-simple HTML code-that you copy. Next, you go back to Claude Code, open a new Next.js sandbox, and instruct the AI to build a clean, simple landing page. Crucially, you then paste the HTML embed code directly into the prompt and tell the AI to embed this Tally link so people can fill out the information. The AI will handle the placement and styling. I demonstrated this by creating a page for a "full vibe coding guide," and when opened, users provided their information and were immediately shown the guide link, proving the lead collection worked.
Validating Business Ideas Quickly
This rapid prototyping cycle-which involves creating a landing page, generating a lead magnet, and collecting emails-is the heart of fast validation. You can quickly gauge interest in a tool or course without spending immense time and money on development. If a lot of people sign up for the waitlist on your landing page, that is quick validation that your idea is worth pursuing. If nobody signs up, you pivot or move on to the next idea. Vibe coding dramatically reduces the time needed to test an idea, letting you spend more time building products that people actually want and are willing to pay for.
Full Web Apps: Database and User Authentication
Now we move from static pages to creating full-on web applications. This is where things get much more exciting because your friends can sign in, and you can see their data update in real time. This requires two key components: a database to store information and authentication so users can log in.
Choosing the Right Backend: Instant DB vs. Superbase
When building applications that need a database and authentication, many vibe coders use tools like Superbase. However, based on my experience, Instant DB is far easier and more effective when working with AI coding agents. AI often runs into problems or finds it much harder to integrate Superbase. Instant DB simplifies the process significantly. All you have to do is create a new app on Instant DB, and they provide you with a unique "public app ID" which serves as the key to communicate with your new database.
Setting Up the Database and Public App ID
To start a new web app, I go to Instant DB and create an app-for this example, I called it the Riley To-Do App. I then copy the public app ID. I open a new Claude Code sandbox with the Next.js stack, and in the prompt, I tell the AI exactly what I want: "Please research Instant DB, implement a sign-in page, and use this public app ID". I emphasize that the AI needs to use the Instant DB documentation to make sure the authentication and database features work on the very first try. By providing the stack (Next.js), the database tool (Instant DB), and the necessary key, I give the AI all the context it needs to begin building.
Building the Riley To-Do App (Sign-in, Notes, Editing)
The result of this single complex prompt was a working to-do list app. It included a sign-in page, supporting both email and Google sign-in methods (though I prefer testing with email and the "magic code" verification). Once signed in, users could create notes, which were immediately stored in the Instant DB database. By checking the Instant DB explorer, I could verify that my note, titled "hello this is my note," was correctly entered and saved. I could then instruct the AI to immediately improve the aesthetics, asking it to make the app look sleek and modern like "Bare Note," without breaking the existing, working database and authentication features.
Debugging and Storage Permissions (The Permissions Fix)
During development, especially when dealing with complex features like file uploads, you might encounter errors. In my test, when I tried to upload an image attachment to a note, I received a persistent error: "permission denied has not storage permissions". This is a crucial learning moment in vibe coding; sometimes, you need to configure the database itself. I immediately asked Claude Code, "If there's anything I need to paste into Instant DB permissions, please tell me now". The AI successfully generated the correct storage rules needed for Instant DB. Once I copied and pasted those rules into the Instant DB dashboard, the image upload feature immediately began working. This shows that even when debugging, the AI acts as a powerful assistant, often providing the exact technical fixes you need to resolve problems.
Integrating APIs: Unlocking Next-Gen AI Features
The transition from a simple web app to a truly cutting-edge application happens when we utilize APIs (Application Programming Interfaces). APIs are how external AI technology-like image editing or voice transcription-can be integrated directly into the app experience you are building. This is my favourite section because it unlocks brand new AI experiences for users.
APIs as the AI Experience Package (GPT-3/ChatGPT Analogy)
To understand APIs, think about ChatGPT. ChatGPT is an incredibly nice user experience, but it started with GPT-3, which was just the raw language model. ChatGPT was the packaging of that underlying GPT-3 technology that made it go viral and started the whole AI revolution. APIs allow you to take that raw, powerful AI technology-like image models or voice models-and package it into your own custom application experience. This means you can create a unique, tailored experience that could potentially become a multi-million dollar business, all powered by someone else’s raw AI model.
Understanding Text-to-Text and Image-to-Text APIs
APIs interact in various ways. The most common interaction is text-to-text, like the original ChatGPT where you type text, and the AI replies with a text answer. But now, we have much cooler options. You can use image-to-text, where you upload an image, and the AI responds with text (like asking what is in a photo). More excitingly, we use models that are text-and-image-to-image, like the new Nano Banana technology developed by Google. This allows me to upload a photo and then type an edit-such as "make the man wearing sunglasses"-and the API returns the edited image.
Building Nail.ai: Combining Prototype and API
I demonstrated this power by reviving the static nail.ai prototype we built earlier (the YouTube thumbnail editor) and making it functional. I instructed Claude Code to bring this prototype to life using the brand-new Nano Banana technology via the Gemini API. To make this connection work, I needed a secret "password," or the API key, which I obtained from Google AI Studio. I pasted this key directly into the prompt, telling Claude Code to embed it in the app. The app's logic became: when the user types an edit into the input box, the app communicates with the Gemini API using the key, and the Gemini API sends the edited image back. I even switched to the stronger Opus model for this complex task to ensure it handled the documentation correctly.
Rapid Iteration and Version History through Vibe Coding
The result was amazing: the nail.ai app worked perfectly. I could upload my thumbnail and type, "make him smiling," and seconds later, a new version appeared. The power is in rapid iteration. I immediately typed another prompt: "make his hair brown and longer and give him an orange turtleneck," and the model produced the next version. The app automatically manages the version history, allowing me to look back at previous edits and even select an earlier version to continue editing from there. I could continue refining the UI, like asking the AI to make the main image bigger and move the versions into a sidebar, demonstrating full control over both the AI functionality and the user interface.
Mobile Development and Global Deployment
The final stage of the masterclass is taking our creations, both web and mobile, and pushing them out into the world so other people can use them. Deployment is the necessary first step before you can even think about charging money for your applications.
Building Apps Directly on Your Phone (Voice Notes Example)
The great thing about the Vibe Code app is that you can build mobile applications directly on your phone. I created a voice notes app called Monkey Note. I prompted the AI to build an app that uses the OpenAI Whisper API (which is built into the Vibe Code app) to transcribe a voice note, and then use the standard OpenAI API to generate both an AI summary and a title for the note. This is a fully functional, smart local app that stores data directly on the phone. While I ran into some debugging errors (which I easily fixed by copying the error and pasting it back into the prompt for the AI to resolve), the app eventually worked perfectly, creating a summary and a full transcript that I could view.
Cross-Platform Workflow and Real-time Updates
If you prefer coding on your computer, you can still seamlessly work on your mobile app. The Vibe Code platform allows you to see your app project on the web. You can scan a QR code using your phone's camera, which instantly opens the exact app you are working on in the Vibe Code mobile app. I demonstrated this by making a change on the computer-changing the title to "NANO BANANA DASH RILEY" in all caps-and refreshing the phone app to show that the update appeared instantly. This cross-platform workflow gives you flexibility: you can type commands on the computer or use the conversational chat interface directly on your phone.
Deploying Mobile Apps: The Apple Developer and Expo Process
Submitting a mobile app (like my finished Nano Banana Riley editor) to the App Store requires a few steps. First, you need an Expo Access Token from a free Expo account. Second, and most crucial, you need to set up an Apple developer account. This step can take a little time, but it is necessary if you want to upload unlimited apps. Once these accounts are connected, you hit "start build process". During the build, Apple requires a six-digit authorization code from your developer account for permission. After this, you just need to create the required static assets-like a description, terms of service, and privacy policy (even a simple Notion document can work)-and then your app is ready to be sent to Apple for review.
Deploying Web Apps: Downloading Code and Next Steps
For web apps (like the nail.ai editor or the dashboard), deployment to the internet is coming soon with a planned one-click deployment button. Until then, or if you are more advanced, you can still deploy your web apps using services like Vercel or Netlify. The process involves pressing the "download" button in the sandbox, which saves the project and emails you the code. You can then open that code in a tool like Cursor. From there, you can instruct Cursor to upload the code to a specific GitHub repository and then use the CLI to deploy it to services like Vercel. Deployment is the foundation for future monetization, and in subsequent videos, I plan to cover more advanced topics like adding payments and setting up custom domains.
Conclusion
We have covered a massive amount of ground in this masterclass, moving from being a beginner to someone who feels they have complete control over the next wave of AI technology. We learned how to set up and manage the most powerful coding agents-Claude Code, Codeex, and Gemini-and even mastered essential commands like `/compact` to ensure the AI always performs at its best. We then rapidly built static pages for fast validation, which is part of the new wave I call Vibe Marketing. Crucially, we moved beyond simple pages to create full web apps complete with databases using Instant DB and user sign-in features. We also dove deep into using powerful APIs, like the Nano Banana technology via the Gemini API, to create next-generation experiences like the nail.ai thumbnail editor. The core idea here is that we did this all by conversational coding-typing what we wanted, and the AI attempted to make it for us by changing the underlying code.
The journey did not stop there, though! I also showed you how you can build applications directly on your phone using the Vibe Code app, like the Monkey Note voice recorder, and how you can manage that real-time workflow between your computer and mobile device using a simple QR code. Finally, we tackled the crucial step of deployment, which is the necessary first step before you can even think about charging money for your applications. We covered the requirements for preparing mobile apps for the App Store (using an Expo Access Token and an Apple developer account) and the manual method for web deployment (downloading the code to upload to services like Vercel or Netlify via Cursor). I want to stress that right now is the best possible time to learn how to vibe code-you want to do it while it is still a little bit hard, because everyone is going to be doing it in like a year or two. As AI technology gets better, we are going to be able to create cooler and cooler apps; it is going to be amazing.
This process of getting your apps live and sharable is the foundation for future development. In the next video in this series, I plan to talk only about implementing payments, which will be a very long and fun video itself. I will also cover setting up custom domains for your deployed web apps. If you found this comprehensive guide valuable and you want to keep up with all the amazing applications we are going to build together, please consider liking this video, subscribing, and sharing this content with your friends. I will see you here for the next one.
0 Comment(s)
Be the first to leave a comment!