Intermediate

Building Apps with Bolt.new

Learn to build various types of web applications: landing pages, dashboards, CRUD apps, APIs, and full-stack projects with authentication and databases.

Building a Landing Page

Landing pages are a great starting point. Here's an effective prompt:

Build a modern landing page for a SaaS product called "TaskFlow" -
a project management tool. Include:
- Hero section with headline, subheadline, and CTA button
- Features section with 4 feature cards and icons
- Pricing section with 3 tiers (Free, Pro, Enterprise)
- Testimonials section with 3 customer quotes
- Footer with links
Use a professional blue and white color scheme with smooth
scroll animations. Make it fully responsive.

Building a Dashboard

Dashboards combine data visualization with interactive controls:

Create an analytics dashboard with:
- Sidebar navigation with icons
- Top stats bar showing KPIs (revenue, users, orders, growth)
- Line chart for revenue over the last 12 months
- Bar chart for sales by category
- Recent orders table with pagination
- Dark theme with accent colors
Use React with Recharts for the charts. Include mock data.

Building a CRUD App

CRUD (Create, Read, Update, Delete) applications are the foundation of most web apps:

Build a contacts management app with:
- Add new contacts (name, email, phone, company)
- View all contacts in a searchable table
- Edit contact details inline
- Delete contacts with confirmation
- Sort by any column
- Store data in localStorage for persistence
Use React with a clean, minimal design.

Building an API

Bolt.new can generate backend APIs using Express.js:

Create a REST API with Express.js for a bookstore:
- GET /books - list all books
- GET /books/:id - get a single book
- POST /books - add a new book (title, author, ISBN, price)
- PUT /books/:id - update a book
- DELETE /books/:id - delete a book
Include input validation, error handling, and CORS support.
Use in-memory storage with sample data.

Adding Authentication

You can integrate authentication into your apps through conversation:

Add user authentication to this app:
- Sign up with email and password
- Login page with form validation
- Protected routes that require login
- User session management
- Logout button in the header
- Use Supabase for the auth backend

Database Integration

Connect your apps to real databases:

Multi-Page Applications

Build applications with routing and multiple views:

Add routing to create a multi-page application:
- Home page (/) with overview content
- Products page (/products) with a grid of product cards
- Product detail page (/products/:id) with full information
- About page (/about) with team and company info
- Contact page (/contact) with a form
Use React Router with smooth transitions between pages.

Adding Components Iteratively

The best approach for complex apps is to build incrementally:

1. Start with the core: Build the main page and primary feature
2. Add navigation: Request routing and page structure
3. Build secondary features: Add one feature at a time
4. Styling and polish: Refine the design after functionality works
5. Add data persistence: Connect a database or local storage last