Bolt.new

// Co WebContainers mogą uruchamiać:
// ✅ Express.js / Fastify servers
// ✅ React / Vue / Svelte / Next.js
// ✅ SQLite databases
// ✅ npm packages (większość)
// ✅ TypeScript compilation
// ✅ Bundlers (Vite, esbuild)

// Ograniczenia:
// ❌ Native binaries (sharp, bcrypt)
// ❌ Duże frameworki backendowe (NestJS partially)
// ❌ PostgreSQL/MySQL (tylko SQLite natywnie)

Build a [typ aplikacji] with [główne technologie].

Features:
- [Funkcja 1]
- [Funkcja 2]
- [Funkcja 3]

Requirements:
- [Wymaganie techniczne 1]
- [Wymaganie techniczne 2]

Design:
- [Preferencje designu]

Build a todo app with React and TypeScript.

Features:
- Add, edit, delete tasks
- Categories with color coding
- Priority levels (low, medium, high)
- Due dates with calendar picker
- Drag and drop sorting
- Local storage persistence
- Dark mode support

Design:
- Clean, minimal UI
- Smooth animations
- Mobile responsive

Build a blog platform with React, Express, and SQLite.

Features:
- Markdown editor with preview
- Categories and tags
- Search functionality
- Admin panel for posts management
- Comment system
- RSS feed generation

Requirements:
- RESTful API
- Image upload support
- SEO-friendly URLs
- Responsive design

Design:
- Typography-focused
- Reading mode toggle
- Dark/light theme

Build a simple e-commerce store with React and Express.

Features:
- Product catalog with categories
- Shopping cart with persistence
- Search and filtering
- Product detail pages
- Checkout flow (without payment)
- Order summary

Requirements:
- SQLite database for products
- RESTful API
- Session-based cart
- Form validation

Design:
- Grid product layout
- Clean checkout process
- Mobile-first approach

Build an analytics dashboard with React and Recharts.

Features:
- Multiple chart types (line, bar, pie)
- Date range selector
- Data export (CSV)
- Real-time updates simulation
- Responsive grid layout
- Key metrics cards

Requirements:
- TypeScript
- Tailwind CSS
- Mock data generation
- Loading states

Design:
- Professional look
- Consistent color palette
- Accessible charts

// Pierwsza iteracja
You: "Build a todo app with React"
Bolt: [Generuje podstawową todo app]

// Druga iteracja
You: "Add categories - users should be able to create custom categories with colors"
Bolt: [Dodaje system kategorii]

// Trzecia iteracja
You: "Add a dark mode toggle that persists user preference"
Bolt: [Implementuje dark mode]

// Czwarta iteracja
You: "The delete button is not working on mobile - fix it"
Bolt: [Debuguje i naprawia problem]

// Piąta iteracja
You: "Add keyboard shortcuts - Enter to add task, Escape to cancel"
Bolt: [Dodaje keyboard navigation]

// React (domyślnie)
// ✅ React 18 z Hooks
// ✅ React Router v6
// ✅ State management (useState, useReducer, Context)
// ✅ Styled Components / Emotion
// ✅ Tailwind CSS

// Vue
// ✅ Vue 3 Composition API
// ✅ Vue Router
// ✅ Pinia

// Svelte
// ✅ Svelte 4
// ✅ SvelteKit (basic)
// ✅ Svelte stores

// Styling
// ✅ Tailwind CSS (preferowane)
// ✅ CSS Modules
// ✅ SCSS/SASS
// ✅ Styled Components

// Express.js (domyślne)
const express = require('express')
const app = express()

app.use(express.json())

app.get('/api/items', (req, res) => {
  res.json(items)
})

app.post('/api/items', (req, res) => {
  const item = { id: Date.now(), ...req.body }
  items.push(item)
  res.status(201).json(item)
})

// Fastify (szybsza alternatywa)
const fastify = require('fastify')()

