Bolt.new Tutorial: Build Full-Stack Apps in Minutes (2026 Guide)

What if you could describe an app in plain English and have it running in under a minute? That’s the promise of Bolt.new, and remarkably, it delivers.

I’ve built dozens of prototypes with Bolt.new over the past few months—landing pages, dashboards, CRUD apps, even a simple e-commerce storefront. The speed is genuinely transformative. What used to take a weekend now takes an afternoon, and what took an afternoon now takes minutes.

In this comprehensive tutorial, I’ll show you exactly how to use Bolt.new to build full-stack applications, share the prompting strategies that get the best results, and explain when this tool is (and isn’t) the right choice.

What Is Bolt.new?

Bolt.new is a browser-based AI tool that generates complete, working web applications from natural language descriptions. It’s built by StackBlitz, the company behind WebContainers—technology that runs Node.js entirely in your browser.

Here’s what makes Bolt.new remarkable:

Full-stack generation: Creates both frontend and backend code
Instant preview: Your app runs immediately in the browser
One-click deployment: Ship to production without additional setup
Integration ready: Pre-built connections to Supabase, Stripe, and auth providers
Iterative refinement: Keep chatting to modify and improve

Unlike tools that just generate code snippets, Bolt.new creates complete, deployable applications. Describe what you want, and you get a working product.

How Bolt.new Works

The magic behind Bolt.new is StackBlitz WebContainers—a technology that runs a full Node.js environment inside your browser. This means:

No local setup required: Everything runs in the browser
Instant startup: No waiting for servers or containers
Real execution: Your app actually runs, not just renders
Full npm access: Install and use real packages

When you describe an app, Bolt.new’s AI:

Generates the complete project structure
Creates all necessary files (components, API routes, styles)
Installs dependencies
Starts the development server
Gives you a working preview

The entire process typically takes 30-60 seconds.

Getting Started with Bolt.new

Let’s build your first app.

Step 1: Access Bolt.new

Open your browser and navigate to bolt.new
You’ll see a chat interface with a text input
No account is required to start (though you’ll want one for saving projects)

Step 2: Describe Your App

In the text input, describe what you want to build. Be specific but conversational.

Example prompt:

“Build me a personal finance tracker. I want to add income and expenses with categories, see a dashboard showing my balance and spending by category, and have a simple chart showing spending trends over time.”

Step 3: Watch the Magic

After hitting enter, Bolt.new will:

Show you its thinking process
Generate files in real-time
Install dependencies
Start the preview server

Within about a minute, you’ll see a working preview of your app on the right side of the screen.

Step 4: Iterate and Refine

The first generation won’t be perfect. Continue the conversation:

“Great! Can you add a dark mode toggle? And make the expense form slide in from the right instead of appearing in a modal.”

Bolt.new will modify the existing code to match your requests.

Step 5: Deploy or Export

Once satisfied:

Deploy: Click the deploy button to ship to Netlify or Vercel
Export: Download the code to continue locally
Share: Get a shareable link to your running app

Crafting Effective Prompts

Your results depend heavily on how you communicate with Bolt.new. Here’s what I’ve learned:

Be Specific About Features

Less effective:

“Build me a todo app”

More effective:

“Build a todo app with the following features:

Add tasks with a title and due date

Mark tasks as complete

Filter by: all, active, completed

Sort by due date or creation date

Store data in localStorage

Clean, minimal design with a dark mode”

Describe the Visual Style

Bolt.new makes design choices, but you can guide them:

“Use a modern, minimalist design with:

A dark theme with purple accent colors

Rounded corners on cards

Subtle shadows for depth

Inter font from Google Fonts

Smooth animations for interactions”

Mention Technologies If You Care

If you have preferences, state them:

“Build this with React, TypeScript, and Tailwind CSS. Use Zustand for state management.”

If you don’t specify, Bolt.new chooses sensible defaults (usually React + Tailwind).

