This document provides architectural diagrams and visual explanations of the Universal system architecture.
┌─────────────────────────────────────────────────────────────────┐
│ Universal System Architecture │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ Client Applications │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ React Web │ │ Mobile │ │ Desktop │ │
│ │ Application │ │ App │ │ Application │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
└───────────────────────────────┬─────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ API Gateway Layer │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ REST API │ │ WebSockets │ │ Auth │ │
│ │ Endpoints │◄───►│ (Reverb) │◄───►│ Services │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
└───────────────────────────────┬─────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ Application Layer │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Command │ │ Query │ │ Process │ │
│ │ Handlers │ │ Handlers │ │ Managers │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
└───────────────────────────────┬─────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ Domain Layer │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Aggregates │ │ Events │ │ Domain │ │
│ │ │ │ │ │ Services │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
└───────────────────────────────┬─────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ Infrastructure Layer │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Event Store │ │ Projections │ │ External │ │
│ │ & Database │ │ (Read Models)│ │ Services │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ Event Sourcing Flow │
└─────────────────────────────────────────────────────────────────┘
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Client App │ │ Command │ │ Aggregate │
│ │───1────►│ Handler │──2───►│ │
└──────────────┘ └──────────────┘ └──────────────┘
│
│ 3. Generate
▼
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Projections │◄───6───────│ Event Bus │◄──5───│ Events │
│ (Read Models)│ │ │ │ │
└──────────────┘ └──────────────┘ └──────────────┘
│ ▲ │
│ │ │
│ │ 7. Publish │ 4. Store
│ │ ▼
│ ┌──────────────┐ ┌──────────────┐
│ │ External │ │ Event Store │
└───8─►Client Query◄─┤ Systems │ │ │
└──────────────┘ └──────────────┘
1. Client submits command
2. Command handler validates and loads aggregate
3. Aggregate generates domain events
4. Events are stored in event store
5. Events are loaded into event bus
6. Projectors update read models based on events
7. External systems react to events
8. Client queries optimized read models
┌─────────────────────────────────────────────────────────────────┐
│ Vertical Slice Architecture │
└─────────────────────────────────────────────────────────────────┘
┌──────────────┬───────────────┬──────────────┬───────────────────┐
│ Subscription│ Bills │ Investments │ Expenses │
│ Feature │ Feature │ Feature │ Feature │
├──────────────┼───────────────┼──────────────┼───────────────────┤
│ API │ API │ API │ API │
│ Controllers │ Controllers │ Controllers │ Controllers │
├──────────────┼───────────────┼──────────────┼───────────────────┤
│ Commands/ │ Commands/ │ Commands/ │ Commands/ │
│ Queries │ Queries │ Queries │ Queries │
├──────────────┼───────────────┼──────────────┼───────────────────┤
│ Domain │ Domain │ Domain │ Domain │
│ Models │ Models │ Models │ Models │
├──────────────┼───────────────┼──────────────┼───────────────────┤
│ Events │ Events │ Events │ Events │
├──────────────┼───────────────┼──────────────┼───────────────────┤
│ Projections │ Projections │ Projections │ Projections │
└──────────────┴───────────────┴──────────────┴───────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ Shared Infrastructure │
│ │
│ Event Store | Message Bus | Read DB | Auth │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ Command Flow (Write Path) │
└─────────────────────────────────────────────────────────────────┘
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│ Client │────►│ API │────►│ Command │────►│ Command │
│ │ │ Controller│ │ │ │ Handler │
└──────────┘ └──────────┘ └──────────┘ └──────────┘
│
▼
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│ Event │◄────│ Domain │◄────│ Aggregate │◄────│ Repository│
│ Store │ │ Events │ │ │ │ │
└──────────┘ └──────────┘ └──────────┘ └──────────┘
┌─────────────────────────────────────────────────────────────────┐
│ Query Flow (Read Path) │
└─────────────────────────────────────────────────────────────────┘
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│ Client │────►│ API │────►│ Query │────►│ Query │
│ │ │ Controller│ │ │ │ Handler │
└──────────┘ └──────────┘ └──────────┘ └──────────┘
│
▼
┌──────────┐
│ Read │
│ Model │
└──────────┘
┌─────────────────────────────────────────────────────────────────┐
│ Real-time Updates with Laravel Reverb │
└─────────────────────────────────────────────────────────────────┘
┌──────────┐ ┌──────────┐
│ │ │ │
│ Event │────────┐ ┌─────────│ React │
│ Store │ │ │ │ Client │
│ │ │ │ │ │
└──────────┘ ▼ │ └──────────┘
┌──────────┐ │ ▲
│ │ │ │
│ Event │ │ │
│ Bus │──────────────┘ │
│ │ │
└──────────┘ │
│ │
▼ │
┌──────────┐ ┌──────────┐ │
│ │ │ │ │
│ Event │──────────────► Reverb │────┘
│ Listener │ │ WebSocket│
│ │ │ │
└──────────┘ └──────────┘
┌─────────────────────────────────────────────────────────────────┐
│ Subscription Domain Components │
└─────────────────────────────────────────────────────────────────┘
┌──────────────────────────────┐ ┌──────────────────────────┐
│ Commands │ │ Domain Events │
│ │ │ │
│ ┌───────────────────────┐ │ │ ┌─────────────────────┐ │
│ │ CreateSubscription │ │ │ │ SubscriptionCreated │ │
│ └───────────────────────┘ │ │ └─────────────────────┘ │
│ │ │ │
│ ┌───────────────────────┐ │ │ ┌─────────────────────┐ │
│ │ CancelSubscription │ │ │ │ SubscriptionCanceled│ │
│ └───────────────────────┘ │ │ └─────────────────────┘ │
│ │ │ │
│ ┌───────────────────────┐ │ │ ┌─────────────────────┐ │
│ │ ChangeSubscriptionPlan│ │ │ │ SubscriptionChanged │ │
│ └───────────────────────┘ │ │ └─────────────────────┘ │
└──────────────────────────────┘ └──────────────────────────┘
┌──────────────────────────────┐ ┌──────────────────────────┐
│ Aggregates │ │ Projections │
│ │ │ │
│ ┌───────────────────────┐ │ │ ┌─────────────────────┐ │
│ │ SubscriptionAggregate │ │ │ │ ActiveSubscriptions │ │
│ │ - id │ │ │ └─────────────────────┘ │
│ │ - name │ │ │ │
│ │ - amount │ │ │ ┌─────────────────────┐ │
│ │ - billing_cycle │ │ │ │ SubscriptionHistory │ │
│ │ - status │ │ │ └─────────────────────┘ │
│ │ - createSubscription()| │ │ │
│ │ - cancelSubscription()| │ │ ┌─────────────────────┐ │
│ │ - changeSubscription()| │ │ │ UpcomingBillings │ │
│ └───────────────────────┘ │ │ └─────────────────────┘ │
└──────────────────────────────┘ └──────────────────────────┘
┌──────────────────────────────┐ ┌──────────────────────────┐
│ API Endpoints │ │ Read Models │
│ │ │ │
│ ┌───────────────────────┐ │ │ ┌─────────────────────┐ │
│ │ GET /subscriptions │ │ │ │ Subscription │ │
│ └───────────────────────┘ │ │ │ - id │ │
│ │ │ │ - name │ │
│ ┌───────────────────────┐ │ │ │ - amount │ │
│ │ POST /subscriptions │ │ │ │ - billing_cycle │ │
│ └───────────────────────┘ │ │ │ - status │ │
│ │ │ │ - start_date │ │
│ ┌───────────────────────┐ │ │ │ - next_billing_date │ │
│ │POST /subscriptions/{id}/│ │ │ │ - created_at │ │
│ │ cancel │ │ │ │ - updated_at │ │
│ └───────────────────────┘ │ │ └─────────────────────┘ │
└──────────────────────────────┘ └──────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ Database Schema │
└─────────────────────────────────────────────────────────────────┘
┌──────────────────────────┐ ┌──────────────────────────────┐
│ stored_events │ │ snapshots │
├──────────────────────────┤ ├──────────────────────────────┤
│ id │ │ id │
│ aggregate_uuid │───┐ │ aggregate_uuid │
│ aggregate_version │ │ │ aggregate_version │
│ event_class │ └──►│ state │
│ event_properties │ │ created_at │
│ meta_data │ │ │
│ created_at │ │ │
└──────────────────────────┘ └──────────────────────────────┘
┌──────────────────────────┐ ┌──────────────────────────────┐
│ subscriptions │ │ subscription_plans │
├──────────────────────────┤ ├──────────────────────────────┤
│ id │ │ id │
│ user_id │ │ name │
│ plan_id │───┐ │ price │
│ name │ └──►│ billing_cycle │
│ amount │ │ description │
│ billing_cycle │ │ features │
│ start_date │ │ created_at │
│ next_billing_date │ │ updated_at │
│ status │ │ │
│ created_at │ │ │
│ updated_at │ │ │
└──────────────────────────┘ └──────────────────────────────┘
┌──────────────────────────┐ ┌──────────────────────────────┐
│ expenses │ │ categories │
├──────────────────────────┤ ├──────────────────────────────┤
│ id │ │ id │
│ user_id │ │ name │
│ category_id │───┐ │ type │
│ description │ └──►│ color │
│ amount │ │ created_at │
│ date │ │ updated_at │
│ notes │ │ │
│ created_at │ │ │
│ updated_at │ │ │
└──────────────────────────┘ └──────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ Deployment Architecture │
└─────────────────────────────────────────────────────────────────┘
┌───────────────┐
│ Load Balancer│
│ (Nginx) │
└───────┬───────┘
│
┌───────────────┴───────────────┐
│ │
┌───────▼──────┐ ┌────────▼─────┐
│ Web Server │ │ Web Server │
│ (App 1) │ │ (App 2) │
└───────┬──────┘ └────────┬─────┘
│ │
┌───────▼──────┐ ┌────────▼─────┐
│ PHP-FPM │ │ PHP-FPM │
│ Process 1 │ │ Process 2 │
└───────┬──────┘ └────────┬─────┘
│ │
└───────────┬───────────────────┘
│
┌──────────▼──────────┐
│ │
┌───────▼────────┐ ┌───────▼────────┐
│ Database │ │ Redis Cache │
│ (MySQL) │ │ & Queue │
└────────────────┘ └────────────────┘
│
┌───────▼────────┐ ┌────────────────┐
│ Laravel Reverb │ │ Queue Workers │
│ WebSocket Server│ │ │
└────────────────┘ └────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ Mobile App Architecture │
└─────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────┐
│ React Native App │
├──────────────────────────────────┤
│ │
│ ┌───────────────────────────┐ │
│ │ UI Components │ │
│ └───────────────┬───────────┘ │
│ │ │
│ ┌───────────────▼───────────┐ │
│ │ State Management │ │
│ │ (React Query) │ │
│ └───────────────┬───────────┘ │
│ │ │
│ ┌───────────────▼───────────┐ │
│ │ API Client │ │
│ └───────────────┬───────────┘ │
│ │ │
└──────────────────┼───────────────┘
│
▼
┌──────────────────────────────────┐
│ Backend Services │
├──────────────────────────────────┤
│ │
│ ┌───────────────────────────┐ │
│ │ REST API │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ WebSockets │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ Authentication │ │
│ └───────────────────────────┘ │
│ │
└──────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ Design System Architecture │
└─────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────┐
│ Design Tokens │
├──────────────────────────────────┤
│ - Colors │
│ - Typography │
│ - Spacing │
│ - Breakpoints │
│ - Shadows │
│ - Animations │
└──────────────────┬───────────────┘
│
▼
┌──────────────────────────────────┐
│ Core Components │
├──────────────────────────────────┤
│ - Button │
│ - Input │
│ - Card │
│ - Typography │
│ - Icon │
│ - Modal │
└──────────────────┬───────────────┘
│
▼
┌──────────────────────────────────┐
│ Composite Components │
├──────────────────────────────────┤
│ - Form │
│ - DataTable │
│ - Navigation │
│ - Calendar │
│ - Charts │
└──────────────────┬───────────────┘
│
▼
┌──────────────────────────────────┐
│ Feature Components │
├──────────────────────────────────┤
│ - SubscriptionForm │
│ - ExpenseTracker │
│ - BillsOverview │
│ - InvestmentDashboard │
└──────────────────────────────────┘
These diagrams provide a visual representation of the Universal architecture, showing the relationships and interactions between different components of the system. They are valuable for understanding the system structure, data flow, and deployment considerations.