> ## Documentation Index
> Fetch the complete documentation index at: https://base-a060aa97-danc-alpha-docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Vibe Coding Fundamentals

> Combine traditional web development with AI-powered code generation

# Vibe Coding Mini Apps

Mini Apps are just web apps—with added capabilities. If you've built a website, you're already halfway there. The difference is that Mini Apps are designed to work seamlessly inside social feeds, come with built-in wallets, and connect to open, onchain identity.

The easiest way to get started is with MiniKit, a toolkit that gives you ready-to-go templates. These templates handle the heavy lifting—wallet integration, social feed support, and identity management—so you can focus on what your app actually does.

You can also build using AI tools that turn ideas into code. Tools like [Vercel V0](https://v0.dev/), [Claude Code](https://www.anthropic.com/claude-code), and [Loveable](https://lovable.dev/) let you describe your app in plain language and generate working code in minutes. They're perfect for creators, vibe coders, and anyone who wants to build without spending weeks learning a new framework.

In this guide, we'll use AI to help build a Mini App that also works as a standalone website. That means what you build can live on Base, show up in TBA, and still work on the open web.

## Vibe Coding Elements

Vibe coding is a powerful way to bring your idea to life especially for non-developers.

Below are the elements that you will need to consider when vibe coding a mini app.

<Steps>
  <Step title="Plan">
    Clarify the app's purpose, target audience, and core features. Decide on the minimum viable product (MVP) and ensure it's achievable within your available time and resources.
  </Step>

  <Step title="UX + Architecture">
    Map out the user journey, key screens, and interactions. Choose the tech
    stack, plan integrations (APIs, onchain features, etc.), and decide on the
    app's overall architecture.
  </Step>

  <Step title="Build the Core Features">
    Implement the primary functionality first, focusing on the MVP. Keep
    components modular for easier testing and iteration.
  </Step>

  <Step title="Test & Refine">
    Run functional, performance, and user tests to catch bugs and improve the
    experience. Incorporate feedback and make necessary adjustments.
  </Step>

  <Step title="Deploy & Share">
    Deploy to your hosting platform (e.g., Vercel, Fleek). Share the app with your intended audience, gather real-world feedback, and iterate as needed.
  </Step>
</Steps>