Start Simple, Then Add Complexity

Don’t try to describe everything in one prompt. Build iteratively:

First prompt: Core functionality
Second prompt: Additional features
Third prompt: Polish and styling
Fourth prompt: Edge cases and error handling

This approach produces better results than one giant initial prompt.

Building a Complete App: Step-by-Step Example

Let me walk you through building a real application from start to finish.

Project: Customer Feedback Board

We’ll build a feedback board where users can submit suggestions, vote on them, and see a sorted list of popular ideas.

Initial prompt:

“Build a customer feedback board with these features:

Submit feedback with a title and description

Upvote and downvote feedback items

Sort by: most votes, newest, oldest

Filter by status: open, in progress, done

Clean, modern design with a sidebar for filters”

Bolt.new generates:

A React application with TypeScript
Components for the feedback list, submission form, and filters
Local state management for votes
Responsive layout with sidebar

Time: ~45 seconds

Iteration 1: Add Categories

“Add categories for feedback: Bug, Feature Request, Enhancement, Question. Users should select a category when submitting, and we should be able to filter by category.”

Bolt.new updates the form with a category selector and adds category filtering to the sidebar.

Iteration 2: Improve the Design

“Make it look more polished. Use a gradient header, add smooth hover effects on cards, and use subtle animations when votes change.”

The design transforms from functional to professional.

Iteration 3: Add Persistence

“Connect this to Supabase so the feedback persists. Create the necessary tables and authentication.”

Bolt.new:

Creates Supabase connection code
Generates SQL for the feedback table
Adds login/logout functionality
Connects the UI to the database

Iteration 4: Final Polish

“Add a search bar to filter feedback by title or description. Also add a loading skeleton when data is being fetched.”

The app now has search functionality and proper loading states.

Total time: About 15 minutes of iteration, resulting in a production-ready feedback board.

Integrations: Supercharging Your Apps

Bolt.new has pre-built integrations that add powerful capabilities quickly.

Supabase Integration

Supabase provides backend-as-a-service with PostgreSQL, authentication, and real-time subscriptions.

How to add Supabase:

“Add Supabase integration. Store [data type] in the database and add user authentication.”

Bolt.new will:

Add Supabase client library
Generate database schema SQL
Create auth components (login, signup, logout)
Connect your UI to the database

Example:

“Store the todos in Supabase instead of localStorage. Add Google authentication.”

Stripe Integration

For payments and subscriptions:

“Add Stripe checkout for a one-time purchase of $29. Show a ‘Buy Now’ button that redirects to Stripe.”

Bolt.new sets up:

Stripe checkout session creation
Webhook handling
Payment success/failure flows

Note: You’ll need to add your Stripe API keys after generation.

Authentication Providers

Beyond Supabase auth:

“Add authentication with GitHub OAuth. Only authenticated users should be able to submit feedback.”

Deployment Options

Getting your app live is simple.

Netlify (One-Click)

Click the “Deploy” button in Bolt.new
Connect your Netlify account
App deploys automatically

Your app gets a Netlify URL and deploys on future updates.

Vercel

Export your project as a zip
Create a new project in Vercel
Upload the exported code or connect a Git repo

Custom Hosting

Export the project
Extract locally
Run npm install and npm run build
Deploy the dist folder to any static hosting

Limitations: When to Use Something Else

Bolt.new is powerful, but it’s not the right tool for everything. Here’s when to consider alternatives:

Complex Business Logic

For applications with intricate rules, calculations, or domain-specific logic, the AI may struggle. Consider:

Alternative: Cursor for more controlled development
When: Your app has complex algorithms or unusual requirements

Large-Scale Applications

Bolt.new shines for MVPs and small-to-medium apps. For large applications:

State management becomes harder to control
AI-generated architecture may not scale well
Alternative: Traditional development with AI assistance

Existing Codebases

Bolt.new creates new projects. For adding features to existing apps:

