# Zui

Node-based editor (React Flow) for configs, variables, and rendering (PlantUML, Markdown, etc.). Optional Node.js backend API for demos or future features (e.g. todos CRUD).

## Project layout

```
my-app/
├── frontend/           # React app (Vite, TypeScript)
│   ├── Dockerfile      # Multi-stage for prod (build → Nginx)
│   ├── Dockerfile.dev  # Dev with hot reload
│   ├── src/
│   ├── public/
│   ├── nginx.conf
│   └── package.json
├── backend/            # Node.js/Express API
│   ├── Dockerfile
│   ├── src/
│   │   └── index.js
│   └── package.json
├── docker-compose.yml
├── .dockerignore
└── .gitignore
```

Ignored by git: `node_modules`, `dist`, `.env`, `.env.*` (see [.gitignore](.gitignore)). Local Docker overrides: `docker-compose.override.yml` (optional, not committed).

---

## Run locally (dev)

**Frontend only:**

```bash
cd frontend && npm install && npm run dev
# → http://localhost:3000
```

**Frontend + backend** (so the app can show “Backend API: N todos”):

```bash
# Terminal 1 – backend
cd backend && npm install && npm run dev
# → http://localhost:8080

# Terminal 2 – frontend
cd frontend && npm install && npm run dev
# → http://localhost:3000 (Vite proxies /api/todos to backend)
```

---

## Run with Docker

```bash
docker compose up --build
```

- **Frontend**: http://localhost:3000 (Nginx; `/api/*` proxied to backend).
- **Backend**: http://localhost:8080 (Express).

Environment variables (backend service):

| Variable     | Default                    | Description |
|-------------|----------------------------|-------------|
| `PORT`      | `8080`                     | Backend listen port. |
| `CORS_ORIGIN` | `http://localhost:3000`  | Allowed origin for CORS. |

For self-hosting (e.g. Tailscale/HTTPS): set `CORS_ORIGIN` to your frontend URL; put Caddy or Nginx in front for TLS if needed.

**Dev with Docker (frontend hot reload):** use `frontend/Dockerfile.dev` and mount `./frontend` as a volume, or run `cd frontend && npm run dev` locally.

---

## Scripts

| Command | Description |
|--------|-------------|
| `cd frontend && npm run dev` | Vite dev server. |
| `cd frontend && npm run build` | Build frontend for production. |
| `cd frontend && npm run preview` | Preview production build. |
| `cd backend && npm run dev` | Backend with `--watch`. |
| `cd backend && npm start` | Backend production run. |
| `docker compose up --build` | Run frontend + backend in Docker. |

---

## Backend API (no DB)

| Method | Path | Description |
|--------|------|-------------|
| GET    | `/api/todos`     | List all todos. |
| GET    | `/api/todos/:id` | Get one todo. |
| POST   | `/api/todos`     | Create (`{ "title": "...", "completed": false }`). |
| PUT    | `/api/todos/:id` | Update. |
| DELETE | `/api/todos/:id` | Delete. |
| GET    | `/health`        | Health check (e.g. for Docker). |

Data is in-memory (resets on restart). Add a JSON file or DB later if needed.