Bolt Integration

Build full-stack apps with Bolt and Backdrift.

Bolt by StackBlitz is an AI-powered development environment that can build and run code directly in the browser. Combined with Backdrift, you can create complete applications.

The Workflow

1. Build your backend with Backdrift
2. Export the Design Doc
3. Paste into Bolt with your requirements
4. Get a running application in the browser

Step-by-Step

1. Build Your Backend

Create and deploy your backend in Backdrift.

2. Get the Design Doc

From your project’s Artifacts tab:

• Click Design Doc
• Copy to clipboard

3. Open Bolt

Go to bolt.new and start a new project.

4. Paste and Prompt

I have a backend API deployed. Here's the documentation:

[DESIGN DOC CONTENT]

---

Build a React app that:
- Shows a login page
- After login, displays a dashboard with a list of tasks
- Allows creating, editing, and deleting tasks
- Uses Tailwind CSS for styling

5. Watch It Build

Bolt will:

• Create React components
• Set up API client with your URL
• Configure authentication
• Run the app in the browser

6. Iterate

"Add a sidebar with project navigation"
"Add drag-and-drop to reorder tasks"
"Add dark mode toggle"

Bolt Advantages

Instant Preview

See your app running immediately—no deployment needed.

Full IDE

Edit code directly in the browser with full IDE features.

Terminal Access

Run npm commands, install packages, run tests.

GitHub Sync

Push to GitHub when ready for production.

Example Prompt

[DESIGN DOC]

---

Build a project management app with:

1. Landing page with hero section and features list
2. Login/Signup with the auth endpoints documented above
3. Dashboard showing:
   - Sidebar with project list
   - Main area with task board (Kanban style)
   - Header with user menu and notifications

4. Project settings page where admins can:
   - Rename the project
   - Invite team members
   - Delete the project

Use React, Tailwind CSS, and shadcn/ui components.
Include loading states and error handling.

Working with the Generated Code

Bolt generates standard React code. You can:

Edit Directly

Click any file in the sidebar to edit. Changes are applied instantly.

Install Packages

# In Bolt's terminal
npm install @tanstack/react-query
npm install date-fns

Run Commands

npm run build
npm run test

Handling Authentication

Bolt can implement the full auth flow:

"Implement authentication:
- Login page with email and password
- Signup page with email, password, and name
- Store the JWT in localStorage
- Add an axios interceptor to attach the token
- Redirect to login if token is expired
- Show user email in the navbar with logout button"

Connecting to Your API

The Design Doc includes your API URL. Bolt will use it directly:

// Generated by Bolt
const API_URL = 'https://abc123.execute-api.us-east-2.amazonaws.com';

export async function fetchTasks() {
  const response = await fetch(`${API_URL}/v1/tasks`, {
    headers: {
      'Authorization': `Bearer ${getToken()}`
    }
  });
  return response.json();
}

Exporting Your App

When ready for production:

1. Click Export in Bolt
2. Choose GitHub repository
3. Push the code
4. Deploy to Vercel, Netlify, or Cloudflare Pages

Tips for Bolt

Start Simple

Begin with core features. Add complexity later.

Use React Query

Ask Bolt to use React Query for data fetching—it handles caching and refetching.

Request Error Handling

“Add proper error handling with toast notifications for API errors.”

Request Loading States

“Add skeleton loaders while data is fetching.”

v0 Integration

Generate UI components with v0.