Keep the browser behind a BFF
The frontend calls one controlled API boundary instead of connecting directly to internal report services.
← Back to projects
Case Study · Data & Business Dashboard
Executive Reporting Dashboard & BFF
An internal reporting platform that turns daily e-contract data into a usable executive dashboard while keeping the browser away from the report service and database.
My role
Frontend dashboard & BFF development
Stack
Angular 19 · Express BFF · TypeScript · REST API · Docker · Redis Session · Jest
The problem
Executives needed daily e-contract numbers in a form that was easier to understand than raw API responses. The dashboard also had to respect existing service boundaries: the browser should not query the report service directly or access the database, and repeated or expensive requests needed protection at the BFF layer.
What I built
I contributed to an Angular dashboard backed by an Express BFF. The frontend focuses on login, report views, Thai date filtering, drilldown, and chat-based report questions. The BFF acts as the single API boundary, proxies approved report endpoints, handles authentication flow, applies request controls and upstream timeouts, and keeps the report source of truth behind the service boundary.
My contributions
- Built and refined executive overview surfaces for daily e-contract reporting.
- Implemented grouped KPI views, report details, Thai date handling, and drilldown interactions.
- Worked on the Express BFF that proxies report APIs instead of exposing the upstream service to the browser.
- Added request IDs, rate limiting, upstream health checks, and timeout handling at the BFF boundary.
- Implemented a rule-based report assistant with whitelisted API tools rather than unrestricted data access.
- Hardened authentication and session behavior with HttpOnly session handling and environment-aware auth configuration.
- Added targeted frontend/BFF tests and Docker-oriented deployment safeguards.
Architecture
The browser communicates only with the Express BFF. The BFF handles login/logout through login-service and proxies approved report requests to report-econtract-service, which remains the source of truth for report data. The dashboard does not access a database directly.
01
Angular Browser
02
Express BFF
03
Report E-Contract Service
04
Report Data
Key technical decisions
Keep report data in the source service
The dashboard consumes report APIs and does not duplicate SQL or business report queries in the frontend.
Use rule-based assistant tools
The report assistant classifies supported questions and can call only explicitly allowed report APIs.
Protect the upstream service
Rate limits, request IDs, health probes, and upstream timeouts make the BFF a controlled boundary for operational traffic.
Challenges & solutions
Executive data vs raw APIs
The dashboard needed to present the same source data as clear KPIs, summaries, and drilldowns without creating a second reporting source.
Browser-to-service boundaries
The browser was kept away from report-econtract-service; all report traffic passes through the BFF so authentication and operational controls stay centralized.
Date-driven reporting
Daily reports needed Thai date handling and explicit report-date context so the selected date could be carried consistently through the UI and API requests.
Protecting shared services
The BFF applies rate limits and upstream timeout/health controls so bursts or unavailable dependencies do not become uncontrolled browser traffic.
Engineering evidence
- Angular executive overview and e-contract report surfaces.
- Express BFF report proxy with explicit upstream mapping and timeout handling.
- Rule-based report assistant with whitelisted API tools and structured answers.
- Authentication/session hardening, request IDs, rate limiting, and health probes.
- Docker multi-stage build and deployment-oriented runtime configuration.
- Targeted Jest coverage for report-overview and BFF middleware behavior.
Result
The system gives executives a focused reporting workspace while preserving a clean boundary around internal services. Report data stays owned by report-econtract-service, the browser stays behind the BFF, and operational guardrails are applied before traffic reaches shared backend services.