Alternative: Cursor or GitHub Copilot

Precise Control

Sometimes you need exact control over every detail:

Performance optimization
Specific library versions
Complex build configurations
Alternative: Local development with AI assistance

My Rule of Thumb

Use Bolt.new when:

You need a working prototype fast
The app is self-contained and relatively simple
You’re validating an idea before investing in full development
You need to demonstrate a concept to stakeholders

Use alternatives when:

You’re building something that needs to scale
The requirements are very specific or complex
You’re adding to an existing codebase
You need fine-grained control

Tips and Best Practices

After dozens of Bolt.new projects, here’s my collected wisdom:

1. Save Your Prompts

When you find a prompt structure that works well, save it. Building a library of effective prompts accelerates future projects.

2. Export and Continue Locally

Bolt.new is great for initial generation, but for prolonged development:

Generate the foundation in Bolt.new
Export the project
Continue in Cursor or VS Code for detailed work

This combines Bolt.new’s speed with traditional development control.

3. Review Generated Code

Always look through the generated code before proceeding:

Check for security issues (especially with auth)
Verify logic is correct
Look for patterns you want to change early

4. Use Descriptive Error Reports

When something’s wrong:

Less effective:

“This doesn’t work”

More effective:

“When I click the submit button, nothing happens. I expected a new item to appear in the list. The console shows ‘TypeError: Cannot read property map of undefined’.“

5. Break Down Complex Features

Instead of:

“Add e-commerce with cart, checkout, Stripe payments, order history, and email notifications”

Try sequential requests:

“Add a shopping cart that stores selected products”
“Add a checkout page showing cart contents and total”
“Integrate Stripe for payments”
“Add order history for logged-in users”
“Send email confirmation after purchase”

Pricing and Plans

Bolt.new offers several tiers:

Free Tier

Limited generations per month
Public projects only
Basic features

Pro (~$20/month)

More generations
Private projects
Priority generation speed
Advanced integrations

Team Plans

Collaboration features
Shared projects
Centralized billing

For casual use, the free tier is sufficient. Pro pays for itself quickly if you’re building regularly.

Frequently Asked Questions

Is Bolt.new free to use?

Yes, there’s a free tier with limited generations per month. For regular use, the Pro plan provides more capacity.

Can I use my own API keys?

Yes. For integrations like Supabase or Stripe, you add your own API keys after generation.

What happens to my code?

You own everything generated. Export any time to continue development locally or on other platforms.

Does Bolt.new support backends?

Yes. Bolt.new can generate API routes and server-side logic that run in the browser environment. For production, you’d typically deploy these to serverless platforms.

Can I use a custom domain?

When deploying to Netlify or Vercel, yes. Configure custom domains through their platforms.

How does Bolt.new compare to Cursor?

Different use cases:

Bolt.new: Rapid prototyping, MVPs, complete apps from scratch
Cursor: Professional development, existing codebases, precise control

Many developers use both—Bolt.new for initial prototypes, then export to continue in Cursor.

What languages and frameworks does Bolt.new support?

Primarily focused on:

React (default)
TypeScript/JavaScript
Tailwind CSS
Next.js (for some templates)

Conclusion

Bolt.new represents a new paradigm in application development. The ability to go from idea to deployed application in minutes isn’t just faster—it changes what’s worth building.

Ideas you might have dismissed as “too small to bother implementing” suddenly become worth exploring. Prototypes you’d have mocked up in Figma now become working applications. The gap between imagination and reality shrinks dramatically.

To get started:

Visit bolt.new
Describe a simple app you’ve been meaning to build
Watch it come to life
Iterate until it’s what you envisioned
Deploy and share

For more vibe coding tools and tutorials, check out our complete tools comparison and our guide to what vibe coding is.

The future of development isn’t about typing more code—it’s about describing better ideas. Bolt.new makes that future accessible today.

Last updated: January 2026