Bolt - Cheatsheet

Overview

Estimated time: 10–15 minutes (reference material)

Quick reference guide for Bolt.new's AI-powered development features, templates, shortcuts, and rapid prototyping techniques. Perfect for fast full-stack development.

Quick Start Commands

Templates:
"Create a React app with TypeScript"
"Build a Next.js blog with Tailwind"
"Make a Vue.js dashboard"
"Create a Node.js API server"
"Build a Python FastAPI backend"

Quick Additions:
"Add authentication with login/signup"
"Add a database with Prisma"
"Create a contact form"
"Add dark mode toggle"
"Integrate Stripe payments"

Popular Templates

Frontend Stacks

# Modern React Stack
- React 18 + TypeScript
- Vite for bundling
- Tailwind CSS
- React Router
- State management options

# Next.js Full-Stack
- Next.js 14+ App Router
- TypeScript support
- Tailwind CSS
- Prisma database
- Authentication ready

# Vue 3 Composition
- Vue 3 + TypeScript
- Vite bundling
- Vue Router
- Pinia state management
- Component library ready

# Nuxt.js Universal
- Nuxt 3 framework
- SSR/Static generation
- Auto imports
- Built-in optimizations

Backend Templates

# Express.js REST API
- Express server
- TypeScript support
- Prisma ORM
- JWT authentication
- API documentation

# Fastify Alternative
- High-performance server
- Schema validation
- Plugin ecosystem
- TypeScript native

# FastAPI Modern
- FastAPI framework
- Automatic API docs
- Pydantic validation
- SQLAlchemy ORM
- Async support

# Flask Lightweight
- Flask framework
- SQLAlchemy integration
- RESTful design
- Extension ready

AI Prompting Patterns

Application Types

E-commerce Store:
"Create an e-commerce store with product catalog, shopping cart, user accounts, and payment processing using Stripe"

SaaS Dashboard:
"Build a SaaS dashboard with user authentication, subscription management, analytics charts, and team collaboration features"

Blog Platform:
"Create a blog platform with markdown editor, user comments, categories, search functionality, and admin panel"

Portfolio Site:
"Build a personal portfolio website with project showcase, contact form, dark mode, and smooth animations"

Todo Application:
"Create a todo app with drag-and-drop, categories, due dates, collaboration features, and data persistence"

Feature Additions

Authentication:
"Add user authentication with email/password, Google OAuth, and protected routes"

Database Integration:
"Connect to PostgreSQL database with user profiles, posts, and relationships using Prisma"

Payment Processing:
"Integrate Stripe for subscription payments with webhook handling and customer portal"

Real-time Features:
"Add real-time chat using WebSockets with message history and typing indicators"

Email Integration:
"Set up email sending with Nodemailer for notifications and password reset"

Styling and UI

CSS Framework Integration

Quick Styling:
"Style with Tailwind CSS using modern design patterns"
"Add responsive design with mobile-first approach"
"Create a design system with consistent colors and spacing"
"Add dark mode support with Tailwind"

Popular Options:
"Use Shadcn/ui components for React"
"Integrate Headless UI for accessibility"
"Add Material-UI for Google design"
"Use Chakra UI for simple components"

Advanced Styling

Animation and Interactions:
"Add smooth page transitions and hover effects"
"Create loading skeletons and micro-interactions"
"Implement parallax scrolling and animations"
"Add gesture support for mobile interactions"

Design Systems:
"Create a consistent design system with typography, colors, and components"
"Implement theme switching with CSS variables"
"Add accessibility features and ARIA labels"

Database and Backend

Database Options

PostgreSQL:
"Set up PostgreSQL with Prisma ORM"
"Create database schemas with relationships"
"Add migrations and seed data"

SQLite:
"Use SQLite for simple projects"
"Perfect for prototyping and development"

MongoDB:
"Connect to MongoDB with Mongoose"
"Design document schemas"
"Implement aggregation pipelines"

Firebase:
"Use Firebase for real-time database"
"Add authentication and storage"

API Patterns

RESTful APIs:
"Create RESTful endpoints with proper HTTP methods"
"Add request validation and error handling"
"Implement pagination and filtering"
"Add API documentation with Swagger"

GraphQL:
"Set up GraphQL server with Apollo"
"Define schemas and resolvers"
"Add subscriptions for real-time updates"
"Implement caching and optimization"

Deployment Commands

One-Click Deployments

Deployment:
- Automatic deployment from GitHub
- Environment variables setup
- Custom domains
- Preview deployments
- Edge functions support

Features:
- Static site deployment
- Form handling
- Function as a Service
- Split testing
- Analytics integration

Backend Deployment

Railway:
"Deploy Node.js backend to Railway with automatic scaling"