fastify.get('/api/items', async (request, reply) => {
  return items
})

// SQLite z better-sqlite3
const Database = require('better-sqlite3')
const db = new Database('data.db')

// Tworzenie tabel
db.exec(`
  CREATE TABLE IF NOT EXISTS users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    email TEXT UNIQUE,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
  )
`)

// CRUD operations
const insertUser = db.prepare('INSERT INTO users (name, email) VALUES (?, ?)')
const getUsers = db.prepare('SELECT * FROM users')
const getUserById = db.prepare('SELECT * FROM users WHERE id = ?')

// Użycie
insertUser.run('Jan Kowalski', 'jan@example.com')
const users = getUsers.all()
const user = getUserById.get(1)

// Prosta autentykacja sesyjna
const express = require('express')
const session = require('express-session')
const bcrypt = require('bcryptjs') // bcryptjs działa w WebContainers

const app = express()

app.use(session({
  secret: 'your-secret-key',
  resave: false,
  saveUninitialized: false
}))

// Rejestracja
app.post('/api/register', async (req, res) => {
  const { email, password } = req.body

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

  // Zapisz do SQLite
  const stmt = db.prepare('INSERT INTO users (email, password) VALUES (?, ?)')
  const result = stmt.run(email, hashedPassword)

  res.status(201).json({ id: result.lastInsertRowid })
})

// Logowanie
app.post('/api/login', async (req, res) => {
  const { email, password } = req.body

  const stmt = db.prepare('SELECT * FROM users WHERE email = ?')
  const user = stmt.get(email)

  if (!user || !await bcrypt.compare(password, user.password)) {
    return res.status(401).json({ error: 'Invalid credentials' })
  }

  req.session.userId = user.id
  res.json({ message: 'Logged in' })
})

// Middleware autoryzacji
const requireAuth = (req, res, next) => {
  if (!req.session.userId) {
    return res.status(401).json({ error: 'Unauthorized' })
  }
  next()
}

app.get('/api/profile', requireAuth, (req, res) => {
  const user = db.prepare('SELECT id, email FROM users WHERE id = ?')
    .get(req.session.userId)
  res.json(user)
})

Prompt: "Build a modern todo app with React, Express, and SQLite.

Features:
- Add, edit, delete, complete tasks
- Categories with custom colors
- Due dates with reminders
- Priority levels
- Search and filter
- Statistics dashboard
- Data export to JSON

Design:
- Clean, modern UI
- Smooth animations with Framer Motion
- Dark mode support
- Mobile responsive"

todo-app/
├── client/
│   ├── src/
│   │   ├── components/
│   │   │   ├── TaskList.tsx
│   │   │   ├── TaskItem.tsx
│   │   │   ├── TaskForm.tsx
│   │   │   ├── CategorySelector.tsx
│   │   │   ├── SearchBar.tsx
│   │   │   ├── StatsPanel.tsx
│   │   │   └── ThemeToggle.tsx
│   │   ├── hooks/
│   │   │   ├── useTasks.ts
│   │   │   ├── useCategories.ts
│   │   │   └── useTheme.ts
│   │   ├── api/
│   │   │   └── tasks.ts
│   │   ├── types/
│   │   │   └── index.ts
│   │   ├── App.tsx
│   │   └── main.tsx
│   ├── index.html
│   └── package.json
├── server/
│   ├── index.js
│   ├── routes/
│   │   ├── tasks.js
│   │   └── categories.js
│   ├── db/
│   │   └── schema.sql
│   └── package.json
└── package.json

Prompt: "Build a real-time chat application with React and Express.

Features:
- Multiple chat rooms
- User nicknames
- Real-time messaging with Server-Sent Events
- Message timestamps
- Online users list
- Typing indicators
- Message reactions

Requirements:
- No WebSockets (use SSE for WebContainers compatibility)
- SQLite for message persistence
- Clean REST API

