How to Build a Full-Stack App with Bolt.new? Complete 2026 Tutorial

TL;DR

Bolt.new by StackBlitz lets you build full-stack web applications directly in your browser — no local setup, no dependency hell, no deployment configuration. You describe what you want in plain English, and Bolt generates a complete React/Next.js application with a real database, authentication, and one-click deployment. This tutorial walks you through building a working app from scratch: prompt crafting, Supabase integration, authentication, and deployment. By the end, you will have a live full-stack app at a public URL, built entirely in your browser.

Prerequisites

• A modern browser (Chrome, Edge, or Firefox recommended)
• A Bolt.new account (free tier works for this tutorial; sign up at bolt.new)
• A Supabase account (free tier; sign up at supabase.com) — required for database and authentication
• Basic understanding of what a web app is (frontend, backend, database) — no coding knowledge required

Step 1: Create a Bolt.new Account and Start a Project

Go to bolt.new and sign up with GitHub, Google, or email. Once logged in, you land on the dashboard.

Click the "New Project" button. You will see a prompt input — this is where you describe your app. For this tutorial, we will build a Personal Task Tracker: a simple app where users can sign up, create tasks, mark them as done, and filter by status.

The prompt input is the most important part of Bolt.new. The quality of your prompt directly determines the quality of the generated app.

Step 2: Write an Effective First Prompt

Bolt.new works best when you give it structured, detailed prompts. A vague prompt like "build a task app" produces a generic result. A structured prompt produces a production-ready app.

Bad prompt:

Good prompt:

Build a personal task tracker web app with the following features:

1. User authentication (sign up / login / logout) using Supabase Auth
2. A dashboard showing tasks in a table with columns: Task Name, Status, Priority, Created Date
3. Users can create new tasks with: title, description, priority (Low/Medium/High), due date
4. Users can edit tasks, mark them as complete, or delete them
5. Filter tasks by status (All / Active / Completed)
6. Dark mode UI with a clean, modern design (Tailwind CSS)
7. Responsive layout that works on mobile and desktop

Use Next.js 14 with App Router, Supabase for backend, and Tailwind CSS for styling.

Prompting tips that consistently produce better results:

• List features as bullet points — Bolt's AI parses structured lists better than paragraphs
• Specify the tech stack — if you want Next.js, React, or Vue, say it explicitly
• Describe the UI style — "modern dark theme," "minimalist white," "dashboard layout"
• Mention edge cases — "show empty state when no tasks exist," "confirm before deleting"
• Include data relationships — "each task belongs to one user, users can only see their own tasks"

