architecture

Summary

How Aakalan is built, in four small diagrams and one overview, opened from the architecture chip in the bar.

Raw wireframes

• .context/designs/mobile/architecture/<overview|who-uses|how-it-works|backend|relies-on>.html — the screens
• .context/designs/architecture/<name>.json — each diagram's source; <name>.html is drawn from it by Archify

Why it is drawn this way

• One question per diagram: who uses it, how the app is built, the backend, what it relies on. The backend is Firebase only; there is no server of our own.
• How the app is built follows the data seam: screens read src/data/hooks.ts, writes land in the store first, and sync.ts carries them to Firestore.
• These screens are not in the phone frame: a 390px frame is too narrow to read a diagram, so they fill the window under the bar.
• The diagrams are generated assets: edit the .json, then run archify finalize architecture <name>.json <name>.html --quality showcase inside designs/architecture/.
• The overview is architecture and cost only: the stack with versions and the monthly cost. Why each choice was made is in the product's own CLAUDE.md.

Related

• balances · settle-pay · plans

Sources

• CLAUDE.md, package.json, firestore.rules, .context/ops/setup.md