bolt.new: Full-Stack AI Development ใน Browser

bolt.new จาก StackBlitz เป็น AI-powered development environment ที่ทำงานใน browser สร้างแอปเต็มรูปแบบได้โดยไม่ต้องติดตั้งอะไร

bolt.new คืออะไร?

Overview

bolt.new = AI + WebContainers + Browser IDE

สิ่งที่ทำได้:
- สร้างแอปจาก prompt
- Full-stack (Frontend + Backend)
- รัน Node.js ใน browser
- Preview ทันที
- Deploy ได้

Key Differentiators

vs Replit:
- bolt.new รันใน browser 100%
- ไม่ต้องรอ server spin up
- WebContainers technology

vs v0:
- bolt.new = Full-stack apps
- v0 = UI components only

vs Cursor:
- bolt.new = Browser-based
- Cursor = Local IDE

Getting Started

Access bolt.new

1. ไปที่ bolt.new
2. Sign in (GitHub/Google)
3. Start prompting
4. Watch AI build your app

First Project

ลองสร้างโปรเจคแรก:

"Create a simple todo app with:
- Add/delete tasks
- Mark as complete
- Filter by status
- Store in localStorage"

bolt จะ:
1. สร้าง project structure
2. เขียน code ทั้งหมด
3. รัน preview ให้ดู
4. พร้อมแก้ไขต่อ

How It Works

WebContainers

WebContainers คืออะไร?
- Node.js runtime ใน browser
- ไม่ต้อง server
- Start ทันที
- Full npm support

ทำให้:
- สร้าง project เร็ว
- Preview real-time
- ทำงานแม้ offline

AI Capabilities

bolt ใช้ AI เพื่อ:
1. สร้างโค้ดจาก prompt
2. แก้ไขตาม feedback
3. Debug errors
4. Add features
5. Refactor code

Prompting Guide

Basic Prompts

Simple app:
"Create a weather app that shows current
weather for any city using OpenWeather API"

With specific tech:
"Build a blog with Next.js, Tailwind CSS,
and markdown support"

Detailed Prompts

"Create an expense tracker app:

Features:
- Add expenses with amount, category, date
- Dashboard with spending summary
- Charts showing spending by category
- Monthly budget setting
- Export to CSV

Tech stack:
- React with TypeScript
- Tailwind for styling
- Chart.js for graphs
- LocalStorage for data"

Complex Apps

"Build a project management tool like Trello:

Features:
- Multiple boards
- Drag-and-drop cards
- Columns (To Do, In Progress, Done)
- Card details with description
- Due dates
- Team member assignment
- Comments on cards

Authentication:
- Email/password login
- User profiles

Data:
- SQLite or similar embedded database"

Practical Examples

Example 1: SaaS Landing Page

Prompt:
"Create a SaaS landing page for a project
management tool called 'TeamFlow':

Sections:
1. Hero with tagline and CTA
2. Features grid (6 features)
3. Pricing (3 tiers)
4. Testimonials carousel
5. FAQ accordion
6. Footer with links

Style: Modern, clean, blue color scheme
Include animations on scroll"

Example 2: API Backend

Prompt:
"Build a REST API for a bookstore:

Endpoints:
- GET /books - list all books
- GET /books/:id - get one book
- POST /books - add book
- PUT /books/:id - update book
- DELETE /books/:id - delete book

Include:
- Express.js
- Validation
- Error handling
- SQLite database
- API documentation"

Example 3: Real-time Chat

Prompt:
"Create a real-time chat application:

Features:
- User authentication
- Chat rooms
- Direct messages
- Online status
- Typing indicators
- Message history

Use Socket.io for real-time
Style: Discord-inspired dark theme"

Example 4: E-commerce

Prompt:
"Build an e-commerce store for electronics:

Pages:
- Home (featured products, categories)
- Product listing (filter, sort)
- Product detail (images, specs, reviews)
- Cart
- Checkout (mock payment)
- Order confirmation

Include:
- Search functionality
- Responsive design
- Add to cart animation
- Stock tracking"

Iterative Development

Adding Features

หลังสร้าง app แล้ว:

"Add user authentication with email/password"
"Add dark mode toggle"
"Add export to PDF feature"
"Add email notifications"

Fixing Issues

เมื่อพบปัญหา:

"The delete button isn't working on mobile"
"Fix the login error when email has special characters"
"The chart isn't displaying correctly"

Improving

"Make the homepage load faster"
"Improve the mobile navigation"
"Add loading states to all buttons"
"Add error messages for form validation"

Export & Deploy

Export Options

1. Download ZIP
   - ได้ project ทั้งหมด
   - รันใน local ได้

2. Push to GitHub
   - Connect repository
   - Auto push

3. Deploy to Netlify/Vercel
   - One-click deploy
   - Get live URL

Deployment Workflow

1. สร้าง app ใน bolt.new
2. Test และ iterate
3. Export to GitHub
4. Connect to hosting
5. Deploy

หรือ:
- ใช้ bolt.new's built-in deploy

Limitations & Workarounds

Current Limitations

⚠️ ข้อจำกัด:
- ไม่รองรับทุก package
- Large apps อาจช้า
- Complex databases limited
- File size limits

Workarounds

สำหรับ complex apps:
1. สร้าง prototype ใน bolt
2. Export to local
3. ต่อยอดใน Cursor/VSCode

สำหรับ databases:
- ใช้ SQLite หรือ localStorage
- เชื่อมกับ external DB (Supabase, etc.)

Best Practices

1. Start Simple

❌ ขอทุกอย่างพร้อมกัน
✅ เริ่มจาก core features

1. Basic functionality
2. Add features ทีละอย่าง
3. Polish และ improve

2. Be Specific

❌ "Make an app"
✅ "Create a task management app with:
    - User accounts
    - Project folders
    - Task cards with due dates
    - Priority levels (high, medium, low)"

3. Reference Examples

"Create a dashboard like:
- Sidebar navigation (like Notion)
- Card-based layout (like Trello)
- Dark theme (like Discord)"

4. Review Generated Code

Always:
- ตรวจสอบ security
- Review business logic
- Test edge cases
- Check error handling

Use Cases

Perfect For

✅ Best use cases:
- MVPs and prototypes
- Small to medium apps
- Learning projects
- Quick experiments
- Client demos
- Hackathons

Consider Alternatives For

⚠️ May need different tools:
- Large enterprise apps
- Complex backends
- Heavy data processing
- Native mobile apps
- Custom infrastructure

Tips & Tricks

1. Use Framework Starters

"Create a Next.js app with..."
"Build using Vite + React..."
"Make an Express.js API..."

2. Ask for Best Practices

"Create this following best practices:
- TypeScript
- Error handling
- Input validation
- Responsive design"

3. Request Documentation

"Add README with:
- Setup instructions
- API documentation
- Environment variables needed"

สรุป

bolt.new Highlights:

1. Browser-based: ไม่ต้องติดตั้งอะไร
2. Full-Stack: Frontend + Backend
3. Instant: WebContainers = เร็วทันที
4. AI-Powered: สร้างจาก prompts
5. Deploy Ready: Export และ deploy ง่าย

Best For:

• Rapid prototyping
• Learning and experimenting
• Small to medium apps
• Quick demos

Remember:

• Start simple, iterate
• Be specific in prompts
• Review generated code
• Test thoroughly

---

อ่านเพิ่มเติม:

• What is Vibe Coding
• Replit Agent Guide
• v0.dev Guide