8d56fe392d
- 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.
452 lines
15 KiB
HTML
452 lines
15 KiB
HTML
<!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>
|