# sandip1402/keeper-vault architecture

> Architecture diagram of the GitHub repository sandip1402/keeper-vault, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sandip1402/keeper-vault
- Repository: https://github.com/sandip1402/keeper-vault

## Overview

Keeper Vault is a local-first credential manager. A user sets up or unlocks a vault in the main screen, then manages and filters credentials; the screen persists changes through the vault module. The vault derives keys and encrypts credential data, using platform-appropriate local storage and optional biometric unlock. The app shell supplies shared providers and error recovery. The excerpts show the main workflow and storage calls, but the README is empty and several UI details are unsampled, so the graph avoids guessing finer-grained screen interactions.

Main entry points: [`app/index.tsx`](https://github.com/sandip1402/keeper-vault/blob/main/app/index.tsx) (Vault screen), [`src/vault.ts`](https://github.com/sandip1402/keeper-vault/blob/main/src/vault.ts) (Vault operations), [`components/ErrorBoundary.tsx`](https://github.com/sandip1402/keeper-vault/blob/main/components/ErrorBoundary.tsx) (Error boundary), [`hooks/useColors.ts`](https://github.com/sandip1402/keeper-vault/blob/main/hooks/useColors.ts) (Color selection)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["App interface"]
  node_home["Vault screen<br/>[index.tsx]"]
  node_credentials["Credential manager<br/>[index.tsx]"]
  node_appearance["Appearance settings<br/>[index.tsx]"]
end

subgraph group_vault["Vault security"]
  node_vault_service["Vault operations<br/>[vault.ts]"]
  node_key_crypto["Key derivation and encryption<br/>[vault.ts]"]
end

subgraph group_storage["Local persistence"]
  node_encrypted_data[("Encrypted vault data<br/>[vault.ts]")]
  node_secure_settings[("Secure settings<br/>[vault.ts]")]
end

subgraph group_support["App foundation"]
  node_app_shell["Root app shell<br/>[_layout.tsx]"]
  node_error_boundary["Error boundary<br/>[ErrorBoundary.tsx]"]
  node_error_fallback["Error recovery screen<br/>[ErrorFallback.tsx]"]
  node_color_hook["Color selection<br/>[useColors.ts]"]
  node_color_tokens["Color palettes<br/>[colors.ts]"]
end

node_person(("Vault user"))
node_async_storage[("AsyncStorage")]
node_secure_store[("Expo SecureStore")]
node_biometric["Device authentication"]

node_person -->|"uses"| node_home
node_home -->|"sets up and unlocks"| node_vault_service
node_home -->|"manages credentials"| node_credentials
node_home -->|"sets appearance"| node_appearance
node_home -->|"saves changes"| node_vault_service
node_vault_service -->|"derives and encrypts"| node_key_crypto
node_vault_service -->|"reads and writes"| node_encrypted_data
node_vault_service -->|"reads and writes"| node_secure_settings
node_encrypted_data -->|"stored in"| node_async_storage
node_secure_settings -->|"stored in"| node_secure_store
node_vault_service -->|"requests authentication"| node_biometric
node_secure_settings -->|"requires authentication"| node_biometric
node_app_shell -->|"wraps app"| node_error_boundary
node_error_boundary -->|"shows on error"| node_error_fallback
node_home -->|"selects colors"| node_color_hook
node_color_hook -->|"reads palettes"| node_color_tokens

click node_home "https://github.com/sandip1402/keeper-vault/blob/main/app/index.tsx"
click node_credentials "https://github.com/sandip1402/keeper-vault/blob/main/app/index.tsx"
click node_appearance "https://github.com/sandip1402/keeper-vault/blob/main/app/index.tsx"
click node_vault_service "https://github.com/sandip1402/keeper-vault/blob/main/src/vault.ts"
click node_key_crypto "https://github.com/sandip1402/keeper-vault/blob/main/src/vault.ts"
click node_encrypted_data "https://github.com/sandip1402/keeper-vault/blob/main/src/vault.ts"
click node_secure_settings "https://github.com/sandip1402/keeper-vault/blob/main/src/vault.ts"
click node_app_shell "https://github.com/sandip1402/keeper-vault/blob/main/app/_layout.tsx"
click node_error_boundary "https://github.com/sandip1402/keeper-vault/blob/main/components/ErrorBoundary.tsx"
click node_error_fallback "https://github.com/sandip1402/keeper-vault/blob/main/components/ErrorFallback.tsx"
click node_color_hook "https://github.com/sandip1402/keeper-vault/blob/main/hooks/useColors.ts"
click node_color_tokens "https://github.com/sandip1402/keeper-vault/blob/main/constants/colors.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_credentials,node_appearance,node_person toneBlue
class node_vault_service,node_key_crypto,node_async_storage,node_secure_store toneAmber
class node_encrypted_data,node_secure_settings toneMint
class node_app_shell,node_error_boundary,node_error_fallback,node_color_hook,node_color_tokens toneRose
class node_biometric toneIndigo
```

## Components

### App interface

- [Vault screen](https://github.com/sandip1402/keeper-vault/blob/main/app/index.tsx): `app/index.tsx`
- [Credential manager](https://github.com/sandip1402/keeper-vault/blob/main/app/index.tsx): `app/index.tsx`
- [Appearance settings](https://github.com/sandip1402/keeper-vault/blob/main/app/index.tsx): `app/index.tsx`

### Vault security

- [Vault operations](https://github.com/sandip1402/keeper-vault/blob/main/src/vault.ts): `src/vault.ts`
- [Key derivation and encryption](https://github.com/sandip1402/keeper-vault/blob/main/src/vault.ts): `src/vault.ts`

### Local persistence

- [Encrypted vault data](https://github.com/sandip1402/keeper-vault/blob/main/src/vault.ts): `src/vault.ts`
- [Secure settings](https://github.com/sandip1402/keeper-vault/blob/main/src/vault.ts): `src/vault.ts`

### App foundation

- [Root app shell](https://github.com/sandip1402/keeper-vault/blob/main/app/_layout.tsx): `app/_layout.tsx`
- [Error boundary](https://github.com/sandip1402/keeper-vault/blob/main/components/ErrorBoundary.tsx): `components/ErrorBoundary.tsx`
- [Error recovery screen](https://github.com/sandip1402/keeper-vault/blob/main/components/ErrorFallback.tsx): `components/ErrorFallback.tsx`
- [Color selection](https://github.com/sandip1402/keeper-vault/blob/main/hooks/useColors.ts): `hooks/useColors.ts`
- [Color palettes](https://github.com/sandip1402/keeper-vault/blob/main/constants/colors.ts): `constants/colors.ts`

### Other components

- **Vault user**
- **AsyncStorage**
- **Expo SecureStore**
- **Device authentication**

## Connections

- Vault user → Vault screen: uses (evidence: `app/index.tsx`)
- Vault screen → Vault operations: sets up and unlocks (evidence: `app/index.tsx`)
- Vault screen → Credential manager: manages credentials (evidence: `app/index.tsx`)
- Vault screen → Appearance settings: sets appearance (evidence: `app/index.tsx`)
- Vault screen → Vault operations: saves changes (evidence: `app/index.tsx`)
- Vault operations → Key derivation and encryption: derives and encrypts (evidence: `src/vault.ts`)
- Vault operations → Encrypted vault data: reads and writes (evidence: `src/vault.ts`)
- Vault operations → Secure settings: reads and writes (evidence: `src/vault.ts`)
- Encrypted vault data → AsyncStorage: stored in (evidence: `src/vault.ts`)
- Secure settings → Expo SecureStore: stored in (evidence: `src/vault.ts`)
- Vault operations → Device authentication: requests authentication (evidence: `src/vault.ts`)
- Secure settings → Device authentication: requires authentication (evidence: `src/vault.ts`)
- Root app shell → Error boundary: wraps app (evidence: `app/_layout.tsx`)
- Error boundary → Error recovery screen: shows on error (evidence: `components/ErrorBoundary.tsx`)
- Vault screen → Color selection: selects colors (evidence: `app/index.tsx`)
- Color selection → Color palettes: reads palettes (evidence: `hooks/useColors.ts`)