Bolt.new Tutorial: Build Full-Stack Apps Without Coding

Bolt.new is one of the most exciting tools in the AI development space. It lets anyone — even people with zero coding experience — build complete, functional web applications by simply describing what they want in plain English. For Indian students, entrepreneurs, and non-technical professionals, it opens up the ability to create web apps without spending months learning to code.

What You'll Learn

• What Bolt.new is and how it works under the hood
• Creating your free Bolt.new account
• Building a complete todo app from a single prompt
• Building a professional landing page
• Adding a database to your application
• Deploying your app to the internet
• Tips for writing effective prompts

What Is Bolt.new?

Bolt.new is a browser-based AI tool built by StackBlitz that generates complete web applications from natural language descriptions. You type what you want, and Bolt.new:

1. Understands your requirements — Interprets your English description
2. Generates the code — Creates React/Next.js code with proper structure
3. Shows a live preview — You see the app running in your browser instantly
4. Lets you iterate — You can ask for changes in natural language
5. Deploys to the internet — One-click deployment to Netlify

Everything happens in your browser. No downloads, no installations, no terminal commands.

How It Works Technically

Bolt.new uses StackBlitz's WebContainer technology — a full Node.js environment running inside your browser. When you give a prompt, the AI:

• Generates a project with all necessary files
• Installs npm packages inside the browser
• Starts a dev server in the browser
• Shows you the running application in a preview pane

This is why Bolt.new feels so fast compared to traditional development — there is no server to configure, no build pipeline to set up, and no deployment complexity.

Getting Started

Create Your Account

1. Go to bolt.new
2. Click "Sign up"
3. Sign in with Google or GitHub (recommended for developers)
4. You start on the free tier immediately

Free Tier Limits

| Feature | Free | Pro ($20/month) | |---------|------|-----------------| | Daily tokens | Limited (~3-5 small projects) | 10M tokens/month | | AI model | Sonnet 3.5 | Claude Sonnet 4.6, GPT-4o | | Preview | Yes | Yes | | Deploy | Netlify (free) | Netlify (free) | | Download code | Yes | Yes | | Priority | Queue-based | Immediate |

The free tier is sufficient for learning and building small projects. Indian students on a budget can accomplish quite a bit before needing to upgrade.

Project 1: Build a Todo App

Let us start with a classic project — a todo application. This demonstrates Bolt.new's core workflow.

Step 1: Write Your Prompt

Go to bolt.new and type in the prompt box:

Build a modern todo app with the following features:

1. Add new tasks with a text input and "Add" button
2. Mark tasks as complete (strikethrough)
3. Delete tasks with a trash icon
4. Filter: All, Active, Completed
5. Show count of remaining tasks
6. Store tasks in localStorage so they persist on refresh
7. Clean, modern UI with a gradient background
8. Responsive design that works on mobile

Use React with TypeScript and Tailwind CSS.

Step 2: Watch It Generate

Click the arrow button or press Enter. Bolt.new starts generating:

• You see files being created in the left panel: App.tsx, components/TodoItem.tsx, types.ts, etc.
• The terminal in the bottom panel shows npm packages being installed
• After 30-60 seconds, a live preview appears on the right

Step 3: Interact with the Preview

The preview pane shows your running todo app. Try it out:

• Add a few tasks
• Mark some as complete
• Filter between All, Active, Completed
• Refresh the page — tasks persist because of localStorage

Step 4: Iterate with Follow-Up Prompts

If something is not quite right, describe the change:

