Frontend Monorepo & Kit System
21-package pnpm workspace, 92+ miniapps, the kit-system architecture.
6 min read diagramsUpdated 2026-03-26docs/architecture/architecture/09-frontend-monorepo-kit-system.md
22 packages. 96+ miniapps. Stripe-style Bento design system. React 19 + Vite + pnpm workspaces.
Overview
The MedOS frontend is a pnpm monorepo with a layered architecture:
- Kits — domain-specific packages (medical-kit, rcm-kit, design-kit, etc.)
- Miniapps — 96+ independently importable feature modules (blood-bank, e-mar, nurse-note-ai, etc.)
- Services — 43 service modules connecting to backend APIs + Supabase
- Shared Action — centralized Redux action registry + workflow dispatcher
Tech Stack: React 19, TypeScript 5.9, Vite 5.4, MUI v7, Tailwind CSS v4, Redux Toolkit, Zustand, Supabase Realtime, ReactFlow (125+ node types)
Architecture Diagram
┌──────────────────────────────────────────────────────────────────────────────┐
│ FRONTEND MONOREPO │
│ ever-medos-global-pure-react/ │
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ packages/ (22 Kits) │ │
│ │ │ │
│ │ DESIGN LAYER │ │
│ │ ┌───────────────────┐ ┌───────────────────┐ │ │
│ │ │ design-kit │ │ ui-kit │ │ │
│ │ │ Bento cards │ │ Dialogs, forms, │ │ │
│ │ │ 23 DOM Graphics │ │ tables, pickers │ │ │
│ │ │ Tokens, themes │ │ Rich text (Lexical)│ │ │
│ │ └───────────────────┘ └───────────────────┘ │ │
│ │ │ │
│ │ DOMAIN LAYER │ │
│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │
│ │ │ medical-kit │ │ rcm-kit │ │ adt-kit │ │ scheduling- │ │ │
│ │ │ 40+ modules │ │ OPD/IPD │ │ Admit/Disch/ │ │ kit │ │ │
│ │ │ Worklist FSM │ │ billing flow │ │ Transfer │ │ Appointments │ │ │
│ │ ├──────────────┤ ├──────────────┤ ├──────────────┤ ├──────────────┤ │ │
│ │ │ diagnostics- │ │ periops-kit │ │ inventory- │ │ integration- │ │ │
│ │ │ kit │ │ Surgical │ │ kit │ │ kit │ │ │
│ │ │ Lab/imaging │ │ workflows │ │ Stock mgmt │ │ HL7/EMRAM │ │ │
│ │ ├──────────────┤ ├──────────────┤ ├──────────────┤ ├──────────────┤ │ │
│ │ │ nursing-home- │ │ ltc-rcm-kit │ │ healthops- │ │ patient- │ │ │
│ │ │ kit │ │ Long-term │ │ kit │ │ roster │ │ │
│ │ │ Resident care │ │ care billing │ │ Operations │ │ Patient lists│ │ │
│ │ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘ │ │
│ │ │ │
│ │ INFRASTRUCTURE LAYER │ │
│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │
│ │ │ service-kit │ │ shared-action │ │ core-kit │ │ migration- │ │ │
│ │ │ API abstracts │ │ Redux actions │ │ Utilities │ │ kit │ │ │
│ │ │ FHIR mappers │ │ Workflow exec │ │ Helpers │ │ Data migrate │ │ │
│ │ │ SMART auth │ │ Action flow │ │ │ │ UI │ │ │
│ │ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘ │ │
│ │ │ │
│ │ ┌──────────────────────────────────────────────────────────────────┐ │ │
│ │ │ dynamic-modules — Module federation for lazy-loading miniapps │ │ │
│ │ └──────────────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ packages/miniapps/ (96+ Feature Modules) │ │
│ │ │ │
│ │ CLINICAL (30+) MEDICATION SPECIALTY (20+) │ │
│ │ appointment medication-reconcile blood-bank-form │ │
│ │ doctor-order home-med radiation-oncology │ │
│ │ chief-complaint-form e-mar nuclear-medicine │ │
│ │ clinical-summary-view enhanced-med-order anesthesia-flowsheet │ │
│ │ e-form, dynamic-eform mar-system dental-procedure │ │
│ │ ipd-progress-note mar-system-calendar obstetrics │ │
│ │ nurse-note, nurse-note-ai forensics │ │
│ │ │ │
│ │ AI & 3D ADMIN & OPS FINANCIAL │ │
│ │ diagnosis-ai task-management financial-summary │ │
│ │ 3d-health staff-gamification discharge │ │
│ │ interactive-body-exam porter-gig-board admission-request │ │
│ │ summary-note-ai activity-tracking order-history-reorder │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ src/ (Application Shell) │ │
│ │ │ │
│ │ services/ (43 modules) store/ (26 Redux slices) │ │
│ │ containers/ (200+ pages) routes/, layouts/, theme/ │ │
│ │ common/components/ (17 feature domains) │ │
│ │ └── medical/builder/main-flow-editor/ (Workflow Builder, 200+ nodes) │ │
│ │ public/locales/ (17 languages) │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ supabase/ (Read Models + Edge Functions) │ │
│ │ migrations/ (20+ SQL files) functions/ (6 edge functions) │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────────────────┘
Bento Design System (Stripe-Style)
The design-kit implements a Stripe-inspired Bento card system for all setup, admin, and landing pages.
Base Components
| Component | Purpose |
|---|---|
BentoCard |
Card with hover lift, dark mode, border glow. span={1-12} |
BentoGrid |
12-column CSS Grid container |
BentoSection |
Section header wrapper |
BentoDismissBar |
“Got it” dismiss button (localStorage persistence) |
SetupPageBento |
Complete page template (grid + dismiss + loading skeleton) |
useBentoDismissed |
Hook for dismiss state |
Design Tokens
CARD_RADIUS: 20px
HOVER_LIFT: -3px translateY
EASE_SMOOTH: [0.16, 1, 0.3, 1]
COLORS: TEAL #17b8e0, PURPLE #8b5cf6, GREEN #22c55e, ORANGE #f97316
LABEL: 11px uppercase, 0.1em tracking, 600 weight
TITLE: 18px, 700 weight, -0.01em tracking
23 Animated Micro-UI Graphics
Every Bento card contains an animated DOM component — never screenshots:
MiniECG MiniChat MiniTimeline MiniGlobe MiniStats MiniWorkflowGraph MiniFloorPlan MiniQueueColumns MiniDrugInteraction MiniStockChart MiniAppGrid MiniFlowBuilder MiniFormBuilder MiniDecisionTree MiniBillingFlow MiniLabResult MiniDeptQueue Mini3DBody Mini3DFloorScene Mini3DBodyScene MiniBloodBank
11 Pre-built Page Templates
MedicationSetupBento InventoryBento AppStoreBento FlowManagementBento CdsSetupBento FloorPlanBento EFormSetupBento CorporateEmployeesBento MedicalWorklistBento BloodBankBento
Medical-Kit: 40+ Clinical Modules
The core domain package with specialized clinical logic:
| Category | Modules |
|---|---|
| Worklist | central-worklist (MASTER_WORKFLOW_NODES state machine), medical-worklist |
| Patient | patient-registration, patient-profile, patient-information, patient-enquiry |
| Clinical | doctor-room, chief-complaint, note, physical-examination, full-review |
| Orders | order, order-detail, consult, nutrition |
| Pharmacy | pharmacy (OPD), pharmacy-ipd, medication-management |
| Lab/Imaging | laboratory, diagnostics |
| Surgery | procedure, emergency-system |
| Specialty | pathology, radiation-oncology, medical-oncology, nuclear-medicine |
| IPD | ipd-system, graphic-sheet-ipd, dynamic-graphic-sheet-management |
| Coding | medical-coder (ICD-10, CPT coding interface) |
| Charting | chart-library, encounter-tools |
TypeScript Path Aliases (37 total)
@medical-kit/* → packages/medical-kit/src/*
@design-kit/* → packages/design-kit/src/*
@ui-kit/* → packages/ui-kit/src/*
@service-kit/* → packages/service-kit/src/*
@shared-action/* → packages/shared-action/src/*
@rcm-kit/* → packages/rcm-kit/src/*
@admin-kit/* → packages/admin-kit/src/*
@adt-kit/* → packages/adt-kit/src/*
@scheduling-kit/* → packages/scheduling-kit/src/*
@diagnostics-kit/*→ packages/diagnostics-kit/src/*
@miniapps/* → packages/miniapps/*
@/* → src/*
State Management
| Layer | Technology | Use Case |
|---|---|---|
| Global state | Redux Toolkit (26 slices) | Auth, navigation, encounter context |
| Local state | Zustand | Confirmation service, transient UI state |
| Server state | React Query + Supabase Realtime | API data + realtime subscriptions |
| Context | React Context | Theme, auth, provider selection |
Key Numbers
| Metric | Value |
|---|---|
| Monorepo packages | 22 kits |
| Feature miniapps | 96+ |
| Workflow node types | 200+ (BlockEnum) |
| Page containers | 200+ |
| Redux slices | 26 |
| Service modules | 43 |
| Supported locales | 17 (i18n) |
| TypeScript path aliases | 37 |
| Bento micro-UI graphics | 23 |