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:

Authentication

Login, signup, and password reset screens pre-wired to your auth provider.

API Client

A type-safe client pre-configured with your API URL and auth headers.

Data Browser

Auto-generated CRUD tables for every entity in your blueprint.

Modern UI

Built with shadcn/ui components and Tailwind CSS.

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:

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

Design Docs

Get LLM-optimized documentation for building custom frontends.