Architecture

How B-Accesible’s microservices, API gateway, AI layer, and React frontend connect to deliver accessible digital banking.

System overview

B-Accesible is a microservices-based digital banking proof of concept. Every request from the browser passes through the Ocelot API Gateway on port 5000, which validates JWT tokens and routes traffic to the appropriate downstream service. The gateway is the single entry point — no service is exposed directly to the client.

A Python FastAPI AI service runs alongside the .NET microservices and provides three machine-learning capabilities: difficulty nudging, accessibility profiling, and risk/fraud scoring.

┌─────────────────────────────────────────────────────┐
│                   Browser (React)                   │
│                 http://localhost:5173               │
└────────────────────────┬────────────────────────────┘
                         │ HTTP
                         ▼
┌─────────────────────────────────────────────────────┐
│           Ocelot API Gateway  :5000                 │
│        JWT validation · request routing             │
└──────┬─────────┬────────────┬──────────┬────────────┘
       │         │            │          │
       ▼         ▼            ▼          ▼
 ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
 │   Auth   │ │  Ledger  │ │  Open    │ │Analytics │
 │ Service  │ │ Service  │ │ Finance  │ │ Service  │
 │          │ │          │ │ Service  │ │  :7002   │
 └──────────┘ └──────────┘ └──────────┘ └──────────┘
       │             │           │             │
       └─────────────┴───────────┴─────────────┘
                         │
              ┌──────────▼──────────┐
              │   SQL Server 2022   │
              │       :1433         │
              │ auth_db · ledger_db │
              │ openfinance_db      │
              │ analytics_db        │
              └─────────────────────┘

          ┌──────────────────────────┐
          │  AI Service (FastAPI)    │
          │        :8001             │
          │ /ai/nudge               │
          │ /ai/accessibility        │
          │ /ai/risk                 │
          └──────────────────────────┘

Services

Ocelot Gateway

.NET API Gateway running on port 5000. Uses the Ocelot library to validate incoming JWT tokens and reverse-proxy requests to downstream services. All routes are prefixed through the gateway — clients never call microservices directly.

Auth Service

Handles user registration, login, and JWT issuance. Also manages user profiles, accessibility profiles, and consent records. Routes: /api/auth, /api/profile.

Ledger Service

Manages bank accounts, SPEI transfers, transaction history, and beneficiary management. Routes: /api/ledger.

Open Finance Service

Manages connections to external banks and syncs financial products into the B-Accesible account view. Routes: /api/openfinance.

Analytics Service

Receives and stores user interaction events (time on screen, navigation patterns, validation errors). Used for measuring accessibility impact over time. Routes: /api/analytics. Port 7002.

AI Service

Python FastAPI service on port 8001. Provides three ML models: nudging (user difficulty detection), accessibility profiling, and risk/fraud scoring. Routes: /ai/nudge, /ai/accessibility, /ai/risk.

Database layout

All services share a single SQL Server 2022 instance on port 1433. Each service owns its own database, enforcing logical isolation:

Database	Owner service
auth_db	Auth Service
ledger_db	Ledger Service
openfinance_db	Open Finance Service
analytics_db	Analytics Service

Authentication flow

Every protected endpoint requires a JWT token issued by the Auth Service.

1. Login request

   The client calls POST /api/auth/login through the gateway with email and password credentials.

2. JWT issuance

   The Auth Service validates the credentials and returns a signed JWT token. The token is signed with JWT_SECRET_KEY.

3. Authenticated requests

   The client includes the token in every subsequent request:

   Authorization: Bearer <token>
   
4. Gateway validation

   The Ocelot gateway intercepts the request, validates the JWT signature and expiry, and — if valid — forwards the request to the downstream service. Invalid or missing tokens receive a 401 Unauthorized response before reaching any service.

AI integration flow

The AI service integrates at three points in the user journey:

1. Behavioral signal collection

   The frontend continuously collects lightweight behavioral signals: time spent on a screen, number of validation errors, and back-navigation count. These signals are assembled into a feature payload.

2. Nudging check

   The feature payload is sent to POST /ai/nudge. The model determines whether the user is experiencing difficulty and whether the app should proactively offer assistance or adjust the interface.

3. Accessibility profiling (onboarding)

   During the onboarding wizard, the app calls POST /ai/accessibility with the collected signals and any explicit preference inputs. The model recommends an accessibility profile (font size, contrast level, interaction mode) that is saved to the Auth Service.

4. Risk scoring (transfers)

   Before the user confirms a SPEI transfer, the app calls POST /ai/risk with transaction details. The model returns a risk score. The frontend renders a RiskBadge component on the confirmation screen, and the gateway can use the score to flag high-risk transactions.

The AI service is decoupled from the .NET microservices and runs as an independent Python process. It does not share the SQL Server database — any persistence is handled by the services that call it.

Frontend architecture

The frontend is a React 19 single-page application built with Vite, styled with TailwindCSS, and animated with Framer Motion. It runs on port 5173 during development.

Views

Each view maps to a route in the application:

View	Purpose
LoginView	User login
SignupView	Account registration
HomeView	Dashboard and quick actions
AccountsView	Bank account overview
CardsView	Payment cards
TransferView	SPEI transfer form
ReceiveView	Receive funds / QR code
PayServicesView	Bill and service payments
PreferencesView	Accessibility preference settings
WizardView	Onboarding accessibility wizard

Shared components

AcountCard

Displays a bank account summary with balance and account number.

ActionButton

Primary CTA button with accessible focus and contrast states.

ConfirmDialog

Modal confirmation dialog used before destructive or financial actions.

FontSelector / FontSizeSelector

Controls for changing typeface and text size within the accessibility preferences.

RiskBadge

Displays the AI-generated risk score on the transfer confirmation screen.

ProgressBar / StepWrapper

Progress indicator and step container used in the onboarding wizard.

InputField

Accessible form input with built-in validation error display.

ModalAlert / Toast

System notifications — modal for blocking alerts, toast for non-blocking feedback.

State management and services layer

Application state is managed with React Context. API communication is handled by a dedicated services layer built on axios, with one client per backend domain (auth, ledger, open finance, analytics, AI).

Technology summary

Layer	Technology
Frontend	React 19, Vite, TailwindCSS, Framer Motion
API Gateway	.NET, Ocelot
Microservices	.NET (C#)
AI Service	Python, FastAPI
Database	SQL Server 2022
Container runtime	Docker, Docker Compose