refactor: update environment configuration and documentation
- Modified `.env.example` to reflect new API URL structure and added CDN configuration for external storage. - Updated `.gitignore` to include deployment secrets and certificate files, ensuring sensitive information is not committed. - Revised `BACKEND_INTEGRATION.md` to clarify authentication methods, replacing Cognito references with Nostr NIP-98. - Deleted outdated documentation files (`CONTENT-INTEGRATION-COMPLETE.md`, `CURSOR-MCP-SETUP.md`, `FINAL-STATUS.md`, `FIXES-APPLIED.md`, `INDEEHHUB-INTEGRATION.md`, `PROJECT-COMPLETE.md`, `PROJECT-SUMMARY.md`) to streamline project documentation. These changes enhance the clarity of the environment setup and improve the overall documentation structure for better developer onboarding.
This commit is contained in:
Dorian
451
docs/ARCHITECTURE.html
Normal file
451
docs/ARCHITECTURE.html
Normal file
@@ -0,0 +1,451 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>IndeeHub Architecture — Legacy vs Decentralized</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0a0a;
|
||||
--text: #FAFAFA;
|
||||
--text-muted: #9ca3af;
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
--accent: #F7931A;
|
||||
--accent-secondary: #8E44AD;
|
||||
--success: #22C55E;
|
||||
--warning: #F59E0B;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
max-width: 1200px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
background: linear-gradient(to right, var(--text), var(--text-muted));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.subtitle { color: var(--text-muted); font-size: 1rem; margin-bottom: 2rem; }
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
th, td {
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
th {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
td { vertical-align: top; }
|
||||
|
||||
.legacy { color: var(--text-muted); }
|
||||
.current { color: var(--success); font-weight: 500; }
|
||||
|
||||
.summary-cell {
|
||||
font-size: 0.875rem;
|
||||
max-width: 320px;
|
||||
}
|
||||
.summary-cell ul {
|
||||
margin: 0.25rem 0 0 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
.summary-cell li { margin-bottom: 0.25rem; }
|
||||
.pros { color: var(--success); }
|
||||
.cons { color: var(--warning); }
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.badge-new { background: rgba(34, 197, 94, 0.2); color: var(--success); }
|
||||
.badge-replaced { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
|
||||
|
||||
.intro {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 3rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid var(--border);
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body { padding: 1rem; }
|
||||
table { font-size: 0.8125rem; }
|
||||
th, td { padding: 0.5rem; }
|
||||
.summary-cell { max-width: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>IndeeHub Architecture</h1>
|
||||
<p class="subtitle">Legacy vs Decentralized — Technology Stack, Auth, Processes & Summary of Changes</p>
|
||||
|
||||
<div class="intro">
|
||||
This document compares the original IndeeHub architecture (AWS, Cognito, Stripe, commercial DRM) with the decentralized prototype (Nostr, BTCPay, MinIO, self-hosted encryption). Both stacks support encryption and transcoding; the implementations differ.
|
||||
</div>
|
||||
|
||||
<h2>Technology Stack</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Layer</th>
|
||||
<th>Legacy</th>
|
||||
<th>Current (Decentralized)</th>
|
||||
<th>Summary of Changes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Auth</td>
|
||||
<td class="legacy">Cognito</td>
|
||||
<td class="current">Nostr (NIP-07, 46, 98)</td>
|
||||
<td class="summary-cell">
|
||||
<span class="badge badge-replaced">Replaced</span>
|
||||
<strong>What:</strong> Email/password → Nostr keys (extension, remote signer, nsec).
|
||||
<ul>
|
||||
<li class="pros">Pros: No central auth provider, censorship-resistant, portable identity</li>
|
||||
<li class="cons">Cons: UX learning curve for non-Nostr users</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Payments</td>
|
||||
<td class="legacy">Stripe</td>
|
||||
<td class="current">BTCPay (Lightning)</td>
|
||||
<td class="summary-cell">
|
||||
<span class="badge badge-replaced">Replaced</span>
|
||||
<strong>What:</strong> Fiat card payments → Bitcoin Lightning invoices.
|
||||
<ul>
|
||||
<li class="pros">Pros: Self-custody, no payment processor lock-in, lower fees</li>
|
||||
<li class="cons">Cons: Users need Lightning wallet; fiat off-ramp complexity</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Storage</td>
|
||||
<td class="legacy">AWS S3 / CloudFront</td>
|
||||
<td class="current">MinIO</td>
|
||||
<td class="summary-cell">
|
||||
<span class="badge badge-replaced">Replaced</span>
|
||||
<strong>What:</strong> Managed S3 + CDN → self-hosted S3-compatible MinIO.
|
||||
<ul>
|
||||
<li class="pros">Pros: Full control, no AWS dependency, S3 API compatible</li>
|
||||
<li class="cons">Cons: You operate storage and CDN; scaling is manual</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Database</td>
|
||||
<td class="legacy">PostgreSQL (RDS)</td>
|
||||
<td class="current">PostgreSQL</td>
|
||||
<td class="summary-cell">
|
||||
<span class="badge badge-replaced">Replaced</span>
|
||||
<strong>What:</strong> Managed RDS → self-hosted PostgreSQL.
|
||||
<ul>
|
||||
<li class="pros">Pros: Same schema, no vendor lock-in</li>
|
||||
<li class="cons">Cons: You manage backups, replication, upgrades</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Queue</td>
|
||||
<td class="legacy">—</td>
|
||||
<td class="current">Redis + BullMQ</td>
|
||||
<td class="summary-cell">
|
||||
<span class="badge badge-new">New</span>
|
||||
<strong>What:</strong> Legacy used external transcoding API; current uses BullMQ for job queue.
|
||||
<ul>
|
||||
<li class="pros">Pros: Explicit job queue, retries, progress tracking</li>
|
||||
<li class="cons">Cons: Additional Redis dependency</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Relay</td>
|
||||
<td class="legacy">External</td>
|
||||
<td class="current">Self-hosted nostr-rs-relay</td>
|
||||
<td class="summary-cell">
|
||||
<span class="badge badge-replaced">Replaced</span>
|
||||
<strong>What:</strong> Third-party Nostr relay → self-hosted relay.
|
||||
<ul>
|
||||
<li class="pros">Pros: Data locality, no relay dependency</li>
|
||||
<li class="cons">Cons: Relay ops and storage</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Deployment</td>
|
||||
<td class="legacy">AWS ECS</td>
|
||||
<td class="current">Docker / Portainer</td>
|
||||
<td class="summary-cell">
|
||||
<span class="badge badge-replaced">Replaced</span>
|
||||
<strong>What:</strong> Managed ECS → Docker Compose + Portainer.
|
||||
<ul>
|
||||
<li class="pros">Pros: Portable, runs anywhere, simpler ops</li>
|
||||
<li class="cons">Cons: No auto-scaling; manual orchestration</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Frontend</td>
|
||||
<td class="legacy">React</td>
|
||||
<td class="current">Vue 3 + Vite</td>
|
||||
<td class="summary-cell">
|
||||
<span class="badge badge-replaced">Replaced</span>
|
||||
<strong>What:</strong> React → Vue 3 + Vite.
|
||||
<ul>
|
||||
<li class="pros">Pros: Faster builds, Composition API, smaller bundle</li>
|
||||
<li class="cons">Cons: Different ecosystem, migration effort</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Backend</td>
|
||||
<td class="legacy">NestJS</td>
|
||||
<td class="current">NestJS</td>
|
||||
<td class="summary-cell">
|
||||
<strong>What:</strong> Unchanged. Same NestJS backend, different integrations.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Auth Flow</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Step</th>
|
||||
<th>Legacy</th>
|
||||
<th>Current</th>
|
||||
<th>Summary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td class="legacy">Email + password</td>
|
||||
<td class="current">Extension, Remote Signer, or nsec</td>
|
||||
<td class="summary-cell">User proves identity via Nostr key instead of password.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td class="legacy">Cognito validates</td>
|
||||
<td class="current">Nostr signs NIP-98</td>
|
||||
<td class="summary-cell">Backend verifies Nostr signature instead of calling Cognito.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td class="legacy">Cognito returns JWT</td>
|
||||
<td class="current">Backend issues JWT</td>
|
||||
<td class="summary-cell">Backend owns JWT issuance; no third-party auth provider.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td class="legacy">JWT stored</td>
|
||||
<td class="current">JWT stored</td>
|
||||
<td class="summary-cell">Same client-side storage pattern.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Processes</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Process</th>
|
||||
<th>Legacy</th>
|
||||
<th>Current</th>
|
||||
<th>Summary of Changes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Subscription</td>
|
||||
<td class="legacy">Stripe Checkout</td>
|
||||
<td class="current">BTCPay Lightning invoice</td>
|
||||
<td class="summary-cell">
|
||||
<span class="badge badge-replaced">Replaced</span>
|
||||
Fiat checkout → Lightning invoice. Same UX flow (redirect, webhook, activation).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rentals</td>
|
||||
<td class="legacy">Stripe</td>
|
||||
<td class="current">BTCPay invoice</td>
|
||||
<td class="summary-cell">
|
||||
<span class="badge badge-replaced">Replaced</span>
|
||||
Same pattern as subscriptions; payment method changed.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zaps</td>
|
||||
<td class="legacy">—</td>
|
||||
<td class="current">BTCPay → creator address</td>
|
||||
<td class="summary-cell">
|
||||
<span class="badge badge-new">New</span>
|
||||
Direct tips to creators via Lightning; not present in legacy.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Encryption</td>
|
||||
<td class="legacy">BuyDRM/KeyOS (Widevine/FairPlay)</td>
|
||||
<td class="current">AES-128 HLS</td>
|
||||
<td class="summary-cell">
|
||||
<span class="badge badge-replaced">Replaced</span>
|
||||
<strong>What:</strong> Commercial DRM → self-hosted AES-128 HLS with key server.
|
||||
<ul>
|
||||
<li class="pros">Pros: No DRM vendor, no licensing fees, full control</li>
|
||||
<li class="cons">Cons: Weaker protection than Widevine; key server is single point</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Transcoding</td>
|
||||
<td class="legacy">External transcoding API (ECS)</td>
|
||||
<td class="current">FFmpeg + MinIO</td>
|
||||
<td class="summary-cell">
|
||||
<span class="badge badge-replaced">Replaced</span>
|
||||
<strong>What:</strong> AWS ECS transcoding service → self-hosted FFmpeg worker.
|
||||
<ul>
|
||||
<li class="pros">Pros: No external API, no per-job vendor cost, same HLS output</li>
|
||||
<li class="cons">Cons: You run FFmpeg; scaling is manual</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>UI & Design</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Aspect</th>
|
||||
<th>Legacy</th>
|
||||
<th>Current</th>
|
||||
<th>Summary of Changes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Framework</td>
|
||||
<td class="legacy">React</td>
|
||||
<td class="current">Vue 3 + Vite</td>
|
||||
<td class="summary-cell">
|
||||
<span class="badge badge-replaced">Replaced</span>
|
||||
React → Vue 3 with Composition API. Vite for fast builds.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Styling</td>
|
||||
<td class="legacy">CSS-in-JS / styled-components</td>
|
||||
<td class="current">Tailwind CSS + custom classes</td>
|
||||
<td class="summary-cell">
|
||||
<span class="badge badge-replaced">Replaced</span>
|
||||
Utility-first Tailwind; custom glass-card, hero-gradient, etc. 8px base grid.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visual style</td>
|
||||
<td class="legacy">Traditional streaming UI</td>
|
||||
<td class="current">Glassmorphism, gradients, dark-first</td>
|
||||
<td class="summary-cell">
|
||||
<span class="badge badge-replaced">Replaced</span>
|
||||
Semi-transparent cards with backdrop blur; hero gradient overlays; bold typography.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colors</td>
|
||||
<td class="legacy">Brand-specific (varies)</td>
|
||||
<td class="current">#0a0a0a, #FAFAFA, #F7931A, #8E44AD</td>
|
||||
<td class="summary-cell">
|
||||
Design tokens: pure black (#0a0a0a), white text (#FAFAFA), brand primary/secondary.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Layout</td>
|
||||
<td class="legacy">Hero + content rows</td>
|
||||
<td class="current">Hero + content rows + browse grid</td>
|
||||
<td class="summary-cell">
|
||||
Same pattern: featured hero, horizontal content rows. Responsive browse grid (sm/md/lg).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Modals</td>
|
||||
<td class="legacy">Auth, subscription, rental</td>
|
||||
<td class="current">Auth, subscription, rental, zap, content detail, keys</td>
|
||||
<td class="summary-cell">
|
||||
<span class="badge badge-new">Expanded</span>
|
||||
Added ZapModal (Lightning tips), ContentDetailModal, KeysModal (Nostr keys).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PWA</td>
|
||||
<td class="legacy">—</td>
|
||||
<td class="current">Installable, offline-capable</td>
|
||||
<td class="summary-cell">
|
||||
<span class="badge badge-new">New</span>
|
||||
PWA support for install-as-app on mobile/desktop.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Responsive</td>
|
||||
<td class="legacy">Yes</td>
|
||||
<td class="current">Mobile-first, 640/768/1024/1280 breakpoints</td>
|
||||
<td class="summary-cell">
|
||||
Mobile-first; same content on all breakpoints; layout adapts.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>High-Level Summary</h2>
|
||||
<div class="intro">
|
||||
<p><strong>Legacy</strong> relied on AWS (S3, CloudFront, RDS, ECS), Cognito, Stripe, and BuyDRM/KeyOS for encryption. Transcoding was done by an external ECS-based API. UI was React-based with traditional streaming layout.</p>
|
||||
<p><strong>Decentralized</strong> replaces these with self-hosted or open components: MinIO, PostgreSQL, Nostr, BTCPay, AES-128 HLS, and an FFmpeg worker. Vue 3 + Tailwind with glassmorphism, expanded modals (zaps, keys), and PWA. The trade-off is more operational responsibility in exchange for independence from proprietary services.</p>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
IndeeHub Prototype · Architecture comparison · Generated from codebase (drm.service, transcoding-server, env examples).
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user