Design:
- Slack-like interface
- Message threading
- Emoji picker"

// server/routes/messages.js
const clients = new Map() // roomId -> Set of response objects

// SSE endpoint
app.get('/api/rooms/:roomId/events', (req, res) => {
  const { roomId } = req.params

  res.setHeader('Content-Type', 'text/event-stream')
  res.setHeader('Cache-Control', 'no-cache')
  res.setHeader('Connection', 'keep-alive')

  // Dodaj klienta do pokoju
  if (!clients.has(roomId)) {
    clients.set(roomId, new Set())
  }
  clients.get(roomId).add(res)

  // Wyślij heartbeat co 30 sekund
  const heartbeat = setInterval(() => {
    res.write(':heartbeat\n\n')
  }, 30000)

  // Cleanup on disconnect
  req.on('close', () => {
    clearInterval(heartbeat)
    clients.get(roomId)?.delete(res)
  })
})

// Broadcast do pokoju
function broadcast(roomId, event, data) {
  const roomClients = clients.get(roomId)
  if (!roomClients) return

  const message = `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`

  for (const client of roomClients) {
    client.write(message)
  }
}

// Wysyłanie wiadomości
app.post('/api/rooms/:roomId/messages', (req, res) => {
  const { roomId } = req.params
  const { text, userId, userName } = req.body

  const message = {
    id: Date.now(),
    roomId,
    userId,
    userName,
    text,
    createdAt: new Date().toISOString()
  }

  // Zapisz do DB
  db.prepare(`
    INSERT INTO messages (id, room_id, user_id, user_name, text, created_at)
    VALUES (?, ?, ?, ?, ?, ?)
  `).run(message.id, roomId, userId, userName, text, message.createdAt)

  // Broadcast do wszystkich w pokoju
  broadcast(roomId, 'new-message', message)

  res.status(201).json(message)
})

// client/src/hooks/useMessages.ts
import { useState, useEffect } from 'react'

interface Message {
  id: number
  userId: string
  userName: string
  text: string
  createdAt: string
}

export function useMessages(roomId: string) {
  const [messages, setMessages] = useState<Message[]>([])

  useEffect(() => {
    // Pobierz historię
    fetch(`/api/rooms/${roomId}/messages`)
      .then(res => res.json())
      .then(setMessages)

    // Subskrybuj SSE
    const eventSource = new EventSource(`/api/rooms/${roomId}/events`)

    eventSource.addEventListener('new-message', (event) => {
      const message = JSON.parse(event.data)
      setMessages(prev => [...prev, message])
    })

    eventSource.addEventListener('user-typing', (event) => {
      // Handle typing indicator
    })

    return () => eventSource.close()
  }, [roomId])

  const sendMessage = async (text: string, userId: string, userName: string) => {
    await fetch(`/api/rooms/${roomId}/messages`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text, userId, userName })
    })
  }

  return { messages, sendMessage }
}

Prompt: "Build a CRM dashboard with React, Express, and SQLite.

Features:
- Contacts management (CRUD)
- Deals pipeline with drag-and-drop
- Activity timeline
- Search and filtering
- Contact tags
- Notes per contact
- Dashboard with metrics

Requirements:
- RESTful API
- Pagination for contacts
- Export to CSV
- Form validation with Zod

Design:
- Professional business look
- Table views with sorting
- Kanban board for deals
- Responsive sidebar"

// client/src/components/DealsPipeline.tsx
import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd'
import { useState, useEffect } from 'react'

interface Deal {
  id: number
  title: string
  value: number
  stage: string
  contactId: number
  contactName: string
}

const stages = ['Lead', 'Qualified', 'Proposal', 'Negotiation', 'Closed Won', 'Closed Lost']

