🏗️ Task Manager Pro - Architecture

graph TB subgraph Users["👥 Users"] Web[Web Browser] Mobile[Mobile PWA] end subgraph CDN["☁️ AWS CloudFront"] CF[CDN + SSL/TLS] end subgraph Frontend["🎨 Frontend"] React[React.js
Service Worker] end subgraph Backend["⚙️ Backend"] Spring[Spring Boot
REST API] end subgraph Database["💾 Database"] MariaDB[(MariaDB
AWS RDS)] end subgraph Auth["🔐 Authentication"] Google[Google OAuth 2.0] Facebook[Facebook OAuth 2.0] end subgraph Notifications["📬 Notifications"] SES[AWS SES
Email] SNS[AWS SNS
SMS] WebPush[Web Push API
VAPID] end subgraph Payments["💳 Payments"] Stripe[Stripe API] end Users --> CF CF --> React CF --> Spring Spring --> MariaDB Spring --> Google Spring --> Facebook Spring --> SES Spring --> SNS Spring --> WebPush Spring --> Stripe

sequenceDiagram autonumber participant U as 👤 User participant R as 🎨 React Frontend participant S as ⚙️ Spring Boot participant G as 🔵 Google OAuth U->>R: Click "Login with Google" R->>G: Redirect to Google OAuth U->>G: Enter Google credentials G->>R: Return Authorization Code R->>S: Send Auth Code to backend S->>G: Exchange code for tokens G->>S: Return ID token + Access token S->>S: Verify token, create/find user S->>S: Generate JWT token S->>R: Return JWT + User Info R->>R: Store JWT in localStorage R->>U: Show Dashboard

sequenceDiagram autonumber participant U as 👤 User participant R as 🎨 React Frontend participant S as ⚙️ Spring Boot participant F as 🔵 Facebook OAuth U->>R: Click "Login with Facebook" R->>F: Redirect to FB OAuth Dialog U->>F: Approve permissions F->>R: Redirect with Auth Code R->>S: Send Auth Code to backend S->>F: Exchange code for access token F->>S: Return access token S->>F: GET /me?fields=id,name,email F->>S: Return user profile data S->>S: Create/find user, Generate JWT S->>R: Return JWT + User Info R->>U: Show Dashboard

sequenceDiagram autonumber participant U as 👤 User participant SW as 🔧 Service Worker participant S as ⚙️ Spring Boot participant D as 💾 MariaDB participant WP as 🔔 Web Push Service Note over U,WP: === SUBSCRIPTION PHASE === U->>SW: Enable notifications SW->>U: Request permission U->>SW: Grant permission SW->>WP: Subscribe with VAPID public key WP->>SW: Return PushSubscription SW->>S: POST /api/push/subscribe S->>D: Store endpoint, p256dh_key, auth_key Note over U,WP: === NOTIFICATION PHASE (Scheduler) === S->>D: Query tasks due in 1 hour D->>S: Return task list S->>D: Get user push subscriptions D->>S: Return endpoint + keys S->>WP: Send push via VAPID (encrypted) WP->>SW: Deliver to Service Worker SW->>U: 🔔 "Task Due in 1 hour!"

sequenceDiagram autonumber participant C as ⏰ Scheduler participant S as ⚙️ Spring Boot participant D as 💾 MariaDB participant SNS as 📱 AWS SNS participant U as 👤 User Phone C->>S: Trigger hourly check S->>D: Query tasks due in 1 hour D->>S: Return task list S->>D: Check user subscription plan D->>S: Plan: Pro, SMS: Enabled S->>D: Get user phone number D->>S: Return +1234567890 S->>SNS: SNS Publish SMS SNS->>U: 📲 "Task Due in 1 hour" S->>D: Log notification sent

sequenceDiagram autonumber participant C as ⏰ Scheduler participant S as ⚙️ Spring Boot participant D as 💾 MariaDB participant SES as 📧 AWS SES participant U as 👤 User Email C->>S: Daily digest trigger (8 AM) S->>D: Query users with email enabled D->>S: Return user list S->>D: Query tasks due today per user D->>S: Return task list S->>S: Build HTML email template S->>SES: SES SendEmail API SES->>U: 📧 Daily Task Digest S->>D: Log email sent

sequenceDiagram autonumber participant U as 👤 User participant R as 🎨 React Frontend participant S as ⚙️ Spring Boot participant ST as 💳 Stripe API participant D as 💾 MariaDB U->>R: Select Pro Plan ($9.99/mo) R->>S: POST /api/stripe/create-checkout S->>ST: Create Checkout Session ST->>S: Return session URL S->>R: Return checkout URL R->>U: Redirect to Stripe Checkout U->>ST: Enter payment details ST->>U: Payment successful Note over ST,D: Webhook (async) ST->>S: POST /webhook (checkout.session.completed) S->>D: Update user subscription D->>D: Plan: Pro, Status: Active U->>R: Redirect back to app R->>S: GET /api/stripe/subscription S->>D: Query subscription status S->>R: Return Pro plan details R->>U: 🎉 Pro features unlocked!

graph TB subgraph Internet["🌐 Internet"] Users[👥 Users] end subgraph AWS["☁️ AWS Cloud (us-east-1)"] subgraph Edge["Edge Services"] Route53[Route 53
DNS] CloudFront[CloudFront
CDN + SSL] end subgraph Compute["Compute"] S3[S3 Bucket
React Frontend] EC2[EC2 Instance
Spring Boot] end subgraph Data["Data Layer"] RDS[(RDS MariaDB
Primary)] end subgraph Services["Supporting Services"] SES[SES - Email] SNS[SNS - SMS] Secrets[Secrets Manager] CloudWatch[CloudWatch Logs] S3_Backup[S3 - Backups] end end subgraph External["External Services"] Google[Google OAuth] Facebook[Facebook OAuth] Stripe[Stripe Payments] WebPush[Web Push Services] end Users --> Route53 Route53 --> CloudFront CloudFront --> S3 CloudFront --> EC2 EC2 --> RDS EC2 --> SES EC2 --> SNS EC2 --> Secrets EC2 --> CloudWatch RDS --> S3_Backup EC2 --> Google EC2 --> Facebook EC2 --> Stripe EC2 --> WebPush

graph LR subgraph Dev["👨‍💻 Development"] Code[Code Changes] Git[Git Push] end subgraph CI["🔄 CI"] Build[Build] Test[Test] Lint[Lint] end subgraph CD["🚀 CD"] Docker[Docker Build] Deploy[Deploy] end subgraph Prod["☁️ Production"] Frontend[S3 + CloudFront] Backend[Docker Container] DB[(MariaDB)] end subgraph Ops["📊 Operations"] Health[Health Checks] Backup[DB Backups] Alerts[Slack Alerts] end Code --> Git Git --> Build Build --> Test Test --> Lint Lint --> Docker Docker --> Deploy Deploy --> Frontend Deploy --> Backend Backend --> DB Frontend --> Health Backend --> Health DB --> Backup Health --> Alerts