Building Full-Stack Apps in the Browser with Bolt.new

Bolt.new is revolutionary because it's not just a code generator—it's a complete development environment that runs in your browser. You can build, test, and deploy full-stack applications without installing anything.

In this comprehensive guide, we'll build a complete full-stack app: a task management system with authentication, database, and API.

What is Bolt.new?

Bolt.new (by StackBlitz) is a browser-based IDE powered by AI. It can:
* Generate frontend code (React, Vue, Svelte)
* Generate backend code (Node.js, Express)
* Set up databases (in-memory or cloud)
* Run the entire stack in your browser
* Deploy to production with one click

Project: TaskFlow – A Full-Stack Task Manager

Features:
* User authentication (signup/login)
* Create, read, update, delete tasks
* Mark tasks as complete
* Filter tasks by status
* Persistent storage

Tech Stack:
* Frontend: React + Tailwind CSS
* Backend: Node.js + Express
* Database: SQLite (for simplicity)
* Authentication: JWT

Step 1: Initialize the Project

Go to bolt.new and paste this prompt:

> “Create a full-stack task management app called TaskFlow.
>
> Frontend:
> – React with Tailwind CSS
> – Pages: Login, Signup, Dashboard
> – Dashboard shows a list of tasks with add/edit/delete functionality
>
> Backend:
> – Node.js with Express
> – REST API endpoints for auth and tasks
> – JWT authentication
> – SQLite database
>
> Set up the complete project structure with both frontend and backend.”

Wait 60-90 seconds. Bolt.new will create the entire project.

Step 2: Review the Generated Structure

Bolt.new creates a monorepo structure:

“`
taskflow/
├── client/ # React frontend
│ ├── src/
│ │ ├── components/
│ │ ├── pages/
│ │ └── App.jsx
│ └── package.json
├── server/ # Express backend
│ ├── routes/
│ ├── middleware/
│ ├── models/
│ └── server.js
└── package.json # Root package.json
“`

Step 3: Test the App

Bolt.new automatically starts both the frontend and backend. You'll see:
* A preview window showing the login page
* A terminal showing server logs

Test the flow:
1. Click “Sign Up”
2. Create an account
3. Log in
4. Add a task
5. Mark it as complete

Everything works in the browser!

Step 4: Understand the Backend

Let's look at the generated API:

Authentication Endpoint (`server/routes/auth.js`)

“`javascript
router.post(‘/signup', async (req, res) => {
const { email, password } = req.body;

// Hash password
const hashedPassword = await bcrypt.hash(password, 10);

// Save user to database
const user = await db.run(
‘INSERT INTO users (email, password) VALUES (?, ?)',
[email, hashedPassword]
);

// Generate JWT
const token = jwt.sign({ userId: user.id }, process.env.JWT_SECRET);

res.json({ token });
});
“`

Tasks Endpoint (`server/routes/tasks.js`)

“`javascript
router.get(‘/tasks', authMiddleware, async (req, res) => {
const tasks = await db.all(
‘SELECT * FROM tasks WHERE userId = ?',
[req.userId]
);
res.json(tasks);
});

router.post(‘/tasks', authMiddleware, async (req, res) => {
const { title, description } = req.body;
const task = await db.run(
‘INSERT INTO tasks (userId, title, description, completed) VALUES (?, ?, ?, 0)',
[req.userId, title, description]
);
res.json(task);
});
“`

Step 5: Add Features with Vibes

The initial version is basic. Let's enhance it.

Feature 1: Task Categories

Prompt:
> “Add categories to tasks. Users should be able to assign a category (Work, Personal, Shopping) to each task. Add a filter to show tasks by category.”

Feature 2: Due Dates

Prompt:
> “Add due dates to tasks. Show overdue tasks in red. Add a calendar view to see tasks by date.”

Feature 3: Task Priority

Prompt:
> “Add priority levels (High, Medium, Low) to tasks. Sort tasks by priority by default.”

Feature 4: Sharing

Prompt:
> “Allow users to share tasks with other users. Add a ‘Share' button that lets you enter another user's email.”

Each feature takes 1-2 minutes to generate.

Step 6: Improve the UI

Prompt:
> “Redesign the dashboard to look more modern:
> – Add a sidebar with navigation
> – Use cards for tasks instead of a plain list
> – Add smooth animations when tasks are added/removed
> – Improve the color scheme with gradients”

Bolt.new will update the UI in real-time.

Step 7: Add Real-Time Updates

Prompt:
> “Add WebSocket support so that when one user adds a task, other users see it immediately without refreshing.”

Bolt.new will:
1. Install Socket.io
2. Set up WebSocket server
3. Update the frontend to listen for events

Step 8: Deploy to Production

Click the “Deploy” button in Bolt.new. Choose:
* Netlify (for frontend)
* Railway or Render (for backend)

Bolt.new will:
1. Build the production bundle
2. Deploy to the selected platforms
3. Give you live URLs

Total time: 2-3 minutes.

Step 9: Connect a Real Database

For production, you'll want a real database instead of SQLite.

Prompt:
> “Replace SQLite with PostgreSQL. Use Supabase for the database. Update all database queries to use Supabase's client library.”

Bolt.new will:
1. Install Supabase client
2. Update all queries
3. Provide instructions for setting up Supabase

Advanced Features

Email Notifications

Prompt:
> “Send an email notification when a task is due tomorrow. Use SendGrid for email delivery.”

Mobile App

Prompt:
> “Create a React Native version of this app that uses the same backend API.”

Analytics Dashboard

Prompt:
> “Add an analytics page showing: total tasks, completion rate, tasks by category (pie chart), tasks over time (line chart).”

Limitations of Bolt.new

While powerful, Bolt.new has limitations:

1. Performance: Complex apps might be slow in the browser.
2. File Size: Very large projects might hit browser limits.
3. Custom Dependencies: Some npm packages don't work in the browser environment.

For these cases, export the code and continue development locally.

Exporting Your Project

Click “Download” to get a zip file of your entire project. Then:

“`bash
unzip taskflow.zip
cd taskflow
npm install
npm run dev
“`

You can now continue development in VS Code, Cursor, or any IDE.

Conclusion

Bolt.new democratizes full-stack development. You don't need to set up Node.js, configure databases, or manage deployment pipelines. Everything happens in the browser.

At BYS Marketing, we use Bolt.new for rapid prototyping. We can show clients a working full-stack app in the first meeting, then refine it based on feedback.

—

Need a full-stack app built fast?
Contact BYS Marketing. We turn ideas into deployed applications in days, not months.