> ## Documentation Index
> Fetch the complete documentation index at: https://backdrift.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# React Frontend

> A ready-to-use React application hosted for you.

Most backend tools leave you with just a JSON API. Backdrift provisions a complete **React Frontend** so you can interact with your data immediately.

## What's Included

The generated frontend is a **Vite + React** application, written in TypeScript, using **shadcn/ui**. It includes:

<CardGroup cols={2}>
  <Card title="Authentication" icon="lock">
    Login, signup, and password reset screens pre-wired to your auth provider.
  </Card>

  <Card title="API Client" icon="code">
    A type-safe client pre-configured with your API URL and auth headers.
  </Card>

  <Card title="Data Browser" icon="table">
    Auto-generated CRUD tables for every entity in your blueprint.
  </Card>

  <Card title="Modern UI" icon="palette">
    Built with shadcn/ui components and Tailwind CSS.
  </Card>
</CardGroup>

## How It's Hosted

We deploy your frontend to a global Content Delivery Network (CDN) using **AWS Amplify**:

1. We generate React code based on your schema
2. A serverless build pipeline compiles the assets
3. Static files are pushed to edge locations worldwide

Your frontend URL looks like: `https://main.abc123xyz.amplifyapp.com`

## Rebuilding the Frontend

When your schema changes, click **Rebuild Frontend** to:

1. Regenerate React components for new/modified entities
2. Update the API client with new endpoints
3. Rebuild and redeploy to Amplify

This takes about 2-3 minutes.

## What the UI Looks Like

### Login Screen

```
┌────────────────────────────────────┐
│         Task Manager               │
│                                    │
│  Email: [________________]         │
│  Password: [______________]        │
│                                    │
│       [Sign In]                    │
│                                    │
│  Don't have an account? Sign up    │
└────────────────────────────────────┘
```

### Data Browser

```
┌────────────────────────────────────────────────────┐
│ Tasks                                    [+ New]   │
├────────────────────────────────────────────────────┤
│ Title          │ Priority │ Status   │ Actions    │
├────────────────┼──────────┼──────────┼────────────┤
│ Fix login bug  │ High     │ Active   │ [Edit] [🗑] │
│ Add dark mode  │ Medium   │ Pending  │ [Edit] [🗑] │
│ Update docs    │ Low      │ Done     │ [Edit] [🗑] │
└────────────────────────────────────────────────────┘
```

## Customization

This isn't a proprietary "no-code" interface—it's standard React code.

### Download Source

From the **Artifacts** tab, download `frontend.zip` containing:

```
frontend/
├── package.json
├── vite.config.ts
├── tailwind.config.js
├── src/
│   ├── App.tsx
│   ├── api/
│   │   └── client.ts       # Pre-configured API client
│   ├── components/
│   │   ├── auth/           # Login, signup, reset
│   │   └── entities/       # CRUD components per entity
│   └── pages/
│       └── ...
└── public/
```

### Extend It

Common customizations:

* Add custom pages or dashboards
* Modify the styling (Tailwind classes)
* Add charts and visualizations
* Integrate third-party components

### Self-Host

You can deploy the frontend yourself:

```bash theme={null}
unzip frontend.zip
cd frontend
npm install
npm run build
# Deploy dist/ to any static hosting
```

## Environment Variables

The frontend is configured with these environment variables at build time:

| Variable                    | Description           |
| --------------------------- | --------------------- |
| `VITE_API_URL`              | Your backend API URL  |
| `VITE_COGNITO_USER_POOL_ID` | Cognito User Pool ID  |
| `VITE_COGNITO_CLIENT_ID`    | Cognito App Client ID |
| `VITE_REGION`               | AWS region            |

<Card title="Design Docs" icon="book" href="/artifacts/design-docs">
  Get LLM-optimized documentation for building custom frontends.
</Card>