# Frontend Development

Development guide for the Momswap Geo demo app (`web/`) and TypeScript client (`libs/geo-api-client`).

## Demo app (`web/`)

Vue 3 + Vuetify 3 single-page app, no bundler. Served by the backend at `/web/`.

### Structure

```
web/
├── index.html    # Entry page, Vue/Vuetify from CDN
├── app.js        # Vue app, state, handlers
├── api.js        # GeoApiClient wrapper for browser
└── qr.js         # QR code generation (pk/pb keys)
```

### Running locally

1. Start the API:
   ```bash
   go run ./cmd/api
   # or: docker compose up -d
   ```
2. Open `http://localhost:8122/web/`

### Dependencies

- Vue 3 and Vuetify 3 from CDN (no npm install in `web/`)
- `libs/geo-api-client/dist/index.js` — built ESM client
- `qr.js` — imports `qrcode` from esm.sh

### Build step for client

The demo app uses the pre-built client. After changing `libs/geo-api-client`:

```bash
cd libs/geo-api-client
bun run build
```

With Docker, the image build runs this automatically.

### Features (use-cases test)

- Connection & Identity: API URL, key generation, pk/pb display, QR codes, restore pb from pk, register, login
- Collections: create, select, rename, remove
- Features: add point (lon/lat validation -180..180, -90..90), remove, list

## TypeScript client (`libs/geo-api-client`)

Reusable API client with Ed25519 signing. See [TypeScript Frontend Integration](typescript-frontend-integration.md) for full API and integration flow.

### Build & test

```bash
cd libs/geo-api-client
bun install
bun test
bun run build
```

## Related docs

| Document | Description |
|----------|-------------|
| [TypeScript Frontend Integration](typescript-frontend-integration.md) | API client usage, integration flow, examples |
| [Ed25519 Security Use Cases](ed25519-security-use-cases.md) | Auth flows, registration, signatures |
| [Geo Auth Backend Plan](geo-auth-backend-plan.md) | Architecture and planning |