Portfolio

Demo Application

A demo application demonstrating a micro-frontend architecture powered by microservices engineered with quality at its core. A modern React 19 micro-frontend powered by two Spring Boot services, integrated through consumer-driven contracts, backed by layered testing (unit, component, and end-to-end), and continuously deployed through a CI/CD quality gated pipeline.

3
Independently deployed services
5
CI quality-gate stages
4
Pact contracts verified
7
Gates per service
System Design

Architecture At A Glance

Three independently deployable units, one coherent platform.

End User Browses products & places orders
HTTPS
Micro Frontend React 19 SPA
JSON / HTTPS
Product Service Spring Boot REST API
validates IDs
Order Service Spring Boot REST API
Deployed to
Render.com Static + Docker hosting
GitHub Actions CI / CD pipeline
The Build

The Three (Plus One) Repos

Each service stands alone, is CI-gated on its own repo, and deploys independently.

Micro Frontend

React 19 SPA with feature modules for dashboard, products and orders — each designed to be extractable as its own MFE.

React 19 Vite 6 TanStack Query Tailwind 4 TypeScript

Product Service

Spring Boot REST API for the product catalog. CORS-configured for MFE consumption and exposing Actuator health endpoints.

Java 17 Spring Boot 3.2 JaCoCo Pact

Order Service

Spring Boot REST API for order management. Validates products via the Product Service and mirrors its quality gates.

Java 17 Spring Boot 3.2 JaCoCo Pact

UI Automation

End-to-end Playwright suite exercising the full stack. Tagged specs keep each service's CI fast while covering its own flows.

Playwright 1.52 TypeScript GitHub Pages
Quality Gates

Every Change, Every Merge

Five CI stages, seven gates per service. A red check blocks the PR.

Static Analysis

Lint and type correctness enforced on every commit.

  • ESLint 9 (MFE)
  • TypeScript strict (tsc --noEmit)
  • Spring Jakarta Validation

Unit & Coverage

Fast unit feedback with coverage artifacts retained per run.

  • Vitest + @vitest/coverage-v8
  • JUnit 5 + JaCoCo
  • Coverage artifacts uploaded on every run

Component Tests

In-isolation component validation across the stack.

  • React Testing Library (MFE)
  • Spring Boot HTTP tests (services)

Consumer-Driven Contracts

Guaranteed inter-service compatibility via Pact.

  • Pact 4.6 — 4 contracts, both directions
  • Consumer generation + provider verification
  • Cross-repo checkout in CI

End-to-End

User-level flows verified against the real stack.

  • Playwright against the full stack
  • Tagged: @product-service, @order-service
  • HTML report auto-published to GitHub Pages

Deploy & Health

Green main ships — with health verification post-deploy.

  • Render.com auto-deploy on green main
  • Spring Actuator /actuator/health gate
  • Build artifacts retained for audit
The Pipeline

The Pipeline That Proves It

Each merge runs through the full chain. Any red stage blocks the PR.

1
Lint + Typecheck
2
Unit Tests+ Coverage
3
Component Tests
4
Contract TestsPact
5
Build
6
Playwright E2E
7
DeployRender.com
Demo

Recorded Walkthrough

A five-minute demo covering the architecture, a live feature flow, and a PR going through every quality gate.

Add your recording here

Interested In A Similar Build?

Want a deeper dive into how the gates were put together, or a tailored engagement for your team? Let's talk.