Skip to main content

API Gateway & Frontend MVP Architecture

Orchestrating high-performance client-server communication and decoupling UI presentation logic from business rules using the React MVP pattern.

TL;DR

Engineered a high-throughput API Gateway (BC15) utilizing FastHTTP to seamlessly translate RESTful and WebSocket requests into internal gRPC communications. Architected a framework-agnostic React frontend utilizing the Model-View-Presenter (MVP) pattern, ensuring strict separation of concerns and maximum UI testability.

The Challenge & Impact​

  • The Challenge: Direct client-to-microservice communication creates severe tight coupling, exposing internal network topologies and complicating cross-cutting concerns (Auth, CORS). On the client side, tangling complex financial business logic directly within React components leads to a brittle, untestable frontend architecture.
  • The Objective: To establish a secure, unified edge gateway that acts as a reverse proxy and protocol translator (REST to gRPC). Simultaneously, to enforce a rigid frontend design pattern that completely isolates the presentation layer from the data state.
  • The Impact: Centralized security routing and achieved high-concurrency WebSocket streaming with zero memory leaks. Delivered a highly maintainable frontend codebase where core financial models can be tested independently of React's rendering lifecycle.

Architecture & Execution​

Tech Stack​

Golang, FastHTTP, gRPC, React, MVP Pattern, WebSockets, errgroup

1. The Entry Point: API Gateway (BC15)​

The API Gateway serves as the strict single entry point for all external traffic, shielding the internal Kubernetes microservices from public exposure.

  • Protocol Translation (REST to gRPC): Utilized high-performance libraries (FastHTTP and FastHTTP-routing) for efficient request handling. Integrated internal gRPC backend services by wrapping connections within the RESTful API layer, exposing standard, robustly versioned endpoints to the frontend.
  • Unified Edge Security: Centralized cross-cutting concerns at the edge, preventing internal microservices from redundantly implementing authentication and network policies.

👉 Deep Dive on the LZStock Tech Blog: API Design and Versioning

2. Frontend Architecture: React MVP Pattern​

Instead of relying on standard React anti-patterns (e.g., placing complex data fetching and state mutation directly inside useEffect or UI components), I implemented the Model-View-Presenter (MVP) pattern.

  • Model: Encapsulates the core financial data, types, and domain logic.
  • View (React): A "dumb" presentation layer strictly responsible for rendering the UI and capturing user events.
  • Presenter: The brain of the frontend. It fetches data from the API Gateway, handles the business logic, and updates the View. This creates a framework-free, highly maintainable, and fully controllable frontend architecture.

👉 Deep Dive on the LZStock Tech Blog: React MVP Project structure

Advanced Mechanics 1: High-Performance WebSocket Streaming​

⚙️ View real-time streaming implementation

Handling real-time financial market data requires resilient, concurrent execution at the Gateway layer to stream data efficiently to the React frontend.

  • FastHTTP WebSockets: Implemented real-time bidirectional communication utilizing the FastHTTP Websocket package for zero-allocation performance.
  • Goroutine Orchestration: Leveraged the errgroup package to concurrently execute and coordinate multiple goroutines. This ensures graceful shutdown mechanisms, precise context cancellations, and centralized error propagation across complex gRPC streaming and WebSocket handling tasks.

👉 Deep Dive on the LZStock Tech Blog: Websocket Integration

Advanced Mechanics 2: Security & Access Control​

⚙️ View middleware security design

The API Gateway intercepts and sanitizes all incoming traffic through a strict middleware pipeline before routing to internal bounded contexts (e.g., Auth & Session BC13):

  • Route-Based Access Control (RBAC): Implemented a custom authentication middleware to verify session states and permissions on a per-route basis, ensuring unauthorized requests are dropped at the edge.
  • Environment-Aware CORS: Demonstrated a robust Cross-Origin Resource Sharing (CORS) strategy by architecting middleware that applies separate, dynamically injected configurations for Development (loose, localhost allowed) and Production (strict, authorized domains only) environments.

👉 Deep Dive on the LZStock Tech Blog: Implementation details of Route-based access control

Feature Walkthrough​

⚙️ View Feature Demos

Create Dashboard, Create Watchlist and Add Company​

Auto Sign-in after Sign-up​

Create Multiple Watchlist​

🌟 Present-Day Retrospective​

Architectural Trade-offs at the Edge and Client:

  1. React MVP vs. Modern State Management: While the MVP pattern provides exceptional framework-agnostic maintainability and testability, it introduces significant boilerplate code compared to modern React ecosystem solutions (like custom Hooks combined with Zustand or Redux Toolkit). If rebuilding today with a larger team, I would evaluate adopting standardized Hook-based architectures to optimize development velocity while still maintaining a strict separation of concerns.

  2. Custom Golang Gateway vs. Off-the-Shelf Solutions: Building a custom API Gateway in Go via FastHTTP offered ultimate control over WebSocket orchestration and custom gRPC wrapping. However, managing rate limiting, JWT validation, and CORS at the code level scales poorly as the number of microservices grows. For a true enterprise deployment, I would transition to a battle-tested API Gateway (such as Kong or Envoy) to handle L7 routing and security policies, leaving the Go services strictly for domain logic.