backup-tool/.superpowers/brainstorm/269331-1778521434/content/architecture-overview.html

<h2>Architecture Overview</h2>
<p class="subtitle">High-level system design for the backup tool</p>

<div class="section">
  <div class="mockup">
    <div class="mockup-header">System Architecture</div>
    <div class="mockup-body">
      <div style="display: flex; flex-direction: column; gap: 20px;">
        
        <!-- Frontend Layer -->
        <div style="border: 2px solid #4CAF50; border-radius: 8px; padding: 15px; background: #f8fff8;">
          <div class="label" style="color: #4CAF50;">Frontend Layer</div>
          <div style="display: flex; gap: 15px; margin-top: 10px;">
            <div style="flex: 1; border: 1px solid #ddd; padding: 10px; border-radius: 4px; text-align: center;">
              <strong>Dashboard View</strong><br>
              <small>Overview, stats, recent backups</small>
            </div>
            <div style="flex: 1; border: 1px solid #ddd; padding: 10px; border-radius: 4px; text-align: center;">
              <strong>Backup View</strong><br>
              <small>Jobs, sources, schedules</small>
            </div>
            <div style="flex: 1; border: 1px solid #ddd; padding: 10px; border-radius: 4px; text-align: center;">
              <strong>Settings View</strong><br>
              <small>Config, storage, notifications</small>
            </div>
          </div>
        </div>

        <!-- API Layer -->
        <div style="text-align: center; color: #666; font-size: 24px;">↓ REST API ↓</div>

        <!-- Backend Layer -->
        <div style="border: 2px solid #2196F3; border-radius: 8px; padding: 15px; background: #f0f8ff;">
          <div class="label" style="color: #2196F3;">Backend Layer (Python)</div>
          <div style="display: flex; gap: 15px; margin-top: 10px; flex-wrap: wrap;">
            <div style="flex: 1; min-width: 120px; border: 1px solid #ddd; padding: 10px; border-radius: 4px; text-align: center;">
              <strong>API Server</strong><br>
              <small>FastAPI/Flask</small>
            </div>
            <div style="flex: 1; min-width: 120px; border: 1px solid #ddd; padding: 10px; border-radius: 4px; text-align: center;">
              <strong>Backup Engine</strong><br>
              <small>Core logic</small>
            </div>
            <div style="flex: 1; min-width: 120px; border: 1px solid #ddd; padding: 10px; border-radius: 4px; text-align: center;">
              <strong>Scheduler</strong><br>
              <small>APScheduler</small>
            </div>
            <div style="flex: 1; min-width: 120px; border: 1px solid #ddd; padding: 10px; border-radius: 4px; text-align: center;">
              <strong>Source Adapters</strong><br>
              <small>SSH, DB, Local</small>
            </div>
          </div>
        </div>

        <!-- Data Layer -->
        <div style="text-align: center; color: #666; font-size: 24px;">↓ Persistence ↓</div>

        <div style="border: 2px solid #FF9800; border-radius: 8px; padding: 15px; background: #fff8f0;">
          <div class="label" style="color: #FF9800;">Data Layer</div>
          <div style="display: flex; gap: 15px; margin-top: 10px;">
            <div style="flex: 1; border: 1px solid #ddd; padding: 10px; border-radius: 4px; text-align: center;">
              <strong>SQLite Database</strong><br>
              <small>Jobs, sources, history, config</small>
            </div>
            <div style="flex: 1; border: 1px solid #ddd; padding: 10px; border-radius: 4px; text-align: center;">
              <strong>File Storage</strong><br>
              <small>Backup archives</small>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

<div class="section">
  <h3>Key Design Principles</h3>
  <ul>
    <li><strong>Source-agnostic</strong>: Adapter pattern for different backup sources (local, SSH, future cloud)</li>
    <li><strong>Job-driven</strong>: Everything is a job - manual or scheduled, full or incremental</li>
    <li><strong>SQLite for simplicity</strong>: Single file database, no external DB server needed</li>
    <li><strong>REST API</strong>: Clean separation between frontend and backend</li>
    <li><strong>Extensible</strong>: Plugin architecture for new source types and storage backends</li>
  </ul>
</div>

<div class="section">
  <h3>Technology Stack</h3>
  <div style="display: flex; gap: 20px;">
    <div style="flex: 1;">
      <h4>Backend</h4>
      <ul>
        <li>Python 3.11+</li>
        <li>FastAPI (async, auto-docs)</li>
        <li>SQLAlchemy + Alembic</li>
        <li>APScheduler (job scheduling)</li>
        <li>Paramiko (SSH)</li>
        <li>rsync/libsync (incremental backups)</li>
      </ul>
    </div>
    <div style="flex: 1;">
      <h4>Frontend</h4>
      <ul>
        <li>React 18+ with TypeScript</li>
        <li>TanStack Query (data fetching)</li>
        <li>React Router (navigation)</li>
        <li>Tailwind CSS (styling)</li>
        <li>Recharts (dashboard charts)</li>
      </ul>
    </div>
  </div>
</div>