Make the gradient background use saffron (#FF9933) to green (#138808)
for an Indian tricolor theme. Also add a dark mode toggle in the top right corner.

Bolt.new modifies the existing code — it does not start over. The preview updates automatically.

Step 5: Deploy

Click the "Deploy" button in the top-right corner:

1. Select Netlify as the deployment target
2. Authorize Bolt.new to access your Netlify account (free)
3. Click Deploy — your app is live on the internet in under a minute
4. You get a URL like https://your-todo-app.netlify.app

Share this URL with anyone — it works on any device with a browser.

Project 2: Build a Professional Landing Page

Landing pages are one of Bolt.new's strongest use cases. Here is how to build one for a fictional Indian startup.

The Prompt

Create a professional landing page for "ChaiCode" — an online coding
bootcamp for Indian students. Include:

1. Hero section with headline "Learn to Code Over Chai" with a CTA button
2. Features section: 3 cards showing "Live Classes", "Hindi + English",
   "Placement Support"
3. Pricing section: 3 plans (Free, Pro ₹4,999/year, Enterprise) displayed
   as cards with feature lists
4. Testimonials: 3 student reviews with names, photos (use placeholder
   images), and star ratings
5. FAQ section with 5 common questions using an accordion
6. Footer with social links and copyright

Design: Modern, clean, use saffron (#FF9933) as the primary color,
dark navy (#000080) background for the hero. Include smooth scroll
navigation. Make it fully responsive.

Bolt.new generates a complete, professional landing page in under two minutes. The result includes:

• Smooth scrolling navigation
• Responsive design that works on mobile
• Interactive FAQ accordion
• Properly formatted Indian pricing in Rupees
• Clean component structure

Customizing the Landing Page

Follow up with specific changes:

Change the hero section to have an animated gradient background.
Add a "Join 10,000+ Indian Students" social proof line below the CTA.
Make the testimonial cards slide in with a fade animation.

Each change is applied incrementally. You can see the before and after in real-time.

Project 3: Build an App with a Database

For more complex applications, Bolt.new can connect to cloud databases.

Prompt for a Notes App with Supabase

Build a personal notes app with user authentication and a cloud database.

Requirements:
- Login/register with email and password (use Supabase Auth)
- Create, edit, and delete notes
- Each note has a title, content (rich text), and tags
- Search notes by title or content
- Sort by date created or date modified
- Clean, minimal UI similar to Notion

Use React, TypeScript, Tailwind CSS, and Supabase for backend.
Set up the Supabase schema and Row Level Security policies.

Bolt.new generates:

• A complete React app with authentication screens
• Supabase client configuration
• Database schema with the notes table
• Row Level Security (RLS) policies so users can only see their own notes
• CRUD operations with real-time updates

You need to create a free Supabase project and add your API keys to make this work with a real database. Bolt.new generates instructions for this.

Tips for Writing Effective Prompts

The quality of your prompt directly determines the quality of the output.

Be Specific About UI

# Bad:
Build a dashboard

# Good:
Build a dashboard with a sidebar navigation on the left (250px wide,
dark background), a top bar with search and user avatar, and a main
content area with 4 stat cards (Users, Revenue in ₹, Orders, Growth %)
at the top, followed by a line chart showing monthly revenue and a
table of recent orders.

Mention the Tech Stack

Use React with TypeScript, Tailwind CSS, and Recharts for the chart.
Use Lucide icons for all icons.

Describe Interactions

When the user clicks a stat card, show a modal with detailed breakdown.
The sidebar should collapse to icons only on screens smaller than 768px.
The table should be sortable by clicking column headers.

Include Indian-Specific Details

- Format all currency as ₹ with Indian number system (₹1,23,456)
- Date format: DD/MM/YYYY
- Phone number validation: Indian 10-digit format starting with 6-9
- Include Hindi translations where appropriate

Bolt.new vs Other No-Code AI Tools

| Feature | Bolt.new | Lovable.dev | v0.dev | |---------|----------|-------------|--------| | Full app generation | Yes | Yes | UI only | | Database integration | Supabase, Firebase | Supabase (built-in) | No | | Authentication | Via Supabase | Built-in | No | | Code download | Yes | Yes | Yes | | Deployment | Netlify | Built-in | Manual | | Free tier | Limited daily | 5 projects | 10 generations/day | | Best for | Quick prototypes | SaaS apps | UI components |

For more on Lovable.dev, see our Lovable.dev tutorial. For v0.dev, check out our v0.dev guide.

Common Issues and Solutions

"Token limit reached"

You have used your daily free tokens. Options:

• Wait until tomorrow (resets daily)
• Upgrade to Pro ($20/month ~1,680 INR)
• Use the code you have already generated and modify it locally

Generated app has bugs

This is normal. AI-generated code sometimes has issues. Try:

The login button doesn't work. When I click it, nothing happens.
Fix the onClick handler and make sure it calls the authentication function.

Be specific about the bug and what you expected to happen.

Preview is blank

Sometimes the WebContainer needs a restart. Click the "Restart" button next to the preview, or try refreshing your browser.

Slow generation

Bolt.new can be slow during peak hours (US business hours). Indian developers often get faster responses during IST morning hours (6 AM - 12 PM) when US users are sleeping.

Downloading and Running Locally

You can download any Bolt.new project and continue development locally:

1. Click the "Download" button (or use the file explorer to download all files)
2. Extract the zip file
3. Open in VS Code or Cursor
4. Run:

npm install
npm run dev

The project runs locally on http://localhost:5173 (Vite) or http://localhost:3000 (Next.js).

This is particularly useful if you want to:

• Add features that exceed the free token limit
• Integrate with services that need local testing
• Submit the project as a college assignment
• Continue development in Cursor with more advanced AI features

Where to Go Next

• Lovable.dev tutorial — build SaaS apps — For more complex applications
• v0.dev tutorial — AI UI generation — For component-level design
• What is vibe coding? — The movement behind tools like Bolt.new
• Replit Agent tutorial — Another browser-based AI builder

Bolt.new has made web development accessible to everyone. Whether you are a student building a college project, an entrepreneur prototyping a startup idea, or a non-technical professional who needs a simple web tool, Bolt.new lets you go from idea to deployed application in minutes. Start with the free tier, learn how to write effective prompts, and you will be amazed at what you can build without writing a single line of code.