Build a Web App with Bolt.new
Full web app from a prompt — step-by-step
Three years ago, building a web app required weeks of work — setting up a development environment, writing frontend and backend code, configuring databases, and deploying to a server. In 2026, Bolt.new has changed this completely. You describe what you want in plain English, and Bolt builds it for you in your browser — no installation, no configuration, no command line.
This guide walks you through building and deploying your first real web app using Bolt.new, completely free.
What You'll Learn
- What Bolt.new is and how it works
- How to navigate the Bolt.new interface
- Building your first app step-by-step (a task manager)
- How to iterate and improve your app with prompts
- Deploying your app live on the internet for free
- When to use Bolt vs other tools
What Is Bolt.new?
Bolt.new is an AI-powered browser-based development environment by StackBlitz that turns plain English descriptions into working full-stack web applications — deployed in your browser with no local setup required.
Under the hood, Bolt uses Claude and other models to generate code. The generated apps are real code — React frontends, Node.js backends, SQLite databases — not just mockups. You can download the code at any time.
Free tier: 1 million tokens per month. A typical app conversation uses 5,000-50,000 tokens. This means you can build 20-200 apps per month on the free plan.
Paid plan: $25/month (≈₹2,075) gives 10 million tokens and removes limits on certain features.
Free Deal: The 1M token/month free tier is genuinely generous. For most users learning to build with AI, the free tier will last the entire month without running out.
Why It Matters in India
India has a massive startup ecosystem but a developer shortage — senior developers charge ₹60,000-₹1,50,000/month and freelance MVP builds can cost ₹50,000-₹2,00,000+.
Bolt.new changes this economics fundamentally:
- Zero development cost for MVPs: Validate your idea before spending on a developer
- Speed: Go from idea to live URL in under 30 minutes
- Iterate freely: Prompt-based changes cost nothing vs ₹2,000-₹5,000 per developer hour
- Own your code: Download and hand off to a developer when you need custom features
Real India use cases: A Bengaluru entrepreneur used Bolt.new to build a restaurant menu management tool, showed it to 10 restaurateurs, got 3 paid customers, and only then invested in proper development. Total validation cost: ₹0.
Your First App — A Task Manager
Let us build a practical task manager app together. This demonstrates the full Bolt workflow.
Step 1: Open Bolt.new
Go to bolt.new in your browser. No sign-up is required to try it, but creating a free account lets you save projects and increases your monthly token limit.
Step 2: Write Your First Prompt
In the chat box at the bottom of the screen, type:
Build a task manager app with these features:
- Add tasks with a title and priority (high/medium/low)
- Mark tasks as complete
- Delete tasks
- Filter tasks by priority
- Clean, modern design with a dark theme
- All data saves in the browser (localStorage)
Press Enter and watch Bolt generate your app live. This takes 30-60 seconds.
Step 3: Review and Test
Bolt shows you a live preview of the running app on the right side of the screen. Try it — add a task, mark it complete, delete one. Does it work as expected?
If something looks wrong, do not edit the code manually (unless you know how). Instead, describe the problem in the chat:
The priority colors are hard to read. Use these colors:
- High priority: red (#ef4444)
- Medium priority: orange (#f97316)
- Low priority: green (#22c55e)
Step 4: Add More Features
Bolt remembers the entire conversation context. You can keep adding features:
Add a "due date" field to each task and show overdue tasks in a separate section at the top with a red border.
Each prompt refines the app further. This iterative approach — start simple, add one feature at a time — produces the best results.
Step 5: Deploy Your App
When you are happy with the app, click the Deploy button (cloud icon) at the top right. Bolt will:
- Build a production version of your app
- Deploy it to a free netlify.app subdomain (e.g., my-task-app.netlify.app)
- Give you a shareable link
Your app is now live on the internet and you can share the link with anyone.
India Note: Bolt.new works well on Indian internet connections including Jio 4G. The preview runs in your browser so you do not need fast speeds — just a stable connection. If you are in an area with slow internet, wait for the initial code generation to complete before interacting with the preview.
What Kinds of Apps Can You Build?
Bolt works well for:
Web apps: Dashboards, calculators, form tools, inventory trackers, quiz apps, portfolio websites
Productivity tools: Budget trackers, habit trackers, note-taking apps, project managers
Small business tools: Client invoicing, appointment booking, product catalogs, simple CRMs
Student projects: Data visualization tools, study flashcards, grade calculators, timetable apps
India-specific ideas: GST calculator, EMI calculator, Indian festival countdown, Diwali sales tracker, JEE mock test app
Bolt is not ideal for apps that need real user accounts with security, payment processing, or heavy database operations — for those, you need a more robust setup.
Bolt.new vs Other AI App Builders
| Tool | Best For | Free Tier | Deployment | India Access | |------|----------|-----------|------------|--------------| | Bolt.new | Full-stack apps | 1M tokens/mo | One-click Netlify | Full access | | v0.dev | React UI components | Limited credits | Copy code to project | Full access | | Lovable.dev | SaaS apps with auth | Limited | Auto-deploy | Full access | | Replit | Learning to code | Always-on free | Replit hosting | Full access | | Cursor | Existing codebases | Free tier | Manual | Full access |
Use Bolt when you want a complete, deployed app quickly. Use v0 when you need a specific UI component for an existing project. Use Cursor when you have existing code and need an AI coding assistant.
Tips for Better Results
Start simple, add complexity gradually. Do not describe your entire app in one mega-prompt. Start with the core feature, get it working, then add features one by one.
Be specific about design. "A modern clean design" is vague. "Use a white background, black text, Inter font, and blue (#3b82f6) for buttons" gets much better results.
Use the screenshot feature. If you see something in another app you like, take a screenshot and upload it to Bolt with "Make my app look like this."
Download your code. Click the download icon to get the full source code. You can then take this code to a developer if you need custom features that Bolt cannot handle.
Indian-language support: Prompt Bolt to "Support Hindi text input and display throughout the app" — the generated apps handle Devanagari script through standard HTML/CSS.
Frequently Asked Questions
Can I add UPI payment integration to a Bolt.new app? Bolt can generate the UI for payment flows, but connecting a real payment gateway like Razorpay requires adding your API keys and sometimes custom server-side logic. Use Bolt to build the UI and product flow, then have a developer add the payment backend.
What happens when I run out of free tokens? Bolt pauses code generation and prompts you to upgrade. Your existing app and code remain accessible. You can export the code and continue working in a local IDE without any token cost.
Can I connect a Bolt.new app to a real database? Yes. Bolt can generate apps that connect to Supabase (free tier, PostgreSQL), Firebase, or Airtable. Prompt Bolt: "Use Supabase for the database instead of localStorage" and it will rewrite the data layer.
Related Resources
- Generate UI with v0.dev — Generate React components for your Bolt.new projects
- Build a No-Code Chatbot — Add a chatbot to your Bolt.new app
- Sell Digital Products with AI — Monetize the tools you build with Bolt.new
Common Prompting Mistakes to Avoid
The mega-prompt trap: Describing a 20-feature app in one prompt results in an unstable, half-working mess. Start with 2-3 core features. Add more once those work.
Vague design instructions: "Make it look good" is not useful. Specify exact colors (hex codes), font names, spacing preferences, and reference apps you admire.
Skipping the download: Many users forget to download their code before the token limit resets. Always download the ZIP file and push to a GitHub repo after each working session.
Expecting database magic: Bolt generates excellent frontend UIs and API logic, but complex database migrations and data integrity constraints need a developer's attention for production use.
Not using version control: Download your code and push to a GitHub repo regularly. This creates a safety net and makes it easy to share with a developer later for feature additions.
Official Resources
- Bolt.new — Start building immediately, no sign-up needed
- Bolt.new Documentation — Official guides and tips
- StackBlitz — Updates and tutorials from the team behind Bolt
- Netlify — Where Bolt deploys your apps (free hosting)
- v0.dev — Vercel's complementary tool for UI generation
Community Questions
0No questions yet. Be the first to ask!