Paste the good prompt into the input and hit Enter. Bolt will start generating your app. You will see it scaffold the project structure, install dependencies via WebContainers (StackBlitz's in-browser Node.js runtime), write component files, and render a live preview — all within 60-120 seconds.

Step 3: Connect Supabase for Database and Authentication

Your app has a UI at this point, but no backend. Data created in the preview disappears on refresh. To persist data and add user authentication, you need to connect Supabase.

3a. Create a Supabase project:

Go to supabase.com, sign in, and click "New project". Give it a name (e.g., "task-tracker"), set a secure database password, and choose the region closest to your users. Wait 1-2 minutes for the database to provision.

3b. Get your Supabase credentials:

In your Supabase project dashboard, go to Settings → API. You need two values:

• Project URL (looks like https://xxxxxxxxxxxx.supabase.co)
• anon public key (starts with eyJ...)

3c. Connect Supabase to Bolt.new:

In Bolt.new, click the gear icon (⚙️) in the top center of the screen, then click Supabase under Integrations. Click "Connect" and authorize Bolt to access your Supabase account. Select the project you just created.

Now tell Bolt to integrate Supabase. In the chat panel, type:

Connect this app to Supabase. Use the project URL and anon key I just linked.

1. Create a "tasks" table with columns: id (uuid, primary key), user_id (uuid, foreign key to auth.users), title (text), description (text), priority (text, enum: Low/Medium/High), status (text, enum: Active/Completed), due_date (timestamptz), created_at (timestamptz, default now())
2. Enable Row Level Security (RLS) on the tasks table
3. Create RLS policies: users can only CRUD their own tasks
4. Set up Supabase Auth with email/password sign-up and login
5. Update all frontend components to use real Supabase data instead of mock data

Bolt will generate SQL migrations, create the Supabase client configuration, and update your React components to fetch real data. The preview will refresh automatically.

⚠️ Common Supabase integration pitfall: If Bolt says "connection failed" or the app shows a blank screen after connecting, the most likely cause is that Supabase didn't receive the schema. Ask Bolt explicitly: "Run the SQL migration in the Supabase SQL Editor to create the tasks table." Bolt can output the raw SQL, which you can paste into Supabase SQL Editor manually as a fallback.

Step 4: Test Authentication and CRUD Operations

Once Supabase is connected, test your app manually. In the Bolt preview panel:

1. Click Sign Up and create a test account with a real email (Supabase sends a confirmation email; you can disable email confirmation in Supabase Auth settings for testing)
2. Create a few tasks with different priorities
3. Mark one as complete, edit another, delete one
4. Log out and log back in — confirm your data persists
5. Try filtering by "Active" and "Completed"

If anything breaks, tell Bolt in the chat: "When I click Sign Up, nothing happens — check the auth flow." Bolt will read your code, identify the bug, and fix it.

Step 5: Deploy Your App

Bolt.new supports one-click deployment. Click the "Deploy" button in the top-right corner of the editor.

Bolt deploys to StackBlitz's hosting infrastructure. The first deployment takes 1-3 minutes. Once complete, you get a public URL like https://task-tracker-abc123.bolt.new.

Before deploying, check these things:

• All Supabase environment variables are set (Bolt handles this automatically if you connected Supabase through the integration panel)
• Test auth flow end-to-end in the preview
• Check mobile responsiveness by resizing the preview panel
• Remove any mock data or test code

Post-deployment tips:

• Set up a custom domain in project settings if you want a professional URL
• Enable Supabase's production settings (disable email confirmation auto-confirm, set up rate limiting)
• Monitor your Supabase usage — the free tier includes 500MB database and 50,000 monthly active users

Step 6: Iterate with Bolt's Chat

Your app is live, but you will want to improve it. Bolt's chat panel is where you iterate. Here are useful follow-up prompts:

Add features:

Fix bugs:

Improve UI:

Add polish:

The key to effective iteration: one feature at a time. If you ask for five changes in one prompt and one breaks, Bolt has to untangle all five. Small, focused prompts produce more reliable results.

Troubleshooting

Blank preview / white screen

• Check the browser console (right-click → Inspect → Console). Look for JavaScript errors.
• Tell Bolt: "The preview is blank. Check for rendering errors and fix them."
• Most common cause: Supabase client is not initialized or environment variables are missing.

Deploy failed" error

• Check that all Supabase environment variables are set in Bolt's project settings.
• Try deploying again — transient build failures happen.
• If persistent, ask Bolt: "Check the deployment build logs and fix the error."

Authentication not working

• Confirm Supabase project URL and anon key are correct.
• Check that the Auth provider (email/password) is enabled in Supabase → Authentication → Providers.
• Disable "Confirm email" in Supabase Auth settings for testing.

Token usage running out fast

• Bolt.new uses a token-based pricing model. Long, complex prompts consume more tokens.
• Use the free tier's daily token allowance strategically: plan your prompts before typing.
• Save complex multi-step instructions for a single detailed prompt rather than many small back-and-forth messages.

App works in preview but not after deploy

• Check Supabase RLS policies — preview uses the same anon key as production, but the deployed URL might have CORS issues.
• In Supabase → Authentication → URL Configuration, add your deployed Bolt URL to the allowed redirect URLs.
• Check that you ran the SQL migration on your production Supabase project (not a different one).

Out of memory" or WebContainer crash

• Large projects with many files can exceed browser memory limits.
• Refactor: ask Bolt to consolidate duplicate components.
• Open Bolt in a fresh browser tab with fewer extensions running.

Related Tutorials

• How to Use Windsurf AI Editor? Complete Beginner Guide 2026
• Cursor Rules: Complete .cursorrules Guide for AI Coding 2026
• OpenAI Codex CLI: Terminal-First AI Coding Tutorial