frontend/README.md

Sentinel App

中文版

Digital Legacy Management

Sentinel is a mobile application that helps users securely manage their digital legacy. Built with React Native (Expo) and TypeScript.

Features

🗞️ Flow - Captain's Journal

• Record daily thoughts, emotions, and reflections
• AI-inferred emotional state tracking
• Archive entries to the encrypted Vault
• Support for text, voice, and image entries

📦 Vault - The Deep Vault

• End-to-end encrypted asset storage
• Support for game accounts, private keys, documents, photos, wills
• Biometric authentication required for access
• Zero-knowledge architecture

⚓ Sentinel - Lighthouse Watch

• Dead Man's Switch monitoring system
• Heartbeat confirmation mechanism
• Subscription and activity tracking
• Configurable grace periods

🧭 Heritage - Fleet Legacy

• Heir management with release levels
• Customizable release order and timing
• Payment strategy configuration
• Legal document-style interface

⛵ Me - Captain's Quarters

• Subscription and protocol status
• Sentinel configuration
• Security center
• Data export and backup
• Social responsibility program

Tech Stack

• Framework: React Native (Expo SDK 52)
• Language: TypeScript
• Navigation: React Navigation (Bottom Tabs)
• Icons: @expo/vector-icons (Feather, Ionicons, MaterialCommunityIcons, FontAwesome5)
• Styling: Custom nautical theme with gradients

Project Structure

src/
├── components/
│   └── common/
│       ├── BiometricModal.tsx
│       ├── Icons.tsx
│       └── VaultDoorAnimation.tsx
├── navigation/
│   └── TabNavigator.tsx
├── screens/
│   ├── FlowScreen.tsx
│   ├── VaultScreen.tsx
│   ├── SentinelScreen.tsx
│   ├── HeritageScreen.tsx
│   └── MeScreen.tsx
├── theme/
│   └── colors.ts
└── types/
    └── index.ts

assets/
├── icon.png              # App icon (1024x1024)
├── adaptive-icon.png     # Android adaptive icon
├── splash.png            # Splash screen
├── favicon.png           # Web favicon (32x32)
├── favicon.svg           # SVG favicon for web
├── logo.svg              # Vector logo (512x512)
└── images/
    └── captain-avatar.svg  # Avatar placeholder

Icons & Branding

The Sentinel brand uses a nautical anchor-and-star logo on a teal (#459E9E) background.

Logo Elements

• Anchor: Symbolizes stability and anchoring your digital legacy
• Star/Compass: Represents guidance and direction for heirs
• Teal Color: Evokes ocean depth and calm security

Generating Icons

# View icon specifications
node scripts/generate-icons.js

Use the assets/logo.svg as the source and export to required sizes.

Getting Started

# Install dependencies
npm install

# Start the development server
npx expo start

Design Philosophy

• Nautical Theme: Captain's sanctum aesthetic with anchors, ship wheels, and ocean colors
• Emotional Balance: Warm and secure feeling across different tabs
• Privacy First: Zero-knowledge architecture, local encryption
• Elegant UI: Mint gradients, serif typography, subtle shadows

---

中文版

English Version

数字遗产管理

Sentinel 是一款帮助用户安全管理数字遗产的移动应用程序。使用 React Native (Expo) 和 TypeScript 构建。

功能特性

🗞️ Flow - 船长日志

• 记录日常想法、情感和反思
• AI 推断情感状态追踪
• 将条目归档到加密保险库
• 支持文本、语音和图像条目

📦 Vault - 深海宝库

• 端到端加密资产存储
• 支持游戏账号、私钥、文档、照片、遗嘱
• 需要生物识别认证才能访问
• 零知识架构

⚓ Sentinel - 灯塔守望

• 死人开关监控系统
• 心跳确认机制
• 订阅和活动追踪
• 可配置的冷静期

🧭 Heritage - 舰队遗产

• 继承人管理与释放等级
• 可自定义释放顺序和时间
• 付款策略配置
• 法律文书风格界面

⛵ Me - 船长室

• 订阅和协议状态
• 哨兵配置
• 安全中心
• 数据导出和备份
• 社会责任计划

技术栈

• 框架: React Native (Expo SDK 52)
• 语言: TypeScript
• 导航: React Navigation (底部标签)
• 图标: @expo/vector-icons
• 样式: 自定义航海主题配渐变

运行项目

# 安装依赖
npm install

# 启动开发服务器
npx expo start

图标与品牌

Sentinel 品牌使用青色(#459E9E)背景上的航海锚与星星标志。

标志元素

• 锚: 象征稳定性和锚定你的数字遗产
• 星星/指南针: 代表对继承人的指引和方向
• 青色: 唤起海洋深度和平静的安全感

生成图标

# 查看图标规格
node scripts/generate-icons.js

使用 assets/logo.svg 作为源文件并导出所需尺寸。

设计理念

• 航海主题: 船长圣殿美学，配以锚、船舵和海洋色彩
• 情感平衡: 不同标签页带来温暖而安全的感觉
• 隐私优先: 零知识架构，本地加密
• 优雅界面: 薄荷渐变、衬线字体、柔和阴影