export function DealsPipeline() {
  const [deals, setDeals] = useState<Deal[]>([])

  useEffect(() => {
    fetch('/api/deals').then(r => r.json()).then(setDeals)
  }, [])

  const handleDragEnd = async (result: DropResult) => {
    if (!result.destination) return

    const dealId = parseInt(result.draggableId)
    const newStage = result.destination.droppableId

    // Optimistic update
    setDeals(deals.map(deal =>
      deal.id === dealId ? { ...deal, stage: newStage } : deal
    ))

    // Update on server
    await fetch(`/api/deals/${dealId}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ stage: newStage })
    })
  }

  const dealsByStage = stages.reduce((acc, stage) => {
    acc[stage] = deals.filter(d => d.stage === stage)
    return acc
  }, {} as Record<string, Deal[]>)

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <div className="flex gap-4 overflow-x-auto p-4">
        {stages.map(stage => (
          <div key={stage} className="min-w-64 bg-gray-100 rounded-lg p-4">
            <h3 className="font-semibold mb-4 flex justify-between">
              {stage}
              <span className="text-gray-500">
                ${dealsByStage[stage].reduce((sum, d) => sum + d.value, 0).toLocaleString()}
              </span>
            </h3>

            <Droppable droppableId={stage}>
              {(provided) => (
                <div
                  ref={provided.innerRef}
                  {...provided.droppableProps}
                  className="space-y-2 min-h-24"
                >
                  {dealsByStage[stage].map((deal, index) => (
                    <Draggable
                      key={deal.id}
                      draggableId={String(deal.id)}
                      index={index}
                    >
                      {(provided) => (
                        <div
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                          className="bg-white p-3 rounded shadow cursor-grab"
                        >
                          <h4 className="font-medium">{deal.title}</h4>
                          <p className="text-sm text-gray-600">{deal.contactName}</p>
                          <p className="text-sm font-semibold text-green-600">
                            ${deal.value.toLocaleString()}
                          </p>
                        </div>
                      )}
                    </Draggable>
                  ))}
                  {provided.placeholder}
                </div>
              )}
            </Droppable>
          </div>
        ))}
      </div>
    </DragDropContext>
  )
}

[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "18"

# Redirect API calls do serverless functions
[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200

# SPA fallback
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

// netlify/functions/api.js
const express = require('express')
const serverless = require('serverless-http')

const app = express()
app.use(express.json())

// Twoje routes
app.get('/api/items', (req, res) => {
  res.json([{ id: 1, name: 'Item 1' }])
})

app.post('/api/items', (req, res) => {
  // Handle POST
})

module.exports.handler = serverless(app)

// ✅ Dobre prompty
"Build a blog with React and Express. Include:
- Markdown editor
- Post categories
- Search
- Pagination
Use Tailwind for styling and SQLite for data."

// ❌ Słabe prompty
"Make me a blog"  // Zbyt ogólne
"Build a social network like Facebook"  // Zbyt ambitne
"Create an app with all features"  // Niesprecyzowane

// 1. Opisz problem dokładnie
"The delete button throws an error 'Cannot read property id of undefined'
when I try to delete a task"

// 2. Poproś o debugging
"Add console.log statements to the deleteTask function
to help debug the undefined id error"

// 3. Poproś o fix z wyjaśnieniem
"Fix the delete bug and explain what was wrong"

// Poproś o optymalizacje
"Optimize the app for better performance:
- Add React.memo to list items
- Implement debouncing on search
- Add loading states
- Lazy load heavy components"

# Po eksporcie
cd my-project
npm install
npm run dev

// ❌ Native binaries
const sharp = require('sharp')  // Nie działa w WebContainers
const bcrypt = require('bcrypt')  // Użyj bcryptjs zamiast

// ❌ Duże bazy danych
const { Pool } = require('pg')  // PostgreSQL wymaga zewnętrznego serwera
// ✅ Użyj SQLite lub zewnętrznego Supabase/Neon

// ❌ WebSockets natywne
const WebSocket = require('ws')  // Ograniczone wsparcie
// ✅ Użyj Server-Sent Events lub polling

// ❌ Ciężkie frameworki
const { NestFactory } = require('@nestjs/core')  // Może nie działać w pełni
// ✅ Użyj Express lub Fastify

"Add these npm packages to the project:
- date-fns for date formatting
- zod for validation
- react-hot-toast for notifications"

// What WebContainers can run:
// ✅ Express.js / Fastify servers
// ✅ React / Vue / Svelte / Next.js
// ✅ SQLite databases
// ✅ npm packages (most of them)
// ✅ TypeScript compilation
// ✅ Bundlers (Vite, esbuild)

// Limitations:
// ❌ Native binaries (sharp, bcrypt)
// ❌ Large backend frameworks (NestJS partially)
// ❌ PostgreSQL/MySQL (only SQLite natively)

Build a [application type] with [main technologies].

Features:
- [Feature 1]
- [Feature 2]
- [Feature 3]

Requirements:
- [Technical requirement 1]
- [Technical requirement 2]

Design:
- [Design preferences]

Build a todo app with React and TypeScript.

Features:
- Add, edit, delete tasks
- Categories with color coding
- Priority levels (low, medium, high)
- Due dates with calendar picker
- Drag and drop sorting
- Local storage persistence
- Dark mode support

Design:
- Clean, minimal UI
- Smooth animations
- Mobile responsive

Build a blog platform with React, Express, and SQLite.

Features:
- Markdown editor with preview
- Categories and tags
- Search functionality
- Admin panel for posts management
- Comment system
- RSS feed generation

Requirements:
- RESTful API
- Image upload support
- SEO-friendly URLs
- Responsive design

Design:
- Typography-focused
- Reading mode toggle
- Dark/light theme

Build a simple e-commerce store with React and Express.

Features:
- Product catalog with categories
- Shopping cart with persistence
- Search and filtering
- Product detail pages
- Checkout flow (without payment)
- Order summary

Requirements:
- SQLite database for products
- RESTful API
- Session-based cart
- Form validation

Design:
- Grid product layout
- Clean checkout process
- Mobile-first approach

Build an analytics dashboard with React and Recharts.

Features:
- Multiple chart types (line, bar, pie)
- Date range selector
- Data export (CSV)
- Real-time updates simulation
- Responsive grid layout
- Key metrics cards

Requirements:
- TypeScript
- Tailwind CSS
- Mock data generation
- Loading states

Design:
- Professional look
- Consistent color palette
- Accessible charts

// First iteration
You: "Build a todo app with React"
Bolt: [Generates a basic todo app]

// Second iteration
You: "Add categories - users should be able to create custom categories with colors"
Bolt: [Adds a category system]

// Third iteration
You: "Add a dark mode toggle that persists user preference"
Bolt: [Implements dark mode]

// Fourth iteration
You: "The delete button is not working on mobile - fix it"
Bolt: [Debugs and fixes the problem]

// Fifth iteration
You: "Add keyboard shortcuts - Enter to add task, Escape to cancel"
Bolt: [Adds keyboard navigation]

// React (default)
// ✅ React 18 with Hooks
// ✅ React Router v6
// ✅ State management (useState, useReducer, Context)
// ✅ Styled Components / Emotion
// ✅ Tailwind CSS

// Vue
// ✅ Vue 3 Composition API
// ✅ Vue Router
// ✅ Pinia

// Svelte
// ✅ Svelte 4
// ✅ SvelteKit (basic)
// ✅ Svelte stores

// Styling
// ✅ Tailwind CSS (preferred)
// ✅ CSS Modules
// ✅ SCSS/SASS
// ✅ Styled Components

// Express.js (default)
const express = require('express')
const app = express()

app.use(express.json())

app.get('/api/items', (req, res) => {
  res.json(items)
})

app.post('/api/items', (req, res) => {
  const item = { id: Date.now(), ...req.body }
  items.push(item)
  res.status(201).json(item)
})

// Fastify (faster alternative)
const fastify = require('fastify')()

fastify.get('/api/items', async (request, reply) => {
  return items
})

// SQLite with better-sqlite3
const Database = require('better-sqlite3')
const db = new Database('data.db')

// Creating tables
db.exec(`
  CREATE TABLE IF NOT EXISTS users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    email TEXT UNIQUE,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
  )
`)

// CRUD operations
const insertUser = db.prepare('INSERT INTO users (name, email) VALUES (?, ?)')
const getUsers = db.prepare('SELECT * FROM users')
const getUserById = db.prepare('SELECT * FROM users WHERE id = ?')

// Usage
insertUser.run('John Smith', 'john@example.com')
const users = getUsers.all()
const user = getUserById.get(1)

// Simple session-based authentication
const express = require('express')
const session = require('express-session')
const bcrypt = require('bcryptjs') // bcryptjs works in WebContainers

const app = express()

app.use(session({
  secret: 'your-secret-key',
  resave: false,
  saveUninitialized: false
}))

// Registration
app.post('/api/register', async (req, res) => {
  const { email, password } = req.body

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

  // Save to SQLite
  const stmt = db.prepare('INSERT INTO users (email, password) VALUES (?, ?)')
  const result = stmt.run(email, hashedPassword)

  res.status(201).json({ id: result.lastInsertRowid })
})

// Login
app.post('/api/login', async (req, res) => {
  const { email, password } = req.body

  const stmt = db.prepare('SELECT * FROM users WHERE email = ?')
  const user = stmt.get(email)

  if (!user || !await bcrypt.compare(password, user.password)) {
    return res.status(401).json({ error: 'Invalid credentials' })
  }

  req.session.userId = user.id
  res.json({ message: 'Logged in' })
})

// Authorization middleware
const requireAuth = (req, res, next) => {
  if (!req.session.userId) {
    return res.status(401).json({ error: 'Unauthorized' })
  }
  next()
}

app.get('/api/profile', requireAuth, (req, res) => {
  const user = db.prepare('SELECT id, email FROM users WHERE id = ?')
    .get(req.session.userId)
  res.json(user)
})

Prompt: "Build a modern todo app with React, Express, and SQLite.

Features:
- Add, edit, delete, complete tasks
- Categories with custom colors
- Due dates with reminders
- Priority levels
- Search and filter
- Statistics dashboard
- Data export to JSON

Design:
- Clean, modern UI
- Smooth animations with Framer Motion
- Dark mode support
- Mobile responsive"

todo-app/
├── client/
│   ├── src/
│   │   ├── components/
│   │   │   ├── TaskList.tsx
│   │   │   ├── TaskItem.tsx
│   │   │   ├── TaskForm.tsx
│   │   │   ├── CategorySelector.tsx
│   │   │   ├── SearchBar.tsx
│   │   │   ├── StatsPanel.tsx
│   │   │   └── ThemeToggle.tsx
│   │   ├── hooks/
│   │   │   ├── useTasks.ts
│   │   │   ├── useCategories.ts
│   │   │   └── useTheme.ts
│   │   ├── api/
│   │   │   └── tasks.ts
│   │   ├── types/
│   │   │   └── index.ts
│   │   ├── App.tsx
│   │   └── main.tsx
│   ├── index.html
│   └── package.json
├── server/
│   ├── index.js
│   ├── routes/
│   │   ├── tasks.js
│   │   └── categories.js
│   ├── db/
│   │   └── schema.sql
│   └── package.json
└── package.json

Prompt: "Build a real-time chat application with React and Express.

Features:
- Multiple chat rooms
- User nicknames
- Real-time messaging with Server-Sent Events
- Message timestamps
- Online users list
- Typing indicators
- Message reactions

Requirements:
- No WebSockets (use SSE for WebContainers compatibility)
- SQLite for message persistence
- Clean REST API

Design:
- Slack-like interface
- Message threading
- Emoji picker"

// server/routes/messages.js
const clients = new Map() // roomId -> Set of response objects

// SSE endpoint
app.get('/api/rooms/:roomId/events', (req, res) => {
  const { roomId } = req.params

  res.setHeader('Content-Type', 'text/event-stream')
  res.setHeader('Cache-Control', 'no-cache')
  res.setHeader('Connection', 'keep-alive')

  // Add client to the room
  if (!clients.has(roomId)) {
    clients.set(roomId, new Set())
  }
  clients.get(roomId).add(res)

  // Send heartbeat every 30 seconds
  const heartbeat = setInterval(() => {
    res.write(':heartbeat\n\n')
  }, 30000)

  // Cleanup on disconnect
  req.on('close', () => {
    clearInterval(heartbeat)
    clients.get(roomId)?.delete(res)
  })
})

// Broadcast to the room
function broadcast(roomId, event, data) {
  const roomClients = clients.get(roomId)
  if (!roomClients) return

  const message = `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`

  for (const client of roomClients) {
    client.write(message)
  }
}

// Sending messages
app.post('/api/rooms/:roomId/messages', (req, res) => {
  const { roomId } = req.params
  const { text, userId, userName } = req.body

  const message = {
    id: Date.now(),
    roomId,
    userId,
    userName,
    text,
    createdAt: new Date().toISOString()
  }

  // Save to DB
  db.prepare(`
    INSERT INTO messages (id, room_id, user_id, user_name, text, created_at)
    VALUES (?, ?, ?, ?, ?, ?)
  `).run(message.id, roomId, userId, userName, text, message.createdAt)

  // Broadcast to everyone in the room
  broadcast(roomId, 'new-message', message)

  res.status(201).json(message)
})

// client/src/hooks/useMessages.ts
import { useState, useEffect } from 'react'

interface Message {
  id: number
  userId: string
  userName: string
  text: string
  createdAt: string
}

export function useMessages(roomId: string) {
  const [messages, setMessages] = useState<Message[]>([])

  useEffect(() => {
    // Fetch history
    fetch(`/api/rooms/${roomId}/messages`)
      .then(res => res.json())
      .then(setMessages)

    // Subscribe to SSE
    const eventSource = new EventSource(`/api/rooms/${roomId}/events`)

    eventSource.addEventListener('new-message', (event) => {
      const message = JSON.parse(event.data)
      setMessages(prev => [...prev, message])
    })

    eventSource.addEventListener('user-typing', (event) => {
      // Handle typing indicator
    })

    return () => eventSource.close()
  }, [roomId])

  const sendMessage = async (text: string, userId: string, userName: string) => {
    await fetch(`/api/rooms/${roomId}/messages`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text, userId, userName })
    })
  }

  return { messages, sendMessage }
}

Prompt: "Build a CRM dashboard with React, Express, and SQLite.

Features:
- Contacts management (CRUD)
- Deals pipeline with drag-and-drop
- Activity timeline
- Search and filtering
- Contact tags
- Notes per contact
- Dashboard with metrics

Requirements:
- RESTful API
- Pagination for contacts
- Export to CSV
- Form validation with Zod

Design:
- Professional business look
- Table views with sorting
- Kanban board for deals
- Responsive sidebar"

// client/src/components/DealsPipeline.tsx
import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd'
import { useState, useEffect } from 'react'

interface Deal {
  id: number
  title: string
  value: number
  stage: string
  contactId: number
  contactName: string
}

const stages = ['Lead', 'Qualified', 'Proposal', 'Negotiation', 'Closed Won', 'Closed Lost']

export function DealsPipeline() {
  const [deals, setDeals] = useState<Deal[]>([])

  useEffect(() => {
    fetch('/api/deals').then(r => r.json()).then(setDeals)
  }, [])

  const handleDragEnd = async (result: DropResult) => {
    if (!result.destination) return

    const dealId = parseInt(result.draggableId)
    const newStage = result.destination.droppableId

    // Optimistic update
    setDeals(deals.map(deal =>
      deal.id === dealId ? { ...deal, stage: newStage } : deal
    ))

    // Update on server
    await fetch(`/api/deals/${dealId}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ stage: newStage })
    })
  }

  const dealsByStage = stages.reduce((acc, stage) => {
    acc[stage] = deals.filter(d => d.stage === stage)
    return acc
  }, {} as Record<string, Deal[]>)

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <div className="flex gap-4 overflow-x-auto p-4">
        {stages.map(stage => (
          <div key={stage} className="min-w-64 bg-gray-100 rounded-lg p-4">
            <h3 className="font-semibold mb-4 flex justify-between">
              {stage}
              <span className="text-gray-500">
                ${dealsByStage[stage].reduce((sum, d) => sum + d.value, 0).toLocaleString()}
              </span>
            </h3>

            <Droppable droppableId={stage}>
              {(provided) => (
                <div
                  ref={provided.innerRef}
                  {...provided.droppableProps}
                  className="space-y-2 min-h-24"
                >
                  {dealsByStage[stage].map((deal, index) => (
                    <Draggable
                      key={deal.id}
                      draggableId={String(deal.id)}
                      index={index}
                    >
                      {(provided) => (
                        <div
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                          className="bg-white p-3 rounded shadow cursor-grab"
                        >
                          <h4 className="font-medium">{deal.title}</h4>
                          <p className="text-sm text-gray-600">{deal.contactName}</p>
                          <p className="text-sm font-semibold text-green-600">
                            ${deal.value.toLocaleString()}
                          </p>
                        </div>
                      )}
                    </Draggable>
                  ))}
                  {provided.placeholder}
                </div>
              )}
            </Droppable>
          </div>
        ))}
      </div>
    </DragDropContext>
  )
}

