Bolt.new + v0.dev — Build Apps Fast

Two tools have changed how people build web applications: Bolt.new (for full-stack apps) and v0.dev (for UI components). Between them, you can go from idea to working application in under an hour — without knowing all the code involved. Both have generous free tiers. This guide walks you through your first project on each.

What You'll Learn

• What Bolt.new and v0.dev do and when to use each
• Your first Bolt.new project: a working todo app
• How v0.dev generates React components
• Free tier limits and what happens when you hit them
• How to deploy your Bolt.new app

Bolt.new — Full-Stack Apps from Text

Bolt.new (by StackBlitz) generates complete full-stack web applications from a text description. It runs in your browser — no local setup needed. The output is real code you can download, modify, and deploy.

What it generates:

• Frontend (React, Next.js, Vue, Svelte — your choice)
• Backend logic (Node.js, API routes)
• Database schemas
• Authentication flows
• Complete file structure with all dependencies configured

Free tier: 1,000,000 tokens per month, 300,000 tokens daily limit. A typical app build uses 20,000–100,000 tokens. Most users comfortably build 5-10 apps per month on the free tier.

First Bolt.new Project — A Working Todo App

Let us walk through building something real.

1. Go to bolt.new

2. Type your prompt in the text box:

   Build a todo app with React and Tailwind CSS. Features:
   - Add tasks with a text input
   - Mark tasks as complete (strikethrough)
   - Delete tasks
   - Filter by All/Active/Completed
   - Persist tasks in localStorage
   Clean, minimal UI with a dark theme.
   

3. Click the arrow to generate. Bolt.new starts building immediately. You will see it:

   • Create the file structure
   • Write each component
   • Configure the styling
   • Set up state management

4. Preview your app. A live preview appears on the right side of the screen as soon as generation completes. You can interact with it immediately.

5. Iterate with natural language. If something is not right, type in the chat: "Make the completed tasks show in a lighter grey instead of strikethrough" or "Add a character counter to the input field." Bolt.new makes the changes while keeping everything else intact.

6. Download or deploy:

   • Download code: Click the download icon to get a zip file of the full project
   • Deploy to Netlify: Connect your Netlify account and deploy with one click directly from Bolt.new
   • Open in StackBlitz: Continue editing in the full StackBlitz environment

🇮🇳 India Note: Bolt.new is popular with Indian startup founders building MVPs. Several products on ProductHunt India were initially built with Bolt.new to validate ideas before hiring developers. It is an excellent tool for founders who understand the product but not the code.

Tips for Better Bolt.new Results

Be specific about your stack. "React + Next.js 15 + Tailwind + TypeScript" produces much better output than just "a web app."

Describe the UI. Mention colors, layout, and style. "Card-based layout with saffron accent colors and a dark background" gives Bolt.new visual direction.

Build iteratively. Start with the core feature, get it working, then add complexity. "Add user authentication" is easier to implement after the basic app is working.

Download before your monthly limit resets. Keep copies of your generated projects — if you need to regenerate something, it costs tokens.

💰 Free Deal: Bolt.new Pro is $25/month (approximately ₹2,080/month). The free tier is generous enough to build and ship an MVP. Upgrade only if you are building multiple production apps per month.

v0.dev — UI Components from Description

v0.dev (by Vercel) specializes in generating polished React UI components. It is not for full apps — it is for individual components: forms, dashboards, nav bars, hero sections, data tables.

What it does:

• Generates React components using Tailwind CSS and shadcn/ui
• Shows multiple design variants (you pick which to use)
• Produces copy-paste-ready code
• Iterates based on your feedback

Free tier: v0.dev has a credits system. New accounts get enough free credits to generate 20-30 components. After that, Vercel Pro ($20/month) is needed for more.

First v0.dev Project — A Dashboard Card

1. Go to v0.dev

2. Sign in with GitHub (required, free)

3. Type a component description:

   A user statistics card for an analytics dashboard.
   Shows: total users, growth percentage (with up/down arrow),
   a small sparkline chart, and a "View Details" button.
   Use a dark card with subtle border, clean typography.
   Tailwind CSS.
   

4. v0 generates 3 variants. Review each one in the preview.

5. Select the one you prefer and click View Code. You get the full React + Tailwind component code.

6. Copy to your project. The code works with any React project that has Tailwind CSS set up. If you use shadcn/ui, components are already compatible.

7. Iterate: Click Edit and type changes: "Make the percentage text green when positive, red when negative." v0 updates the component.

When to Use Bolt.new vs v0.dev

| Use Case | Recommended Tool | |----------|-----------------| | Building a complete new app | Bolt.new | | Creating a single UI component | v0.dev | | Rapid MVP for a startup idea | Bolt.new | | Designing a landing page section | v0.dev | | Full-stack app with database | Bolt.new | | Adding a new UI element to existing project | v0.dev | | Prototyping app flow | Bolt.new | | Building a reusable component library | v0.dev |

Official Resources

• Bolt.new — Build full-stack apps from prompts
• v0.dev — Generate React UI components
• StackBlitz — Full environment behind Bolt.new
• Netlify — Free hosting for Bolt.new apps
• shadcn/ui — Component library v0 uses as its base