# Company Website Template

React + shadcn/ui + Express + PostgreSQL + Redis scaffold for SAAC deployment.

## Stack

- **Frontend**: React 19 + Vite + TypeScript + TailwindCSS v4 + shadcn/ui
- **Backend**: Express.js (Node 20)
- **Database**: PostgreSQL 16
- **Cache**: Redis 7
- **Deploy**: Docker Compose via `saac deploy`

## Structure

```
├── server.js              # Express backend (API + serves React build)
├── client/                # React frontend (Vite + shadcn/ui)
│   ├── src/
│   │   ├── components/ui/ # shadcn/ui components (Button, Card, Input, etc.)
│   │   ├── lib/utils.ts   # cn() utility for Tailwind class merging
│   │   ├── pages/         # Page components
│   │   ├── App.tsx        # Router
│   │   └── main.tsx       # Entry point
│   ├── components.json    # shadcn/ui config
│   ├── vite.config.ts     # Vite config with path aliases
│   └── package.json       # Client dependencies
├── docker-compose.yml     # PostgreSQL + Redis + App
├── Dockerfile             # Multi-stage: build React → serve with Express
└── package.json           # Server dependencies
```

## Development

```bash
# Install all dependencies
npm install && cd client && npm install && cd ..

# Run backend + frontend concurrently
npm run dev

# Or run separately:
npm run dev:server   # Express on :3000
npm run dev:client   # Vite on :5173 (proxies /api to :3000)
```

## Adding shadcn/ui Components

```bash
cd client
pnpm dlx shadcn@latest add dialog    # Add Dialog component
pnpm dlx shadcn@latest add table     # Add Table component
pnpm dlx shadcn@latest add select    # Add Select component
```

Import: `import { Button } from "@/components/ui/button"`

## Deploy

```bash
saac deploy
```

## API Routes

- `GET /health` — Health check (PostgreSQL + Redis)
- `GET /api/status` — Example API endpoint
- `GET /*` — React SPA (served from client/dist)