24 Bolt.new Prompts for Full-Stack Apps (2026)

Before writing any code, outline a build plan so we agree on scope. Do NOT build yet.

App: [a team task manager] used by [small product teams], to [plan work and track what ships this week].

In the plan, list:
- Core entities and their fields ([Workspace, User, Project, Task]).
- The pages and the primary action on each.
- The auth story (who logs in, what they can see).
- The Supabase tables and key relationships.
- What is explicitly OUT of scope for v1 (no billing, no notifications yet).

We'll build on Vite + React + TypeScript + Tailwind with Supabase for the database and auth. Remember this runs in WebContainer, so no local database — use hosted Supabase.

Output only the plan as markdown. I'll review it, then ask you to build the shell.

Build the shell of a full-stack SaaS app, following the plan we agreed on.

Product: [a team task manager] for [product teams], used on desktop to run the week at a glance.

Pages:
- Marketing home at / with a hero, feature grid, and a "Get started" CTA.
- Authenticated app at /app with a sidebar (Dashboard, Projects, Settings).
- Dashboard: stat cards ([open tasks, due this week, completed]) and a recent-activity list.

Stack: Vite + React + TypeScript + Tailwind. Supabase for the Postgres database and auth. This runs in WebContainer — no local DB, no native binaries; use hosted Supabase and read all keys from env.

Data model: tables for [Workspace, User, Project, Task] with the fields from the plan and foreign-key indexes. Seed 5 sample projects so nothing looks empty.