Heroku:
"Deploy to Heroku with PostgreSQL addon"

DigitalOcean:
"Set up DigitalOcean App Platform deployment"

AWS:
"Deploy to AWS with Lambda functions and RDS database"

Development Workflow

Project Management

Structure Requests:
"Organize files with clean folder structure"
"Separate components, hooks, and utilities"
"Create reusable component library"
"Set up absolute imports and path mapping"

Quality Tools:
"Add ESLint and Prettier configuration"
"Set up TypeScript strict mode"
"Add pre-commit hooks with Husky"
"Configure path mapping and aliases"

Testing Integration

Testing Setup:
"Add Jest and React Testing Library"
"Create component and integration tests"
"Set up E2E testing with Playwright"
"Add test coverage reporting"

API Testing:
"Add API testing with Supertest"
"Create database test fixtures"
"Add integration test suite"

Keyboard Shortcuts

Cmd+S / Ctrl+S      - Save changes
Cmd+Z / Ctrl+Z      - Undo
Cmd+Y / Ctrl+Y      - Redo
Cmd+F / Ctrl+F      - Find in file
Cmd+Shift+F         - Find in project
Cmd+/ / Ctrl+/      - Toggle comment

Cmd+` / Ctrl+`      - Toggle terminal
Cmd+Shift+` 		    - New terminal
Ctrl+C              - Stop running process
Ctrl+L              - Clear terminal
Up/Down arrows      - Command history

Performance Optimization

Frontend Optimization

Performance Requests:
"Optimize for Core Web Vitals with lazy loading"
"Add code splitting and dynamic imports"
"Implement service worker for caching"
"Optimize images with Next.js Image component"
"Add bundle analyzer and optimize dependencies"

React Optimization:
"Add React.memo for expensive components"
"Implement virtual scrolling for large lists"
"Use React.lazy for route-based code splitting"
"Optimize re-renders with useMemo and useCallback"

Backend Optimization

API Performance:
"Add database query optimization and indexing"
"Implement caching with Redis"
"Add rate limiting and request throttling"
"Set up connection pooling for database"

Monitoring:
"Add application performance monitoring"
"Implement health checks and status endpoints"
"Add logging with structured data"
"Set up error tracking and alerting"

Common Patterns

Form Handling

Form Libraries:
"Use React Hook Form for complex forms"
"Add form validation with Zod or Yup"
"Implement multi-step forms with progress"
"Add file upload with drag and drop"

Form Features:
"Add real-time validation feedback"
"Implement auto-save functionality"
"Create reusable form components"
"Add accessibility features for forms"

State Management

State Solutions:
"Use Zustand for lightweight state management"
"Implement Redux Toolkit for complex apps"
"Add React Query for server state"
"Use Context API for theme and auth state"

Data Fetching:
"Implement SWR for data fetching and caching"
"Add optimistic updates for better UX"
"Handle loading and error states consistently"
"Implement infinite scrolling with pagination"

Security Best Practices

Authentication Security

Security Measures:
"Implement secure JWT token handling"
"Add CSRF protection for forms"
"Use HTTPS for all communications"
"Add rate limiting for authentication endpoints"

Data Protection:
"Sanitize and validate all user inputs"
"Implement proper password hashing"
"Add SQL injection protection"
"Use environment variables for secrets"

Troubleshooting

Common Issues

Debug Commands

Helpful Prompts:
"Debug this error and provide a solution"
"Explain what's causing this build failure"
"Fix the TypeScript errors in this component"
"Optimize this slow database query"
"Add proper error handling to this function"

Integration Examples

Third-Party Services

Stripe Integration:
"Add Stripe checkout with webhooks"
"Implement subscription billing"
"Create customer portal"
"Handle payment failures"

Email Features:
"Send emails with SendGrid"
"Create email templates"
"Add transactional emails"
"Implement email verification"

Analytics and Monitoring

Analytics Setup:
"Add Google Analytics 4 tracking"
"Implement custom event tracking"
"Set up conversion tracking"
"Add user behavior analytics"

Monitoring:
"Set up error tracking with Sentry"
"Add performance monitoring"
"Implement uptime monitoring"
"Create status page for services"

Advanced Features

Real-time Applications

Real-time Features:
"Add WebSocket support for live updates"
"Implement real-time chat application"
"Create collaborative editing features"
"Add live notifications system"

Progressive Web App:
"Convert to PWA with service worker"
"Add offline functionality"
"Implement push notifications"
"Create app-like experience"

Best Practices

Next Steps

Continue your Bolt.new journey:

• Bolt - Introduction — Complete platform overview
• Bolt - Full-Stack Development — Advanced application building
• AI Agents - Comparison Matrix — Compare with other platforms