[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "18"

# Redirect API calls to serverless functions
[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200

# SPA fallback
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

// netlify/functions/api.js
const express = require('express')
const serverless = require('serverless-http')

const app = express()
app.use(express.json())

// Your routes
app.get('/api/items', (req, res) => {
  res.json([{ id: 1, name: 'Item 1' }])
})

app.post('/api/items', (req, res) => {
  // Handle POST
})

module.exports.handler = serverless(app)

// ✅ Good prompts
"Build a blog with React and Express. Include:
- Markdown editor
- Post categories
- Search
- Pagination
Use Tailwind for styling and SQLite for data."

// ❌ Weak prompts
"Make me a blog"  // Too generic
"Build a social network like Facebook"  // Too ambitious
"Create an app with all features"  // Unspecified

// 1. Describe the problem precisely
"The delete button throws an error 'Cannot read property id of undefined'
when I try to delete a task"

// 2. Ask for debugging
"Add console.log statements to the deleteTask function
to help debug the undefined id error"

// 3. Ask for a fix with an explanation
"Fix the delete bug and explain what was wrong"

// Ask for optimizations
"Optimize the app for better performance:
- Add React.memo to list items
- Implement debouncing on search
- Add loading states
- Lazy load heavy components"

# After export
cd my-project
npm install
npm run dev

// ❌ Native binaries
const sharp = require('sharp')  // Does not work in WebContainers
const bcrypt = require('bcrypt')  // Use bcryptjs instead

// ❌ Large databases
const { Pool } = require('pg')  // PostgreSQL requires an external server
// ✅ Use SQLite or an external Supabase/Neon

// ❌ Native WebSockets
const WebSocket = require('ws')  // Limited support
// ✅ Use Server-Sent Events or polling

// ❌ Heavy frameworks
const { NestFactory } = require('@nestjs/core')  // May not fully work
// ✅ Use Express or Fastify

"Add these npm packages to the project:
- date-fns for date formatting
- zod for validation
- react-hot-toast for notifications"