FormKit Microfrontend Portfolio Project

A production-style microfrontend architecture built with Vue 3, Vite Module Federation, and FormKit.

This repository demonstrates:

• distributed UI ownership (3 independent remotes)
• host orchestration with dynamic remote loading
• schema-driven form rendering
• test and security quality gates
• CI automation suitable for engineering portfolio review

Architecture

flowchart LR
	A[orchestrator] --> B[formkit-app remote]
	A --> C[formkit-app2 remote]
	A --> D[formkit-app3 remote]
	B --> E[(json-server 3000)]
	C --> F[(json-server 4002)]
	D --> G[(json-server 4003)]

Loading

Project Structure

• formkit-app: remote 1, serves ExampleForm
• formkit-app2: remote 2, serves ExampleForm
• formkit-app3: remote 3, serves ExampleForm
• orchestrator: host shell with routing and remote composition

Tech Stack

• Vue 3
• Vite 5
• @originjs/vite-plugin-federation
• FormKit
• Vitest + Testing Library + MSW
• pnpm

Requirements

• Node >= 24.0.0 < 25
• pnpm >= 10

Environment Configuration

Each app provides an environment template:

• formkit-app/.env.example
• formkit-app2/.env.example
• formkit-app3/.env.example
• orchestrator/.env.example

Copy each template to .env in the same folder and tune the values for your environment.

Local Setup

Install all dependencies:

pnpm run install:all

Run Applications

Development mode (recommended):

# Single command: remotes + host + mock APIs
pnpm run dev:all

Alternative with two terminals:

# Terminal 1: remotes + host (Vite dev servers)
pnpm run dev:ui

# Terminal 2: mock APIs
pnpm run dev:api

You can also run one project at a time:

pnpm run dev:app
pnpm run dev:app2
pnpm run dev:app3
pnpm run dev:host

Build and preview remotes:

pnpm run run:app
pnpm run run:app2
pnpm run run:app3

Build + preview all remotes and mock APIs in one command:

pnpm run run:apps

Build and preview host:

pnpm run run:host

Build + preview remotes + host + mock APIs:

pnpm run run:all

Mock APIs

Run JSON servers:

pnpm run jss
pnpm run jss2
pnpm run jss3

Or all mock APIs together:

pnpm run run:api

Quality Commands

Run all tests:

pnpm run test:all

Run all builds:

pnpm run build:all

Run full quality gate (lint, type-check, build, test, audit):

pnpm run verify

CI

GitHub Actions workflow runs:

• install
• build
• tests
• production dependency audit
• host lint and type-check

See workflow: .github/workflows/ci.yml.

Portfolio Notes

This project intentionally favors architecture and engineering controls over visual polish. It is designed to showcase leadership in:

• microfrontend composition
• runtime integration strategy
• quality automation and governance
• security-aware dependency management

Detailed case study:

• CASE_STUDY.md
• CASE_STUDY_ES.md