Andriy Oblivantsev
8a3cd2c27e
CI / test (push) Successful in 5s
- Add Import pk from camera: scan QR → restore pb → auto login → refresh - Add scanner.js (jsQR) for camera QR decode - QR visibility: pk shown by default, pb hidden by default (toggles) - Update docs/frontend-development.md with scanner, Import pk, QR behavior Made-with: Cursor
73 lines
2.2 KiB
Markdown
73 lines
2.2 KiB
Markdown
# 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)
|
|
└── scanner.js # QR scanner from camera (Import pk)
|
|
```
|
|
|
|
### 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
|
|
- `scanner.js` — imports `jsQR` from esm.sh for camera scan
|
|
|
|
### 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 (pk shown by default, pb behind toggle), restore pb from pk, **Import pk from camera** (scan QR → restore pb → auto login → refresh collections), 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 |
|