Design vibe: elegant, minimalist, high-tech. Primary [#4f46e5], rounded corners, generous spacing. Responsive down to 360px.

Build the shell and the Dashboard reading live data first. Don't build billing or notifications yet — I'll add features one at a time.

Add multi-tenant workspaces to the app.

Pages & flow:
- A workspace switcher in the sidebar header.
- /app/settings/members: a table of members (name, email, role), an "Invite by email" form, and a remove action.
- Roles: [owner, admin, member]. Owners and admins can invite and remove; members can't.

Used by [a workspace owner], when onboarding teammates, to control who has access.

Data model: add [Membership] (user_id, workspace_id, role) and [Invite] (email, workspace_id, token, status) tables in Supabase. Scope EVERY query to the current workspace — a user never sees another workspace's data.

Invite flow: create an invite row and stub the email send behind lib/email so it's easy to wire later. Enforce permissions in the data layer, not just the UI.

Keep the current stack (Vite + React + TypeScript + Tailwind + Supabase). Only edit the files needed for this feature.

Build an analytics dashboard page at /app/analytics that reads real rows from Supabase.

Product surface:
- A date-range picker (last 7 / 30 / 90 days) that drives every widget.
- KPI cards: [total events, active users, conversion rate, avg session length] with a % change vs the previous period.
- A line chart of [events over time] and a bar chart of [top pages] using [Recharts].
- A paginated table of [recent events].

Used by [a founder], each morning, to decide where to focus that day.

Constraints:
- Aggregate in the database via Supabase queries/RPC — never fetch all rows and reduce in the browser.
- Add an [events] table if it doesn't exist and seed 30 days of realistic sample data.
- Vite + React + TypeScript + Tailwind. Loading skeletons per widget. Responsive to 360px.

This runs in WebContainer, so keep everything JS-native and hosted (Supabase) — no local services.

Add authentication with Supabase Auth.

Pages & flow:
- /login with email + password and "Continue with GitHub" (OAuth).
- /signup, sign-out, and a session that persists across refreshes.
- Everything under /app requires a session; unauthenticated visitors are redirected to /login.

Used by [returning users], at the start of a session, to get into their own data.

Constraints:
- Use Supabase Auth. I'll click "Connect Supabase" — add every required env var to .env.example, names only, no values.
- A useUser() / getCurrentUser() helper usable across the app; scope data queries to the signed-in user.
- Guard the /app routes in a route wrapper, not just by hiding links.
- Vite + React + TypeScript + Tailwind. Show clear inline errors on bad credentials.

Only edit the files needed for auth. Tell me which Supabase dashboard settings to enable to test.

Build an account settings area at /app/settings.

Product surface:
- Profile tab: name, avatar upload, timezone. Saves to Supabase.
- Security tab: change password and sign out everywhere.
- Danger zone: delete account with a typed-confirmation dialog.

Used by [any signed-in user], occasionally, to keep their account correct and safe.

Constraints:
- Avatar upload uses Supabase Storage; validate file type and max size before upload.
- All mutations are scoped to the current user; validate input with Zod.
- Account deletion cascades the user's rows and signs them out.
- Vite + React + TypeScript + Tailwind, tabbed layout. Toast on success and failure.

Only touch the settings pages and the storage/upload helper. Keep the rest of the app unchanged.

Replace password login with passwordless magic-link auth using Supabase Auth.

Pages & flow:
- /login with a single email field and a "Send magic link" button.
- A "check your email" confirmation state and an /auth/callback route that completes the session.
- First-time sign-in creates the user's profile row automatically.

Used by [consumer users] who don't want another password.

Constraints:
- Configure Supabase magic-link auth; add the redirect URL and keys to .env.example (names only).
- On first sign-in, upsert a [profile] row (user_id, email, created_at).
- Handle expired / already-used links with a clear error and a re-send option.
- Vite + React + TypeScript + Tailwind. Tell me exactly which Supabase dashboard settings to enable to test.

Scope edits to the login page, the callback route, and the auth helper only.

Add role-based access control on top of the existing Supabase auth. Roles: [owner, admin, member, viewer].

Product surface:
- A can(user, action, resource) helper in lib/authz that owns all permission logic in one place.
- Enforce in the data layer: [only owner/admin can delete; viewers are read-only]. Reject denied writes.
- In the UI, hide or disable actions the current role can't perform — but never rely on the UI as the gate.

Used by [an admin], to keep the right people out of the wrong actions.

Constraints:
- Add a role to the [membership] table.
- Add the check to every mutating operation — sweep the codebase and don't miss one.
- Keep the stack (Vite + React + TypeScript + Tailwind + Supabase). Don't change unrelated files.

Before editing, list the files that hold write operations, then apply the check to each.

Build a project tracker as a full-stack CRUD app on Supabase Postgres.

Product surface:
- /projects: a table of projects (name, status, owner, updated) with sort and an empty state.
- A "New project" dialog with a validated form.
- /projects/[id]: detail view with inline edit and a delete action (confirm first).

Used by [an agency lead], through the week, to see what's in flight and what's stuck.

Data model: [Project] (id, name, status enum [planning|active|done], owner_id, created_at, updated_at) with an index on status.

Constraints:
- All reads and writes go through a data-access module; validate input with Zod, reused on the form and before write.
- Refresh the list after a write so the table stays current.
- Vite + React + TypeScript + Tailwind. Table + dialog + form. Responsive.

Runs in WebContainer — Supabase only, no local DB. Only edit files for this feature.

Build a lightweight CRM as a full-stack app on Supabase.

Product surface:
- /contacts: searchable list (name, company, email, last touched).
- Contact detail: profile fields, a timeline of notes, and a "deals" panel.
- /deals: a kanban board with columns [lead, qualified, won, lost]; drag a card to change stage (persist on drop).

Used by [a solo founder doing sales], between calls, to remember context and move deals forward.

Data model: [Contact], [Deal] (contact_id, stage, amount), [Note] (contact_id, body, created_at). Foreign-key indexes.

Constraints:
- Stage changes and note creation persist to Supabase; optimistic UI on the board.
- Push full-text contact search into the query, not the client.
- Vite + React + TypeScript + Tailwind. Design vibe: clean and calm. Primary [#0f766e].

Build the contacts list and detail first, then the deals board. One feature per message.

Build an inventory management app, full-stack, on Supabase Postgres.

Product surface:
- /items: a paginated, filterable table (SKU, name, category, quantity, price). Low-stock rows highlighted.
- Add / edit item in a dialog with validation.
- Bulk actions: adjust quantity, change category.
- A "stock summary" header: total items, total value, low-stock count.

Used by [a small warehouse manager], during a stock count, to keep quantities accurate.

Data model: [Item] (sku unique, name, category, quantity int, price numeric, updated_at); index category and name.

Constraints:
- Pagination and case-insensitive search both run in the Supabase query, not in memory.
- Validate mutations with Zod; refresh the list after writes.
- Vite + React + TypeScript + Tailwind. Responsive to 360px.

Only edit files for this feature.

Build a mini CMS for [blog posts], full-stack, on Supabase.

Product surface:
- /admin/posts: list with status badges (draft / published), search, and "New post".
- Editor at /admin/posts/[id]: title, slug (auto from title, editable), a markdown body with live preview, cover image, and tags.
- Publish / unpublish toggle that sets published_at.
- Public /blog and /blog/[slug] that render only published posts.

Used by [a marketing writer], to draft and ship posts without touching code.

Data model: [Post] (title, slug unique, body, status, cover_url, published_at) + [Tag] many-to-many. Index slug and status.

Constraints:
- Cover images go to Supabase Storage. Draft rows never appear on the public site.
- Vite + React + TypeScript + Tailwind. Responsive.

Build the admin list and editor first, then the public pages. Scope each message to the pages it touches.

Build a real-time chat app, full-stack, using Supabase Realtime.

Product surface:
- A channel list on the left and a message thread on the right.
- An auto-growing composer; new messages from anyone appear instantly for everyone in the channel.
- Presence: show who's online in the current channel; a "typing…" indicator.

Used by [a small team], throughout the day, to talk without leaving the app.

Data model: [Channel] and [Message] (channel_id, user_id, body, created_at) on Supabase. Scope messages to the channel.

Constraints:
- Subscribe to Supabase Realtime for new-message and presence events; unsubscribe on unmount.
- Persist every message; optimistic send with a pending state.
- Vite + React + TypeScript + Tailwind. Keyboard submit. Responsive to 360px.

This runs in WebContainer, so use Supabase Realtime (websockets to the hosted service) — no self-hosted socket server. Only edit chat files.

Add Stripe payments and subscriptions to the app. Use the current Stripe API.

Product surface:
- A /pricing page with [Free / Pro / Team] plans and an "Upgrade" button per paid plan.
- Upgrade creates a Checkout Session and redirects to Stripe.
- A billing page: current plan, "manage billing" (Stripe portal), and plan status.

Used by [a user ready to pay], to upgrade and manage their subscription.

Constraints:
- Create the Checkout Session in a Supabase Edge Function (or serverless route); a webhook verifies the signature and, on [checkout.session.completed / subscription updated], writes the plan to the user's row in Supabase.
- Handle canceled checkout, failed payment, and expired session paths.
- Store price/product IDs and keys in env (test keys in .env.example, names only) — never inline secrets.
- Vite + React + TypeScript + Tailwind.

Runs in WebContainer, so keep the backend serverless (Supabase Edge Functions). Tell me which Stripe dashboard settings and env vars I must set to test.

Add transactional email to the app using [Resend].

Send email on these events:
- [Welcome email on first signup].
- [Invite email when a workspace owner invites a teammate], with the accept link.
- [A weekly digest] triggered from a scheduled job.

Constraints:
- Put all sending behind a lib/email module with typed functions (sendWelcome, sendInvite, sendDigest) so callers don't touch the provider directly.
- Send from a serverless route / Supabase Edge Function; read the [Resend] API key and from-address from env (names in .env.example).
- Use plain, well-formatted HTML templates with a text fallback; no external template service.
- Log failures and don't block the main flow if an email fails.

Vite + React + TypeScript + Tailwind. Runs in WebContainer, so send from a serverless function, not a long-running mail server. Only edit the email module and the call sites.

Add file upload to [the project detail page] using Supabase Storage.

Product surface:
- A drag-and-drop upload zone plus a file picker; show per-file progress.
- An attachments list (name, size, uploaded date) with download and delete.
- Image files get a thumbnail preview.

Used by [a project member], to attach documents and images to a project.

Constraints:
- Upload to a Supabase Storage bucket; store metadata in an [Attachment] table (project_id, path, name, size, mime).
- Validate type and max size before upload; reject anything over [10MB].
- Scope reads/deletes so a user only sees attachments for projects they can access.
- Vite + React + TypeScript + Tailwind. Responsive.

This runs in WebContainer — use Supabase Storage, not the local filesystem. Only edit the upload component and its data helper.

Build a live collaborative kanban board where changes sync across users in real time.

Product surface:
- Columns [To do, Doing, Done] with draggable cards; drag to reorder or move a card.
- When one user moves a card, every other viewer sees it move within a second.
- Card detail: title, description, assignee. Show which users are viewing the board (presence).

Used by [a small team], during standup, to update work together.

Data model: [Board], [Column], [Card] (column_id, position, title, description, assignee_id) on Supabase.

Constraints:
- Persist moves to Supabase and broadcast via Supabase Realtime; apply remote changes optimistically and reconcile on the server value.
- Reorder logic keeps positions stable without renumbering every card.
- Vite + React + TypeScript + Tailwind. Responsive.

WebContainer runtime — use Supabase Realtime for sync, no custom socket server. Only edit board files.

Build a booking app for [appointments with a provider], full-stack, on Supabase.

Product surface:
- Public booking page: pick a service, see available slots on a calendar, book with name + email.
- Provider dashboard: set weekly availability, block dates, view upcoming bookings, cancel.
- Confirmation screen and a confirmation email (via lib/email).

Used by [a client] booking time and [a provider] managing their calendar.

Data model: [Service] (name, duration, price), [Availability] (weekday, start, end), [Booking] (service_id, start_at, end_at, customer) on Supabase.

Constraints:
- Compute open slots from availability minus existing bookings — never double-book; enforce with a uniqueness/overlap check on write.
- Timezone-aware; re-validate the slot is still free at booking time.
- Vite + React + TypeScript + Tailwind. Calendar + form. Responsive to 360px.

Runs in WebContainer — Supabase only. Build the public booking flow first, then the provider dashboard.

I imported a Figma design for [the dashboard page]. Turn it into working React and wire it to real data.

Do this:
- Build the page from the imported design with Vite + React + TypeScript + Tailwind; match the layout, spacing, and colors as closely as the design allows.
- Replace every placeholder value with real data from Supabase: [KPI cards from the events table, the recent-activity list from the activity table].
- Keep it responsive down to 360px even though the design is desktop-only — reflow the columns to stack.
- Extract repeated pieces (cards, list rows) into small components.

Used by [a founder] on desktop to check the numbers.

Don't restyle beyond what the design shows, and only edit the dashboard page and its new components. Ask me before adding any dependency the design implies but doesn't specify.

Make a focused change — ONLY edit [src/components/Cart.tsx]. Do not touch any other file.

Change: [add a quantity stepper to each line item and recompute the subtotal, tax, and total as quantities change]. Keep the existing styling and props.

If this truly requires a change in another file (e.g. a type or a shared util), STOP and tell me which file and why before editing it — don't change it silently.

After the edit, show me a short summary of exactly what changed in [Cart.tsx].

The auth flow and the Supabase schema are done and I've locked those files in the editor. Do not modify locked files.

Add this feature without changing anything that's done:
- [A notifications dropdown in the app header]: an unread count badge, a list of recent notifications, and "mark all read".

Constraints:
- New [Notification] table (user_id, type, body, read, created_at) via a new migration — do NOT alter existing tables.
- New components only; reuse the existing data-access patterns and the current auth helper.
- Vite + React + TypeScript + Tailwind.

If the feature seems to need a change to a locked file, stop and explain the smallest unlock required before proceeding.

Build this app in ordered steps — do them one at a time and show me each before the next. Do NOT skip ahead.

App: [a habit tracker] on Vite + React + TypeScript + Tailwind, Supabase for DB and auth. Runs in WebContainer, so hosted Supabase only.

1. Create Supabase tables: [Habit] (name, cadence, color) and [Checkin] (habit_id, date). Seed sample data.
2. Build the /habits list page reading real habits, with an "Add habit" dialog (validated with Zod).
3. Build the habit detail page with a monthly heatmap of check-ins.
4. Add a "check in for today" toggle with optimistic UI; refresh after write.
5. Add a dashboard with current streaks computed in the query.

Keep the design vibe consistent: playful but clean, primary [#059669], rounded corners. After each step, list what's done and what's next, and wait for my go-ahead.

The app is ready to ship to Netlify. Get it deploy-ready — I'll click the Deploy button myself.

Do this:
- Produce a Netlify deploy checklist: the build command, the publish directory, and the full list of environment variables the deployment needs (from .env.example) with a one-line note on where each value comes from.
- Confirm every Supabase and provider key is read from env, never hardcoded — flag anything that isn't.
- Add a lightweight health check the app exposes so I can confirm the deploy is live.
- Add any Netlify config file the build needs (redirects for the SPA routes, etc.).

Don't put any real secret values in the repo. Then walk me through the exact clicks: connect Supabase, set the env vars in Netlify, and hit Deploy.

I'm going to export this project to GitHub with the built-in GitHub button. Get the repo ready to hand off.

Do this:
- Write a clear README: what the app does, the stack (Vite + React + TypeScript + Tailwind + Supabase), how to run it locally outside Bolt, and how to deploy.
- Make sure .env.example lists every variable with names only; confirm no real secrets are committed and .gitignore excludes .env.
- Document the Supabase schema and the migrations so a new developer can recreate the database.
- Add a short "architecture" note: the main folders, where data access lives, and where auth is enforced.

Don't change app behavior — this is documentation and hygiene only. List anything that still hardcodes a value that should be an env var.