176 lines
No EOL
4.7 KiB
HTML
176 lines
No EOL
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Multi-Site Analytics Tech Stack Overview</title>
|
|
<style>
|
|
body {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
line-height: 1.6;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
color: #333;
|
|
}
|
|
.section {
|
|
margin: 30px 0;
|
|
padding: 20px;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.tech-diagram {
|
|
background: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
font-family: monospace;
|
|
white-space: pre;
|
|
}
|
|
.note {
|
|
background: #e1f5fe;
|
|
padding: 15px;
|
|
border-left: 4px solid #03a9f4;
|
|
margin: 20px 0;
|
|
}
|
|
h1, h2, h3 {
|
|
color: #2c3e50;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Multi-Site Analytics Technology Stack</h1>
|
|
|
|
<div class="note">
|
|
Complete technology stack for enterprise-grade multi-site analytics system
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Core Technology Stack</h2>
|
|
<div class="tech-diagram">
|
|
Technology Overview
|
|
├── Frontend Layer
|
|
│ ├── Next.js (Dashboard Interface)
|
|
│ ├── React (Component Architecture)
|
|
│ ├── TypeScript
|
|
│ └── Tailwind CSS
|
|
│
|
|
├── Backend Services
|
|
│ ├── Matomo Analytics Engine
|
|
│ ├── MariaDB/MySQL
|
|
│ ├── Node.js API Services
|
|
│ └── JWT Authentication
|
|
│
|
|
├── Infrastructure
|
|
│ ├── Docker & Docker Compose
|
|
│ ├── Portainer CE
|
|
│ ├── Caddy Server
|
|
│ └── Gitea
|
|
│
|
|
└── Development Tools
|
|
├── Local Dev Environment
|
|
├── Hot Reload
|
|
├── Testing Framework
|
|
└── CI/CD Pipeline</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Service Architecture</h2>
|
|
<div class="tech-diagram">
|
|
Service Layout
|
|
├── Analytics Engine (Matomo)
|
|
│ ├── Website ID: deafmissoula.org
|
|
│ ├── Website ID: chrishaulmark.com
|
|
│ ├── Website ID: deafgain.sigd.net
|
|
│ └── Website ID: finlion.sigd.net
|
|
│
|
|
├── Database Layer
|
|
│ ├── MariaDB Primary
|
|
│ └── Automated Backups
|
|
│
|
|
├── Access Control
|
|
│ ├── JWT Authentication
|
|
│ ├── Role-Based Access
|
|
│ └── Individual Dashboards
|
|
│
|
|
└── Monitoring
|
|
├── Container Health
|
|
├── Resource Usage
|
|
├── Performance Metrics
|
|
└── Security Logs</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Network Architecture</h2>
|
|
<div class="tech-diagram">
|
|
Network Layout
|
|
├── External Traffic
|
|
│ └── Caddy (SSL Termination)
|
|
│
|
|
├── Internal Networks
|
|
│ ├── caddy_network
|
|
│ │ ├── Website Containers
|
|
│ │ └── Analytics Dashboard
|
|
│ │
|
|
│ ├── analytics_network
|
|
│ │ ├── Matomo
|
|
│ │ └── MariaDB
|
|
│ │
|
|
│ └── gitea_network
|
|
│ ├── Gitea
|
|
│ └── MariaDB
|
|
│
|
|
└── Monitoring Network
|
|
├── Portainer
|
|
└── Health Checks</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Features Per Website</h2>
|
|
<div class="tech-diagram">
|
|
Dashboard Features
|
|
├── Real-Time Analytics
|
|
│ ├── Visitor Statistics
|
|
│ ├── Page Views
|
|
│ ├── User Behavior
|
|
│ └── Heatmaps
|
|
│
|
|
├── Reporting
|
|
│ ├── Custom Date Ranges
|
|
│ ├── Data Export
|
|
│ ├── Referrer Tracking
|
|
│ └── E-commerce Tracking
|
|
│
|
|
└── Administration
|
|
├── User Management
|
|
├── Access Control
|
|
├── API Integration
|
|
└── GDPR Tools</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Deployment & Operations</h2>
|
|
<div class="tech-diagram">
|
|
Operations Flow
|
|
├── Deployment
|
|
│ ├── Gitea Push
|
|
│ ├── Automated Tests
|
|
│ └── Container Updates
|
|
│
|
|
├── Maintenance
|
|
│ ├── Daily Backups
|
|
│ ├── Security Updates
|
|
│ ├── Log Archiving
|
|
│ └── Performance Monitoring
|
|
│
|
|
└── Scaling
|
|
├── Resource Management
|
|
├── Load Balancing
|
|
└── Capacity Planning</div>
|
|
</div>
|
|
|
|
<div class="note">
|
|
<strong>Implementation Note:</strong> Each website gets its own isolated analytics instance while sharing the underlying infrastructure for cost efficiency. Matomo provides enhanced privacy features and GDPR compliance tools.
|
|
</div>
|
|
</body>
|
|
</html> |