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
2.2 KiB
2.2 KiB
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
- Start the API:
go run ./cmd/api # or: docker compose up -d - 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 clientqr.js— importsqrcodefrom esm.shscanner.js— importsjsQRfrom esm.sh for camera scan
Build step for client
The demo app uses the pre-built client. After changing libs/geo-api-client:
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 for full API and integration flow.
Build & test
cd libs/geo-api-client
bun install
bun test
bun run build
Related docs
| Document | Description |
|---|---|
| TypeScript Frontend Integration | API client usage, integration flow, examples |
| Ed25519 Security Use Cases | Auth flows, registration, signatures |
| Geo Auth Backend Plan | Architecture and planning |