Quick React App Scaffolding with bolt.new
TIL: Get a Good First-Shot UI with bolt.new
I discovered a great way to quickly scaffold a React application with sensible defaults using bolt.new. You can give bolt.new a specific prompt to get exactly what you need.
Here’s the prompt I used to get a React + Vite + TypeScript setup with all the modern tooling:
Stack → React + Vite + TypeScript, Tailwind CSS, shadcn/ui, lucide-react, zustand, zod, tanstack/react-query, tanstack/react-table, react-hook-form
Data layer → read/write flat JSON files in `src/data` via an `ApiService.ts` wrapper whose methods mirror real REST calls (later swappable). Uses TanStack Query.
Auth → role enum [`superAdmin`,`admin`, `user`]; store currentRole in `AuthContext` using zustand, no real login yet.
Routing → React-Router v6.
UI → dark-mode support, responsive, use lucide icons & shadcn components. Color picker support for theming (primary/secondary color in settings page).
Folder scheme:
• `src/components` – reusable UI
• `src/features/<domain>` – ducks pattern per domain
• `src/data/*.json` – seed data
• `src/services/ApiService.ts`
• `src/lib` – shared code
<add your specifics here>
The folder structure follows modern best practices, and the tech stack is pretty decent. I usually do this to get a scaffold going. You can exclude the JSON file portions if you do want that Supabase integration. I usually don’t.
The workflow is simple:
- Go to https://bolt.new
- Paste in the prompt and include your spec
- Make initial edits directly in bolt.new to get it exactly how you want.
- Either have it commit the code to a repo or download the archive to continue yourself
This is my preferred approach for now and then I continue with Claude Code.