🏗️ System Architecture

Architecture Overview

The iSpeaker platform follows a modern three-tier architecture with separate presentation, application, and data layers. The system is designed for scalability, maintainability, and high availability.

High-Level Architecture Diagram

Architecture Principles

🛠️ Technology Stack

Complete technology stack covering all layers of the application.

Frontend Technologies

Mobile Technologies (Flutter)

Backend Technologies

Database & Caching

Infrastructure & DevOps

Third-Party Services

🔧 System Components

1. Web Application (Next.js)

Server-side rendered React application providing the main user interface.

Architecture Pattern:

• App Router: Next.js 14+ app directory structure
• Server Components: RSC for improved performance
• Client Components: Interactive UI elements
• API Routes: Backend for frontend (BFF) pattern

Directory Structure:

app/
├── (auth)/
│   ├── login/
│   ├── register/
│   └── forgot-password/
├── (dashboard)/
│   ├── student/
│   │   ├── courses/
│   │   ├── books/
│   │   └── profile/
│   └── speaker/
│       ├── courses/
│       ├── analytics/
│       └── earnings/
├── courses/
│   ├── [id]/
│   └── watch/[lessonId]/
├── books/
│   └── [id]/
├── feed/
├── messages/
└── api/
    └── [...]/

Key Features:

• SSR for SEO optimization
• Image optimization with Next.js Image
• Code splitting and lazy loading
• Progressive Web App (PWA) capabilities
• Responsive design for all devices

2. Mobile Applications (Flutter)

Native iOS and Android applications built with Flutter for optimal performance.

Architecture Pattern:

• Clean Architecture: Separation of presentation, domain, and data layers
• Feature-based Structure: Organized by feature modules
• Provider/Riverpod: State management

Directory Structure:

lib/
├── core/
│   ├── constants/
│   ├── utils/
│   └── theme/
├── features/
│   ├── auth/
│   ├── feed/
│   ├── courses/
│   ├── books/
│   ├── rooms/
│   └── consultations/
├── data/
│   ├── models/
│   ├── repositories/
│   └── providers/
├── presentation/
│   ├── screens/
│   ├── widgets/
│   └── controllers/
└── main.dart

Key Features:

• Offline-first architecture with Hive
• Background sync for data
• Push notifications with FCM
• Deep linking support
• Biometric authentication
• Dark mode support

3. Backend API (Laravel)

RESTful API server handling all business logic and data operations.

Directory Structure:

app/
├── Http/
│   ├── Controllers/
│   │   ├── API/
│   │   │   ├── AuthController.php
│   │   │   ├── PostController.php
│   │   │   ├── CourseController.php
│   │   │   └── ...
│   │   └── ...
│   ├── Middleware/
│   ├── Requests/
│   └── Resources/
├── Models/
│   ├── User.php
│   ├── Post.php
│   ├── Course.php
│   └── ...
├── Services/
│   ├── PaymentService.php
│   ├── NotificationService.php
│   └── ...
├── Repositories/
├── Events/
├── Listeners/
└── Jobs/

API Design Principles:

• RESTful: Standard HTTP methods (GET, POST, PUT, DELETE)
• Versioned: API versioning (v1, v2) for backward compatibility
• Resource-based: URLs represent resources
• JSON: All responses in JSON format
• Pagination: Large datasets paginated
• Rate Limiting: Prevent abuse with rate limits

API Response Format:

{
  "success": true,
  "message": "Operation successful",
  "data": {
    // Response data
  },
  "meta": {
    "pagination": {
      "current_page": 1,
      "total_pages": 10,
      "per_page": 20,
      "total": 200
    }
  }
}

4. Real-time Communication (Laravel Echo + Pusher)

WebSocket server for real-time features like chat, notifications, and live updates.

Real-time Features:

• Direct messaging
• Live notifications
• Post reactions and comments (live)
• Online status indicators
• Typing indicators
• Live room updates

Implementation:

// Server-side (Laravel)
broadcast(new MessageSent($message));

// Client-side (Next.js)
Echo.channel('chat.' + userId)
    .listen('MessageSent', (e) => {
        // Handle new message
    });

5. Video Streaming (Jitsi Meet)

Self-hosted Jitsi Meet server for live rooms and consultations.

Deployment Options:

Integration:

• Jitsi IFrame API for web
• Jitsi Meet SDK for mobile apps
• JWT authentication for secure access
• Custom branding and theming
• Recording capability

📊 Data Flow Architecture

Request Flow Diagram

Authentication Flow

Payment Processing Flow

File Upload Flow

☁️ Infrastructure & Deployment

DigitalOcean Infrastructure

Server Architecture

Scaling Strategy

Deployment Pipeline (CI/CD)

Deployment Process:

1. Code Commit: Developer pushes code to GitHub
2. Automated Tests: PHPUnit tests run automatically
3. Build: Dependencies installed, assets compiled
4. Security Scan: Check for vulnerabilities
5. Deploy to Staging: Test in staging environment
6. Manual Approval: QA team approves for production
7. Production Deploy: Zero-downtime deployment with Laravel Envoyer
8. Post-Deploy: Run migrations, clear caches
9. Health Check: Verify application is running
10. Rollback (if needed): Automatic rollback on failure

🔒 Security Architecture

Security Layers

Authentication & Authorization

Data Protection

Application Security

Security Best Practices

• Rate Limiting: Prevent brute force attacks (60 requests/minute per IP)
• DDoS Protection: Cloudflare or DigitalOcean DDoS protection
• Firewall: UFW firewall configured to allow only necessary ports
• Fail2Ban: Ban IPs after repeated failed login attempts
• Security Headers: HSTS, X-Content-Type-Options, X-Frame-Options
• CORS: Properly configured Cross-Origin Resource Sharing
• API Versioning: Prevent breaking changes, maintain security patches
• Logging: Comprehensive logging for audit trails
• Error Handling: Generic error messages (no sensitive data leaked)
• Dependency Updates: Regular updates for security patches

Payment Security (PCI DSS Compliance)

Compliance & Privacy

Security Monitoring & Incident Response

• Log Monitoring: Centralized logging with Papertrail/ELK Stack
• Intrusion Detection: Monitor for suspicious activities
• Error Tracking: Sentry for real-time error monitoring
• Uptime Monitoring: UptimeRobot for availability checks
• Security Audits: Regular penetration testing
• Incident Response Plan: Documented procedures for security incidents
• Backup Strategy: Daily automated backups with 30-day retention
• Disaster Recovery: Recovery procedures documented and tested

⚡ Performance Optimization

Frontend Optimization

Backend Optimization

CDN & Asset Delivery

• Static Assets: All CSS, JS, images served via CDN
• Media Files: Videos and PDFs served from DigitalOcean Spaces with CDN
• Geo-distribution: CDN edge servers in multiple regions
• Cache-Control: Long cache times for immutable assets (1 year)
• Adaptive Bitrate: Video streaming adjusts to user's bandwidth

Performance Targets

📊 Monitoring & Logging

Application Monitoring

Infrastructure Monitoring

Logging Strategy

• Application Logs: Laravel log files rotated daily
• Access Logs: Nginx access logs for traffic analysis
• Error Logs: PHP and Nginx error logs
• Security Logs: Failed login attempts, suspicious activities
• Audit Logs: User actions, data modifications
• Payment Logs: All payment transactions logged
• Retention: Logs retained for 90 days