Bolt.new ile Sıfırdan Uygulama Yapma: StackBlitz AI

Bolt.new = AI ile WebContainer app builder. StackBlitz’in WebContainer teknolojisi browser’da tam Node.js. Prompt → çalışan app.

Bolt’un Farkı

"WebContainer = magic:

Browser'da:
- Full Node.js
- npm install
- File system
- Terminal
- Live preview

Sonuç:
- v0: UI component (no backend)
- Lovable: Supabase backend
- Bolt: ANY backend (Express, Hono, etc.)
- Full IDE experience

Stack flexibility:
- Next.js
- Astro
- Remix
- Vite + React
- SvelteKit
- Solid
- Vanilla Node
"

Workflow

1. bolt.new → start
2. Prompt: 'Build a Next.js blog with Markdown'
3. Bolt:
   - Creates folder
   - npm install
   - Generates files
   - Starts dev server
   - Live preview
4. Iterate:
   - 'Add dark mode toggle'
   - 'Use Tailwind'
   - 'Add RSS feed'
5. Deploy:
   - Netlify (built-in)
   - GitHub push
   - Custom platform

Örnek 1: SaaS Landing

"Bolt prompt:

Build a Next.js 14 landing page for an AI productivity tool.

Sections:
- Hero with email signup
- Features (3 columns)
- Pricing (3 tiers)
- FAQ
- Footer

Stack:
- Next.js App Router
- TypeScript
- Tailwind
- shadcn/ui
- Resend for email
- KV for waitlist storage

Style:
- Modern, gradient accents
- Dark mode
- Geist font
"

Bolt:

• Creates Next.js project
• Installs deps
• Generates all sections
• Sets up Resend integration
• Live preview
• Ready to deploy

Örnek 2: API Backend

"Bolt prompt:

Build a REST API for a simple todo app.

Stack:
- Hono (modern framework)
- SQLite (better-sqlite3)
- Bun (runtime)
- Zod (validation)
- OpenAPI auto-docs

Endpoints:
- POST /todos
- GET /todos
- GET /todos/:id
- PATCH /todos/:id
- DELETE /todos/:id

Features:
- Pagination
- Filter (completed)
- Sort (createdAt)
- Bearer auth
- Rate limit
"

Bolt → API server running, OpenAPI docs at /docs.

Örnek 3: Real-Time Chat

"Bolt:

Build a real-time chat app.

Stack:
- Next.js + TypeScript
- Supabase Realtime
- Tailwind
- shadcn

Features:
- User signup (email)
- Public rooms
- Private DM
- Typing indicator
- Online presence
- Message reactions
- File upload

Bonus:
- AI bot mention (@ai) for responses
"

Örnek 4: AI App

"Build ChatGPT clone:

Stack:
- Next.js
- AI SDK (Vercel)
- OpenAI API
- Streaming responses
- Conversation history (SQLite)
- Tailwind chat UI

Features:
- Multi-conversation
- Model selector (GPT-4o, Claude)
- System prompt customization
- Export conversation (Markdown)
- Keyboard shortcuts
"

Bolt vs Lovable vs v0

Feature	Bolt.new	Lovable	v0.dev
WebContainer	✅	❌	❌
Backend control	Full	Supabase only	None
Framework choice	Any	Vite + React	Next.js
In-browser IDE	✅	Limited	Limited
Terminal	✅	❌	❌
Database choice	Any	Supabase	N/A
Deploy	Netlify, custom	Vercel	Vercel
Best for	Flexibility	Quick SaaS	UI components

Prompt Engineering

Detailed Stack

"Detailed stack request:

Frontend:
- Framework: [Next.js / Astro / Remix]
- Styling: [Tailwind / CSS Modules]
- Components: [shadcn / custom]
- State: [Zustand / Jotai / Context]

Backend:
- Runtime: [Node / Bun / Deno]
- Framework: [Express / Hono / Fastify]
- Database: [SQLite / Postgres / Mongo]
- ORM: [Prisma / Drizzle]

