Architecture
A technical overview of how ATStatus is designed, built, and operates.
Modern Stack
ATStatus is built on a modern, proven technology stack optimized for performance, reliability, and developer experience.
Technology Stack
Frontend
- • Next.js 14 (App Router)
- • React 18 with Server Components
- • TypeScript for type safety
- • Tailwind CSS for styling
- • shadcn/ui component library
- • Radix UI primitives
Backend
- • Next.js API Routes
- • Prisma ORM (database abstraction)
- • Zod for validation
- • Custom session management
- • RBAC permission system
- • Rate limiting middleware
Database
- • SQLite (embedded, default)
- • Prisma migrations
- • 25 data models
- • Hash-chained audit trail
- • Automatic backups supported
Security
- • SHA-256 password hashing
- • HMAC session signatures
- • CSRF token protection
- • TOTP two-factor auth
- • Step-up authentication
- • API key management
System Design
Application Flow
┌─────────────────────────────────────────────────────────────┐
│ Client Browser │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Next.js Application │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────┐ │
│ │ Public Pages │ │ Admin Panel │ │ API Routes │ │
│ │ (Status Page) │ │ (Dashboard) │ │ (REST API) │ │
│ └────────┬────────┘ └────────┬────────┘ └──────┬──────┘ │
│ │ │ │ │
│ └────────────────────┼───────────────────┘ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Middleware Layer │ │
│ │ • Authentication • RBAC • Rate Limiting • CSRF │ │
│ └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Prisma ORM Layer │
│ • Query Building • Type Safety • Migrations │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ SQLite Database │
│ • StatusPages • Components • Incidents • Users │
│ • Audit Logs • Sessions • Settings • Monitors │
└─────────────────────────────────────────────────────────────┘Monitoring Architecture
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Component │ │ Component │ │ Component │
│ (Service) │ │ (Service) │ │ (Service) │
└──────┬───────┘ └──────┬───────┘ └──────┬───────┘
│ │ │
└────────────────────┼────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Monitor Daemon │
│ • Scheduled checks (cron or interval) │
│ • 25+ monitor types (HTTP, TCP, DNS, DB, etc.) │
│ • Response time tracking │
│ • SSL certificate monitoring │
└─────────────────────────────────────────────────────────────┘
│
┌───────────┼───────────┐
▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐
│ Status │ │ Monitor │ │ Notifi- │
│ Update │ │ History │ │ cations │
└──────────┘ └──────────┘ └──────────┘Core Data Models
ATStatus uses 25 Prisma models to manage all data:
| Model | Purpose | Key Fields |
|---|---|---|
StatusPage | Status page instance | slug, name, isDefault, isEnabled |
StatusPageSettings | Page configuration (80+ fields) | branding, layout, features, notifications |
Component | Monitored service | name, status, monitorUrl, sslExpiry |
ComponentGroup | Component organization | name, displayOrder, collapsed, parentId |
Incident | Service disruption | title, status, severity, RCA fields |
IncidentUpdate | Incident timeline | message, status, createdAt |
Maintenance | Planned maintenance | title, windowStart, windowEnd, recurring |
User | Admin account | email, role, 2FA settings |
Session | User session | tokenHash, expiresAt, device info |
AuditEvent | Enterprise audit log | action, actor, hash chain |
MonitorLog | Check history | status, latencyMs, checkedAt |
NotificationSetting | Webhook configuration | type, webhookUrl, event toggles |
Security Architecture
Layer 1: Transport
HTTPS enforcement, secure cookies, TRUST_PROXY for reverse proxy setups
Layer 2: Authentication
SHA-256 password hashing, HMAC-signed sessions, database-backed tokens, TOTP 2FA
Layer 3: Authorization
Role-based access control (RBAC), 50+ granular permissions, step-up auth for sensitive actions
Layer 4: Request Protection
CSRF tokens, rate limiting, input validation with Zod, parameterized queries
Layer 5: Audit & Compliance
Hash-chained audit trail, tamper detection, complete action logging, GDPR consent tracking
File Structure
statuspage-clean/
├── app/ # Next.js App Router
│ ├── admin/ # Admin panel pages
│ │ ├── (dashboard)/ # Dashboard layout group
│ │ │ ├── components/ # Component management
│ │ │ ├── incidents/ # Incident management
│ │ │ ├── users/ # User management
│ │ │ └── ... # Other admin pages
│ │ └── login/ # Authentication
│ ├── api/ # API Routes (70+ endpoints)
│ │ ├── auth/ # Authentication APIs
│ │ ├── components/ # Component APIs
│ │ ├── incidents/ # Incident APIs
│ │ └── ... # Other APIs
│ ├── status/ # Public status pages
│ └── history/ # Incident history
├── components/ # React components
│ ├── admin/ # Admin-specific components
│ ├── status/ # Status page components
│ └── ui/ # shadcn/ui components
├── lib/ # Utility libraries
│ ├── auth.ts # Authentication logic
│ ├── rbac.ts # Permission system
│ ├── monitor.ts # Monitoring logic
│ └── ... # Other utilities
├── prisma/
│ ├── schema.prisma # Database schema
│ └── migrations/ # Database migrations
├── scripts/ # Utility scripts
│ ├── setup.js # Initial setup
│ └── monitor-daemon.js # Background monitor
└── public/ # Static assetsPerformance Considerations
- Server Components: Most pages use React Server Components for optimal performance
- Static Generation: Public pages can be statically generated where appropriate
- Incremental Regeneration: Status pages update incrementally for fast refreshes
- Connection Pooling: Prisma manages database connections efficiently
- Caching: Built-in cache management for frequently accessed data
- Optimistic Updates: Admin UI uses optimistic updates for responsiveness