Skip to main content
VibeStacks

Loading the search index…

EntryTop pick

Vite + React

The most versatile frontend starting point. Vite runs the dev server and build, React handles the UI, and AI knows this pair best.

Last reviewed
Applies to
Vite 8.3 · React 19.3
Website
vite.dev

Good for

  • Tools, dashboards, and single-page apps used after sign-in
  • Your first frontend project: the fewest concepts and the easiest debugging
  • Projects with a separate backend (or a hosted backend such as Supabase)

Not for

  • Content sites that depend on search indexing and server-rendered first paint (consider Next.js or Astro)
  • Full-stack apps that need server endpoints in the same project

Vite is the default build tool for frontend projects today: the dev server starts almost instantly and the page updates as soon as you save. React is the most widely used UI library and the frontend technology AI has seen the most, which means the React code it writes is the most reliable.

Why it is our top pick

  • The fewest concepts. One index.html, one entry file, and your components. No server components, caching strategies, or rendering modes to understand first, so neither you nor the AI gets confused.
  • Easy to debug. Everything runs in the browser, and the dev tools show you all of it.
  • The simplest deployment. The build output is static files that any static host can serve.
  • Room to grow. Add React Router or TanStack Router when you need routing and data loading; if you truly need server rendering later, most component code moves over.

Getting started

pnpm create vite my-app --template react-ts
cd my-app
pnpm install
pnpm dev

Then add three things: Biome (code standards), Vitest (unit tests), and an AGENTS.md (see the souvenir below).

Trade-offs to know

A single-page app renders its first screen only after the browser runs the JavaScript, which is worse for search indexing and first-paint speed than server rendering. That matters for blogs, docs, and marketing pages; for tools used after sign-in, it rarely does.

Souvenir

Take it home to your AI

Drop this AGENTS.md into your project, or paste it straight to your AI coding assistant.

AGENTS.md
# AGENTS.md

## Stack
- Vite + React + TypeScript (strict), pnpm
- Tests: Vitest (unit), Playwright (end-to-end)
- Code standards: Biome

## Commands
- Dev: `pnpm dev`
- Build: `pnpm build`
- Unit tests: `pnpm test`
- All checks: `pnpm check` (Biome + typecheck + tests)

## Structure
- `src/features/<feature>/`: components, state, and logic for one business feature, kept together
- `src/components/`: components reused by two or more features
- `src/lib/`: pure functions with no React dependency; must have unit tests

## React conventions
- Function components and hooks only; component files use PascalCase.
- Keep state in the nearest component that uses it; lift it only when pages share it.
- Async requests handle loading, error, and empty states, and prevent double submission.
- Do not touch the DOM directly; use refs when needed.

## Definition of done
- `pnpm check` passes; new logic has unit tests; changes to user flows update the end-to-end tests.

Related

  • Article

    The structure of a frontend project

    Start from the folders. A scaffold creates the skeleton, the framework decides how pages are organized, and tests and code standards guard every AI change.

  • EntryAlternative

    Next.js

    A React framework with server rendering and full-stack features. The most capable option, and the one with the most concepts. Choose it when you need it.

  • EntryTop pick

    Vitest + Playwright

    Vitest runs unit tests, and Playwright runs user flows in a real browser. The more the AI changes, the more you need both layers.

  • EntryTop pick

    shadcn/ui

    Not a component library but component source you copy into your repository. Accessibility comes from proven primitives; the look is yours to change with Tailwind.