Trijaya Docs
Developer Guide

Backend Architecture

Laravel MVC architecture with Vue.js frontend integration

The TriPay application follows a monolithic architecture built on Laravel framework with Vue.js for frontend interactivity. This architecture combines the traditional MVC (Model-View-Controller) pattern with modern frontend components and service layers for better separation of concerns.

Component Details

1. Browser

The entry point where users interact with the application through web browsers. All HTTP requests originate from here and responses are rendered back to the user.

2. Router

Laravel's routing system that acts as the traffic controller for all incoming requests. Use Laravel Mix with Vue Router 2 for frontend routing.

a. Route to Pages (Vue Router)

  • Handles frontend navigation
  • Used for user-facing pages (dashboard, transactions, settings, etc.)
  • Example: admin/dashboard, admin/transactions, member/merchant, member/withdraw

b. Route to Controller

  • Handles API requests and form submissions
  • Directs requests to Controller for processing
  • Used for data manipulation and business logic
  • Example: /api/transaction/create, /api/merchant/update

3. View (Blade + Vue)

The presentation layer that combines Laravel Blade templating with Vue.js components.

a. Blade Templates

  • View for static front pages.
  • Provides SEO-friendly content
  • Examples: /, /about-us, /terms-and-conditions, developer, etc.
  • Located in resources/views/

b. Vue.js Components

  • View for dashboard Admin, Member, and Simulator
  • Use client-side interactivity
  • Build and compiled using Laravel Mix
  • Examples: admin/dashboard, admin/transactions, member/merchant, member/withdraw
  • Located in resources/js/

4. Controller

The orchestrator that handles HTTP requests, processes business logic, and coordinates between different layers.

5. Service

A dedicated layer for complex business logic and external service integrations.

Use Cases:

  • Payment provider integrations
  • Email service (Amazon SES)
  • File storage (Amazon S3)
  • WhatsApp notification service
  • Analytics tracking
  • KYC verification (Verihubs, Gemini)

6. Model

The data layer that represents database tables and handles data operations using Laravel's Eloquent ORM.

7. Database (MySQL)

The persistence layer where all application data is stored.

Database Structure:

  • Relational database management system
  • Stores user data, transactions, settings, logs
  • Ensures data integrity and consistency
  • Handles concurrent access

Key Tables:

  • users - User accounts and authentication
  • merchants - Merchant profiles and configurations
  • transactions - Payment transaction records
  • channels - Available payment channels
  • withdrawals - Withdrawal history
  • fees - Transaction fee configurations
  • logs - System and activity logs

8. Third-Party Services

External services integrated into the application for extended functionality.

Integrated Services:

  1. Payment Providers
    • BCA, BNI, Neo, NOBU, Prismalink
    • DurianPay, LinkQu, Esmartlink, PakaiLink
    • Purpose: Process payments and settlements
  2. Email Service
    • Amazon SES
    • Purpose: Transactional email delivery
  3. Storage Service
    • Amazon S3
    • Purpose: File storage and backups
  4. Analytics
    • Google Analytics, Microsoft Clarity, PostHog
    • Purpose: User behavior tracking and analytics
  5. KYC Services
    • Verihubs, Gemini
    • Purpose: Identity verification
  6. Messaging
    • WhatsApp API
    • Purpose: Customer notifications
  7. Automation
    • n8n
    • Purpose: Workflow automation
  8. Reporting
    • Metabase
    • Purpose: Data analytics and dashboards

Request Flow

Page Request Flow

Browser → Router → View (Blade + Vue) → Browser
  1. User accesses a page URL
  2. Router receives the request
  3. Router directs to appropriate View
  4. Blade template renders with Vue components
  5. Response sent back to Browser

API Request Flow

Browser → Router → Controller → Service/Model → Database
                      ↓
                   Response ← Service ← Third-party
  1. User performs an action (form submit, button click)
  2. Browser sends API request
  3. Router directs to appropriate Controller
  4. Controller validates request
  5. Controller calls Service (if needed) or Model
  6. Service may call Third-party services
  7. Model executes database queries
  8. Response travels back through Controller to Browser

Data Submission Flow

View (Frontend Input) → Controller → Service → Model → Database
                                       ↓
                              Third-party Services
  1. User fills form in View
  2. Vue component sends data to Controller
  3. Controller validates input
  4. Controller delegates to Service (if complex)
  5. Service/Controller uses Model for database operations
  6. Service may interact with Third-party services
  7. Success/error response sent back to View

Design Patterns

1. MVC Pattern (Model-View-Controller)

  • Model: Data and business logic
  • View: Presentation layer
  • Controller: Orchestrates Model and View

2. Service Layer Pattern

  • Separates business logic from controllers
  • Promotes code reusability and testability

3. Repository Pattern

  • Models act as repositories for data access
  • Abstraction over database operations

4. Dependency Injection

  • Laravel's service container handles dependencies
  • Promotes loose coupling and testability

Best Practices

Controller Guidelines

  1. Keep controllers thin and focused
  2. Validate requests using Form Request classes
  3. Delegate complex logic to Services
  4. Return consistent response formats
  5. Use resource controllers for RESTful APIs

Service Guidelines

  1. Create services for complex business logic
  2. Make services reusable across controllers
  3. Handle third-party integrations in services
  4. Write unit tests for service methods
  5. Use dependency injection for service dependencies

Model Guidelines

  1. Define relationships clearly
  2. Use scopes for reusable queries
  3. Implement accessors/mutators for data transformation
  4. Add validation rules in model or Form Request
  5. Use model events for automated actions

View Guidelines

  1. Keep Blade templates clean and simple
  2. Use Vue components for interactive elements
  3. Separate concerns between Blade and Vue
  4. Implement proper data binding
  5. Optimize component rendering

Security Considerations

  1. Input Validation: All user inputs validated in Form Requests
  2. CSRF Protection: Laravel's CSRF tokens for form submissions
  3. SQL Injection Prevention: Eloquent ORM prevents SQL injection
  4. XSS Protection: Blade templating auto-escapes output
  5. Authentication: Laravel Sanctum/Passport for API authentication
  6. Authorization: Policies and Gates for access control
  7. Rate Limiting: Throttling for API endpoints
  8. Secure API Keys: Environment variables for sensitive data

Performance Optimization

  1. Query Optimization: Use eager loading to prevent N+1 queries
  2. Caching: Implement Redis/Memcached for frequently accessed data
  3. Queue Jobs: Background processing for time-consuming tasks
  4. Database Indexing: Proper indexes on frequently queried columns
  5. Asset Optimization: Minification and bundling of JS/CSS
  6. CDN Usage: Serve static assets via CDN
  7. Database Connection Pooling: Reuse database connections

Conclusion

The TriPay architecture combines the robustness of Laravel's MVC pattern with modern Vue.js frontend capabilities, creating a maintainable and scalable monolithic application. The addition of Service layer provides better separation of concerns, making the codebase more organized, testable, and easier to maintain as the application grows.

System Architecture

Frontend Architecture

This section explains the frontend architecture and structure.