🎯 Project Introduction

Interactive central ecosystem and microservices orchestrator (Frontend).

Welcome to the documentation of my web development portfolio!

This project acts as a central HUB designed under a static and modular architecture, serving as an integration point for four independent microservices. Its purpose is to demonstrate my capabilities in software engineering, design patterns, and full-stack deployments integrating multiple technologies.

🚀 Project Features & Advanced UX

Static Hybrid Architecture

Static Site Generation (SSG) with Astro to ensure near-instant load times and optimal performance.

Islands of Interactivity

Integration of dynamic React components hydrated via client:load for efficient client-side state management.

Microservices Consumption

Standardized communication contracts under strict versioning (/api/v1/) interacting with Java and PHP backends.

Web Accessibility (a11y)

ARIA attributes and native HTML semantics to support keyboard navigation and screen readers.

🛠️ Tech Stack

Technology	Project Purpose
Astro	Static Site Generation (SSG), content collections, and routing
React	Interactive components, hydration, and complex state management
Tailwind CSS	Global styles with pure CSS variables under a dark palette
Axios	HTTP clients configured with security interceptors

📈 Featured Case Studies

The HUB integrates and orchestrates multiple microservices (deployed independently) into a single fluid interface:

1. Interactive Sandbox: Transactional Engine

• Live Cloud Integration: Consumption of asynchronous requests under REST semantics towards a robust backend in Spring Boot 3 (Java 21).
• Defensive Reactive UI: Emits Custom Events to freeze global navigation during active network cycles.
• Integrated Network Logger: Observability module coupled to the interface that visually displays the complete lifecycle of HTTP exchanges.

2. Dynamic Report Generator

• Context Consistency: Dynamic injection of the client’s time zone (Intl.DateTimeFormat().resolvedOptions().timeZone) into the PHP rendering engine.
• Perimeter UX: Prevention of Race Conditions by intercepting HTTP 429 (Rate Limiting) codes.

3. ETL Pipeline: Mass Ingestion

• Smart Network Synchronization: Defensive frontend that actively polls the health of the backend engine.
• SQL Terminal: Embedded interactive console that evaluates system robustness and the simulated backend WAF.

4. Micro-Frontend: Identity Access Management (IAM)

• Access Control: PHP backend consumption (Laravel 13) evaluating roles (admin, auditor, operator).
• Smart HTTP Client: Axios interceptors for automatic and secure JWT injection.
• Integrated Experience: Authentication components operating as a Single Page Application (SPA).

💻 Development Commands

All commands are executed from the project root using pnpm:

# Install dependencies
pnpm install

# Start local server (localhost:4321)
pnpm dev

# Build static site optimized for production
pnpm build

# Preview build locally
pnpm preview