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 (see comments inside)
├── Dockerfile             # Multi-stage: build React → serve with Express
├── SAAC_DEPLOYMENT.md     # Deployment rules — READ THIS FIRST
└── package.json           # Server dependencies

Development

# Install all dependencies (postinstall auto-installs client deps)
npm install

# Run in dev mode (watches server.js + client/src, auto-rebuilds on changes)
npm run dev

# Or for local development with Vite HMR (browser hot-reload):
npm run dev:local    # Express :3000 + Vite :5173 concurrently

# Or run separately:
npm run dev:server   # Express on :3000 (with nodemon auto-restart)
npm run dev:client   # Vite on :5173 (proxies /api to :3000)

Adding shadcn/ui Components

cd client
npx shadcn@latest add dialog    # Add Dialog component
npx shadcn@latest add table     # Add Table component
npx shadcn@latest add select    # Add Select component

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

Deploy

saac deploy

See SAAC_DEPLOYMENT.md for deployment rules, common mistakes, and debugging commands.

API Routes

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