docs & feat: update project plan to E2E encrypted server storage & initialize monorepo client/server codebases
This commit is contained in:
Regular → Executable
+23
-13
@@ -13,9 +13,12 @@ We recommend a **React + TypeScript + Vite** stack wrapped with **vite-plugin-pw
|
||||
| Technology | Version | Purpose | Why Recommended |
|
||||
|------------|---------|---------|-----------------|
|
||||
| **React** | 18.x / 19.x | UI Library | Component-driven architecture allows building a modular, reactive UI that easily handles state transitions for logbook forms. |
|
||||
| **TypeScript** | 5.x | Language | Enforces strict type safety across logbook entries and crew models, preventing runtime errors. |
|
||||
| **Vite** | 5.x | Build Tool | Extremely fast bundler and dev server; offers direct support for PWAs via plugins. |
|
||||
| **TailwindCSS** / **Vanilla CSS** | 3.x / 4.x | Styling | Allows responsive, adaptive styling to match Android/iOS aesthetics and handles mobile viewport constraints. |
|
||||
| **TypeScript** | 5.x | Language | Enforces strict type safety across client and server. |
|
||||
| **Vite** | 5.x | Build Tool | Fast client packager and Service Worker compiler. |
|
||||
| **Node.js (Express)** | 20.x | Backend Server | Lightweight API backend to handle WebAuthn challenges and database storage. |
|
||||
| **PostgreSQL** | 16.x | Relational DB | Robust storage of credentials and E2E-encrypted JSON payloads. |
|
||||
| **Prisma** | 5.x | ORM | Type-safe SQL database client interface. |
|
||||
| **TailwindCSS** / **Vanilla CSS** | 3.x / 4.x | Styling | Responsive styling matching iOS/Android. |
|
||||
|
||||
### Supporting Libraries
|
||||
|
||||
@@ -23,7 +26,10 @@ We recommend a **React + TypeScript + Vite** stack wrapped with **vite-plugin-pw
|
||||
|---------|---------|---------|-------------|
|
||||
| **Dexie.js** | 4.x | IndexedDB Wrapper | Required for robust, structured offline-first storage of ship data and log entries. |
|
||||
| **vite-plugin-pwa** | 0.20.x | PWA / Service Worker | Handles automatic service worker registration, offline caching of assets, and install prompts. |
|
||||
| **react-i18next** | 14.x | Multilingual (l18n) | Seamless translation management for German and English with automatic language detection. |
|
||||
| **react-i18next** | 14.x | Multilingual (l18n) | Seamless translation management for German and English. |
|
||||
| **@simplewebauthn/server** | 9.x / 10.x | Passkey Verification | Validates WebAuthn registration/login assertions on the server. |
|
||||
| **@simplewebauthn/browser** | 9.x / 10.x | Passkey Client helper | Connects WebAuthn client requests to browser credentials API. |
|
||||
| **bip39** | 3.x | Recovery phrases | Generates 12-word mnemonic phrases for E2E encryption fallbacks. |
|
||||
| **lucide-react** | 0.300.x | SVG Icons | Light, modern icon library for weather states, navigation, and logbook actions. |
|
||||
|
||||
### Development Tools
|
||||
@@ -36,14 +42,18 @@ We recommend a **React + TypeScript + Vite** stack wrapped with **vite-plugin-pw
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
# Core & UI
|
||||
# Client Core & UI
|
||||
npm install react react-dom lucide-react
|
||||
|
||||
# Storage, PWA & Localization
|
||||
npm install dexie dexie-react-hooks react-i18next i18next i18next-browser-languagedetector
|
||||
# Client Storage, PWA, Localization & Cryptography
|
||||
npm install dexie dexie-react-hooks react-i18next i18next i18next-browser-languagedetector @simplewebauthn/browser bip39
|
||||
|
||||
# Dev Dependencies
|
||||
# Client Dev Dependencies
|
||||
npm install -D typescript @types/react @types/react-dom vite @vitejs/plugin-react vite-plugin-pwa
|
||||
|
||||
# Backend Core, ORM & Auth
|
||||
npm install express dotenv cors @simplewebauthn/server @prisma/client
|
||||
npm install -D tsx @types/express @types/node @types/cors prisma
|
||||
```
|
||||
|
||||
## Alternatives Considered
|
||||
@@ -57,18 +67,18 @@ npm install -D typescript @types/react @types/react-dom vite @vitejs/plugin-reac
|
||||
|
||||
| Avoid | Why | Use Instead |
|
||||
|-------|-----|-------------|
|
||||
| **Firebase / Supabase** | Requires online connection for core operations; violates "local-only" strict privacy constraint. | Dexie.js + Local IndexedDB |
|
||||
| **Plain Firebase / Supabase DB Sync** | Default syncing exposes raw unencrypted database schemas to the cloud provider, violating zero-knowledge privacy. | Custom Node/Express server + E2E encrypted payloads database |
|
||||
| **Bootstrap** | Heavy, outdated styling that doesn't adapt well to modern native mobile looks. | TailwindCSS / CSS variables |
|
||||
|
||||
## Stack Patterns by Variant
|
||||
|
||||
**If strict local privacy is required:**
|
||||
- Use IndexedDB (via Dexie.js) for storage.
|
||||
- Because IndexedDB runs entirely in the user's browser sandbox and has no cloud sync, guaranteeing absolute data ownership.
|
||||
**If strict user privacy with multi-device access is required:**
|
||||
- Use Client-Side E2E Encryption (AES-GCM-256) combined with Local-first IndexedDB (via Dexie.js) synced to a zero-knowledge PostgreSQL server.
|
||||
- Because client-side encryption ensures the server operator only holds encrypted payloads, retaining absolute user data privacy.
|
||||
|
||||
**If poor connectivity is expected:**
|
||||
- Configure Workbox Service Worker in "CacheFirst" or "StaleWhileRevalidate" mode.
|
||||
- Because it ensures the application shell loads immediately even with 0% network connection.
|
||||
- Because it ensures the application shell loads immediately even with 0% network connection, queueing synchronization packets until the device is online.
|
||||
|
||||
## Version Compatibility
|
||||
|
||||
|
||||
Reference in New Issue
Block a user