# Project structure

> What files make up a Vaulter app and where things live.

If you open the Code tab, it helps to know how a Vaulter app is laid out. This is a working map for finding your way, not an exhaustive reference.

## A modern web app

A Vaulter app is a standard, modern single-page web application built with React, TypeScript, and Tailwind CSS. If you have worked with component-based front ends, it will feel immediately familiar. The layout follows convention:

- **`src/pages/`.** The screens of your app. Each page is a component; a landing page lives in `LandingPage.tsx`, and so on.
- **`src/components/`.** The reusable building blocks pages are made of: cards, forms, navigation.
- **`src/App.tsx`.** The app's route map, deciding which page shows for which URL. In apps with sign-in, this is also where the signed-out redirect lives.
- **`src/lib/`.** Shared plumbing, including the database client your app uses to read and write data. Parts of this are managed by the platform and refreshed at build time, which is why your database connection always works without you configuring it.
- **`supabase/migrations/`.** Your app's schema history as SQL files. Saving a new migration applies it automatically, with [guardrails and self-healing](/docs/data/database).
- **`.env`.** The app's environment: its database address, its app identity, and the keys it needs. Platform-managed values are stamped on every build; your own secrets arrive via [the Vault](/docs/data/secrets-vault), not by hand-editing this file.

## Styling

Look and layout are done with Tailwind utility classes directly on the markup. This is also what makes [Edit Mode](/docs/building/chat-vs-edit-mode) precise: your visual edits resolve to the same utility classes a developer would write, snapped to the app's design scale.

## You do not have to memorize this

The agent knows the structure and keeps it consistent: new pages land in `pages/`, shared pieces get extracted to `components/`, schema changes become migrations. You mostly need this map when reading code to understand something.

The fastest way to find anything specific is still to ask:

> Where is the code that handles the checkout page?

The agent will point you to the right file and explain what it does.

## Editing safely

Before you change code by hand, read [The code editor](/docs/developer/code-editor) for the one caveat that matters most.