Auth: [NextAuth / Lucia / custom]
Deploy: [Netlify / Vercel / Railway]
"

Constraints

"Constraints:

- No external services (offline first)
- Mobile responsive
- Accessibility (WCAG AA)
- TypeScript strict
- Performance (CLS < 0.1)
- Bundle size (< 100KB)
"

Iteration

"Refine iteratively:

V1: basic structure
V2: 'Add authentication with magic link'
V3: 'Add admin dashboard route /admin'
V4: 'Add user search and pagination'
V5: 'Add tests with Vitest'
V6: 'Add CI workflow GitHub Actions'

Each step: focused, single concern
"

Deploy Options

"Deploy from Bolt:

1. Netlify (built-in):
   - 1-click
   - URL: project.netlify.app
   - Custom domain free

2. GitHub:
   - Push to repo
   - Then any platform
   - Vercel, Railway, Render

3. Download:
   - ZIP all files
   - Local development
   - Custom CI/CD

4. Custom platform:
   - StackBlitz host
   - Sandbox
"

Cost Tier

"Bolt pricing 2026:

Free:
- 150K token / day
- Public projects
- Limited speed

Pro: $20/ay
- 10M token / month
- Private projects
- Faster
- Priority

Team: $50/ay/user
- Collaboration
- Workspace
- More tokens

Token usage:
- 1 prompt iteration: 1K-10K
- Full app: 50K-500K
- Active dev: 1-3M / month
"

Production Pathway

"Bolt → Production:

1. Build in Bolt
2. Iterate UI/UX
3. Test functionality
4. Export to GitHub
5. Local dev environment
6. Add tests (yourself)
7. CI/CD setup
8. Security audit
9. Performance audit
10. Deploy to production platform
11. Monitor + iterate
"

Use Case: Türk Pazarı

"TR-specific app örnek:

'Build SaaS for Türk freelancers:

Features:
- Türkçe interface (i18n)
- TL currency
- Müşteri kayıt + proje takip
- Fatura kesme (KDV +%20)
- E-arşiv format
- iyzico integration (Türkiye ödeme)
- PostgreSQL
- Next.js + Tailwind

Bonus:
- KVKK consent
- Aydınlatma metni template'
"

Bolt: Tam app + iyzico SDK integration + KDV calculation.

Limitations

"What Bolt can't:

- Browser perf limited (WebContainer)
- Large dependencies slow
- Native modules (no)
- Heavy compute browser-side
- Long-running tasks
- Some npm packages incompatible
- Production database (use external)

Workarounds:
- Export to local
- External services
- Smaller deps
- Backend on Railway/Render
"

Hybrid Workflow

"Bolt + Cursor pattern:

1. Bolt: rapid prototype (1 saat)
2. Export to GitHub
3. Open in Cursor (local)
4. Refine + extend (Cursor Composer)
5. Add tests
6. Production polish
7. Deploy

Best of both:
- Bolt: speed
- Cursor: precision
"

Detay: Cursor Composer, Cursor IDE

Examples Library

"Bolt'un örnekleri:

- E-commerce checkout
- Real-time game
- AI agent dashboard
- Calendar app
- Note-taking
- Form builder
- Survey tool
- File explorer
- Code playground
- API documentation
- Live polling
- Whiteboard

Each shows pattern, copy + adapt
"

Yaygın Hatalar

1. Single mega prompt: Iteration better
2. Stack mix incompatible: Stick framework patterns
3. Production deploy w/o review: Risk
4. Token waste: Cancel bad iterations early
5. WebContainer dep heavy: Slow browser
6. No version control: Lost work
7. Customer-facing without test: Bugs

Sonraki Adımlar

• v0 / Lovable
• Cursor Composer
• Cursor IDE
• Mobil Uygulama
• Frontend AI

Özet

Bolt.new = AI + WebContainer = browser’da full-stack. Esneklik max (any framework). v0 UI, Lovable Supabase, Bolt = anything. Anahtar: detailed prompt + iteration + production review. MVP saatlerde, scale için dev gerekir.