MFE Architecture Visualiser
Interactive tool that visualises micro-frontend architectures through animated 3D diagrams. Import your own Vercel or Module Federation config and watch the routing come alive.
The Problem
Micro-frontend architecture is hard to explain. Documentation is static, diagrams are out of date, and nobody can visualise how routing actually works at runtime. I wanted a tool where people could see MFE routing animated step-by-step, and import their own configs to visualise their own architecture.
Approach
Built an interactive visualiser with three modes: Learn (pre-built Vercel Multi-Zone and Module Federation examples with step-by-step flow animations), Try (paste your own config and watch it render), and Analyse (AI-powered architecture recommendations; coming soon). The 3D rendering uses the same React Three Fiber stack as the rest of the portfolio for visual consistency.
Architecture
React Three Fiber for 3D rendering with Drei primitives (CubicBezierLine, Html, OrbitControls). Pure-function flow engine (useReducer state machine) drives step animations. Config parsers convert Vercel microfrontends.json, Module Federation plugin options, and generic JSON into a shared ArchitectureData schema. Auto-layout algorithm generates node positions and flow scenarios from any config. SVG fallback for mobile and reduced motion. 95 tests covering parsers, flow engine, layout, and integration.
Results
Ships as part of the portfolio with no additional infrastructure. Parses real-world configs (tested against the portfolio's own microfrontends.json). Handles up to 10+ app configs with auto-layout. Full keyboard and screen reader support with WCAG 2.2 AA compliance.
Lessons Learned
Backdrop-filter doesn't work over WebGL canvases; use solid backgrounds for overlays. next/dynamic with ssr:false needs a client component wrapper in App Router. useReducer with derived sets beats useMemo for guaranteed state consistency. Timing-safe secret comparison matters even for preview gates. Security headers need dev-mode exceptions for Turbopack HMR.
Want to see it in action?
Launch Demo →