Step-by-Step: Build a Full-Stack App with Bolt.new in 30 Minutes

What You’ll Build

In this tutorial, you’ll build a Task Management App (like a mini Trello) with:

✅ User authentication (sign up / log in)
✅ Create, read, update, and delete tasks
✅ Drag-and-drop kanban board
✅ Database persistence (PostgreSQL)
✅ One-click deployment

Time required: 30 minutes Skill level: Beginner (no coding experience needed) Cost: Free (Bolt.new free tier)

What Is Bolt.new?

Bolt.new is an AI-powered web application builder by StackBlitz. Unlike traditional coding tools, Bolt.new lets you describe what you want in plain English — and it builds the entire application, including the database, backend, and frontend.

It works through WebContainers — a browser-based development environment that runs Node.js, npm, and databases directly in your browser. No local setup required.

Step 1: Create Your Bolt.new Account

Go to bolt.new
Click Sign Up (GitHub or Google account)
Once signed in, you’re on the New Project screen

Free tier: You get 10 prompts to start. This tutorial uses 3-4 prompts.

Step 2: Build the Core App (One Prompt)

This is the magic part. Type a single comprehensive prompt:

Prompt:

Build a task management app (like a mini Trello) with:

1. User authentication with email/password signup and login
2. A kanban board with three columns: "To Do", "In Progress", "Done"
3. Users can create, edit, and delete tasks
4. Tasks have title, description, priority (low/medium/high), and due date
5. Drag and drop tasks between columns to change status
6. Each user only sees their own tasks
7. PostgreSQL database for persistence
8. Clean, modern UI with a professional design

Use React for the frontend, Node.js/Express for the backend, and PostgreSQL for the database.

What happens next:

Bolt.new analyzes your prompt (~5 seconds)
It creates a project structure with frontend and backend folders
Installs dependencies (React, Express, Prisma ORM, authentication libraries)
Writes the database schema, API routes, and UI components
Sets up the database connection

⏱ Time elapsed: ~2 minutes

Step 3: Watch the Build Process

Bolt.new will show you its progress in real-time:

✓ Creating project structure...
✓ Installing dependencies (react, express, prisma, bcrypt, jsonwebtoken)...
✓ Setting up database schema (User, Task models)...
✓ Building authentication API (login/signup routes)...
✓ Creating kanban board components...
✓ Adding drag-and-drop functionality...
✓ Setting up task CRUD API...
✓ Connecting frontend to backend...
✓ Starting development server...

Once complete, you’ll see a preview of your running app in the browser panel.

Step 4: Test the App

Click Open Preview to see your running app
Sign up with a test email and password
Create a few test tasks in different columns
Try dragging tasks between columns
Edit and delete tasks

What you should see:

A login/signup page with a clean form
After login, a kanban board with three columns
A “Add Task” button that opens a form
Tasks displayed as cards in their columns
Drag-and-drop works between columns

Step 5: Refine with Follow-Up Prompts

Now you can iterate. Here are common refinements:

Refinement 1: Better UI

Improve the UI with:
- A sidebar showing task count per column
- Color-coded priority badges (red for high, yellow for medium, green for low)
- A search bar to filter tasks
- Smooth animations when dragging tasks

Refinement 2: Add features

Add these features:
- Task comments (anyone logged in can comment on a task)
- Activity log showing who moved a task and when
- Email notifications when a task is assigned to someone

Refinement 3: Polish

Improve the design:
- Add a dark mode toggle
- Make the app fully responsive for mobile
- Add loading states and error handling
- Add keyboard shortcuts (Enter to submit, Escape to cancel)

Step 6: View and Edit the Code

Bolt.new lets you inspect the generated code:

Click the Files panel to see the project structure
Explore:
- /src — React frontend components
- /server — Express API routes
- /prisma — Database schema
- /package.json — Dependencies

You can edit any file directly in the browser. Bolt.new’s AI understands your project structure, so you can ask it to modify specific files.

Example: “Add a due date calendar picker to the task creation form”

Step 7: Deploy the App

Bolt.new offers one-click deployment:

Click Deploy button
Choose Netlify (free) or Vercel (free)
Bolt.new handles the build and deployment
You get a live URL in ~1 minute

For production deployment, you’ll need:

A real PostgreSQL database (Supabase free tier works great)
Update environment variables in your deployment platform
Configure custom domain (optional)

Complete Example: What Your App Will Do

Here’s the full prompt-to-deployment timeline:

Step	Action	Time
1	Sign up for Bolt.new	2 min
2	Write the initial prompt	3 min
3	Bolt.new builds the app	2 min
4	Test the app	5 min
5	Refine with follow-up prompts	10 min
6	Deploy	2 min
Total		~24 min

Pro Tips

1. Write Detailed Prompts

The more specific your prompt, the better the result. Include:

Tech stack (React, Express, PostgreSQL)
Features (auth, CRUD, drag-and-drop)
Design preferences (modern, clean, responsive)

2. Iterate, Don’t Regenerate

Instead of starting over, use follow-up prompts to refine. Bolt.new remembers the full context of your conversation.

3. Use Multiple Prompts for Complex Apps

Break complex apps into phases:

“Build the authentication system”
“Now add the task management features”
“Now add the kanban board”

4. Know When to Write Code

Bolt.new handles 90% of your app. For the remaining 10% — custom business logic, complex validations, specific API integrations — you may need to write or edit code. The generated code is clean and well-structured for this purpose.

5. Start with Bolt.new, Finish with Code

The best workflow: use Bolt.new for the initial build (80% of the app in 20% of the time), then export the code and do final polish in your local IDE.

Common Issues & Solutions

Issue	Solution
App doesn’t load	Check the browser console for errors. Ask Bolt: “Fix the error: [paste error]“
Database not connecting	Make sure environment variables are set. Ask: “Add environment variable configuration”
Drag-and-drop not working	”Fix the drag-and-drop implementation. Use react-beautiful-dnd”
UI looks basic	”Improve the UI with Tailwind CSS. Add better styling and spacing”
Auth not working	”Fix the authentication flow. Check the JWT token handling”

What’s Next?

Now that you’ve built a task management app, try these:

Build an AI chatbot: “Build a chat app with OpenAI API integration”
Build a SaaS dashboard: “Build a dashboard with charts, user management, and billing”
Build a marketplace: “Build a marketplace where users can list and buy items”
Build a real-time app: “Build a real-time collaborative whiteboard app”

Progression path: Start with Bolt.new → learn the basics → read the generated code → eventually modify code directly. Bolt.new is the best on-ramp to full-stack development for non-coders.

Summary

In 30 minutes, you built a full-stack task management app with:

User authentication
Kanban board with drag-and-drop
Database persistence
Modern, responsive UI
One-click deployment

Key takeaway: Bolt.new has made full-stack web development accessible to anyone. The app you just built would take a professional developer 8-16 hours to build from scratch. With Bolt.new, it’s 30 minutes from idea to deployment.

The future of development is prompt-driven. Tools like Bolt.new won’t replace developers — they’ll replace the scaffolding phase, letting developers focus on the unique parts of their application. For non-developers, they unlock the ability to create software without learning to code.

Now go build something! 🚀