# kartiksood10/acme-migration-ui architecture

> Architecture diagram of the GitHub repository kartiksood10/acme-migration-ui, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/kartiksood10/acme-migration-ui
- Repository: https://github.com/kartiksood10/acme-migration-ui

## Overview

This is a React frontend for configuring and monitoring API contract migrations. A user starts a migration from the dashboard by supplying a repository and source/target contracts; the app submits it to a backend, refreshes migration summaries, and presents history or live job details. Settings provide theme and default-repository preferences, while the shared layout adds navigation and completion notifications. The README describes only a Vite template, so product capabilities here are inferred from the sampled source. Backend implementation is outside this repository; edges to it reflect the frontend’s HTTP requests and API configuration.

Main entry points: [`src/App.tsx`](https://github.com/kartiksood10/acme-migration-ui/blob/master/src/App.tsx) (Route handling), [`src/hooks/useMigrations.ts`](https://github.com/kartiksood10/acme-migration-ui/blob/master/src/hooks/useMigrations.ts) (Summary polling), [`src/services/api.ts`](https://github.com/kartiksood10/acme-migration-ui/blob/master/src/services/api.ts) (HTTP client), [`src/components/layout/AppLayout.tsx`](https://github.com/kartiksood10/acme-migration-ui/blob/master/src/components/layout/AppLayout.tsx) (Shared layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_main["React entry<br/>[main.tsx]"]
  node_routing["Route handling<br/>[App.tsx]"]
  node_layout["Shared layout<br/>[AppLayout.tsx]"]
end

subgraph group_screens["Migration screens"]
  node_dashboard["Migration dashboard"]
  node_new_migration["New migration form"]
  node_history["Migration history"]
  node_details["Migration details"]
end

subgraph group_data["Data and API"]
  node_summary_hook["Summary polling<br/>[useMigrations.ts]"]
  node_details_hook["Detail polling"]
  node_start_hook["Migration submission"]
  node_api["HTTP client<br/>[api.ts]"]
  node_migration_types["Migration DTOs<br/>[migration.ts]"]
end

subgraph group_preferences["Preferences"]
  node_settings["Settings<br/>[SettingsScreen.tsx]"]
end

node_user(("User"))
node_backend{{"Migration backend"}}

node_user -.->|"uses"| node_main
node_main -->|"renders"| node_routing
node_routing -->|"wraps routes"| node_layout
node_routing -->|"routes to"| node_dashboard
node_routing -->|"routes to"| node_history
node_routing -->|"routes to"| node_details
node_routing -->|"routes to"| node_settings
node_layout -->|"reads summaries"| node_summary_hook
node_layout -->|"imports theme"| node_settings
node_dashboard -->|"loads summaries"| node_summary_hook
node_dashboard -->|"opens form"| node_new_migration
node_history -->|"loads summaries"| node_summary_hook
node_details -->|"loads job"| node_details_hook
node_new_migration -->|"submits form"| node_start_hook
node_new_migration -->|"reads repo key"| node_settings
node_summary_hook -->|"requests summaries"| node_api
node_details_hook -->|"requests job"| node_api
node_start_hook -->|"posts migration"| node_api
node_api -->|"targets API"| node_backend
node_summary_hook -->|"uses DTOs"| node_migration_types
node_details_hook -->|"uses DTOs"| node_migration_types
node_start_hook -->|"uses form types"| node_migration_types

click node_main "https://github.com/kartiksood10/acme-migration-ui/blob/master/src/main.tsx"
click node_routing "https://github.com/kartiksood10/acme-migration-ui/blob/master/src/App.tsx"
click node_layout "https://github.com/kartiksood10/acme-migration-ui/blob/master/src/components/layout/AppLayout.tsx"
click node_dashboard "https://github.com/kartiksood10/acme-migration-ui/blob/master/src/components/screens/DashboardScreen.tsx"
click node_new_migration "https://github.com/kartiksood10/acme-migration-ui/blob/master/src/components/screens/NewMigrationModal.tsx"
click node_history "https://github.com/kartiksood10/acme-migration-ui/blob/master/src/components/screens/MigrationHistoryScreen.tsx"
click node_details "https://github.com/kartiksood10/acme-migration-ui/blob/master/src/components/screens/MigrationDetailsScreen.tsx"
click node_settings "https://github.com/kartiksood10/acme-migration-ui/blob/master/src/components/screens/SettingsScreen.tsx"
click node_summary_hook "https://github.com/kartiksood10/acme-migration-ui/blob/master/src/hooks/useMigrations.ts"
click node_details_hook "https://github.com/kartiksood10/acme-migration-ui/blob/master/src/hooks/useMigrationDetails.ts"
click node_start_hook "https://github.com/kartiksood10/acme-migration-ui/blob/master/src/hooks/useStartMigration.ts"
click node_api "https://github.com/kartiksood10/acme-migration-ui/blob/master/src/services/api.ts"
click node_migration_types "https://github.com/kartiksood10/acme-migration-ui/blob/master/src/types/migration.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main,node_routing,node_layout,node_user toneBlue
class node_dashboard,node_new_migration,node_history,node_details toneAmber
class node_summary_hook,node_details_hook,node_start_hook,node_api,node_migration_types toneMint
class node_settings toneRose
class node_backend toneIndigo
```

## Components

### Application shell

- [React entry](https://github.com/kartiksood10/acme-migration-ui/blob/master/src/main.tsx): `src/main.tsx`
- [Route handling](https://github.com/kartiksood10/acme-migration-ui/blob/master/src/App.tsx): `src/App.tsx`
- [Shared layout](https://github.com/kartiksood10/acme-migration-ui/blob/master/src/components/layout/AppLayout.tsx): `src/components/layout/AppLayout.tsx`

### Migration screens

- [Migration dashboard](https://github.com/kartiksood10/acme-migration-ui/blob/master/src/components/screens/DashboardScreen.tsx): `src/components/screens/DashboardScreen.tsx`
- [New migration form](https://github.com/kartiksood10/acme-migration-ui/blob/master/src/components/screens/NewMigrationModal.tsx): `src/components/screens/NewMigrationModal.tsx`
- [Migration history](https://github.com/kartiksood10/acme-migration-ui/blob/master/src/components/screens/MigrationHistoryScreen.tsx): `src/components/screens/MigrationHistoryScreen.tsx`
- [Migration details](https://github.com/kartiksood10/acme-migration-ui/blob/master/src/components/screens/MigrationDetailsScreen.tsx): `src/components/screens/MigrationDetailsScreen.tsx`

### Data and API

- [Summary polling](https://github.com/kartiksood10/acme-migration-ui/blob/master/src/hooks/useMigrations.ts): `src/hooks/useMigrations.ts`
- [Detail polling](https://github.com/kartiksood10/acme-migration-ui/blob/master/src/hooks/useMigrationDetails.ts): `src/hooks/useMigrationDetails.ts`
- [Migration submission](https://github.com/kartiksood10/acme-migration-ui/blob/master/src/hooks/useStartMigration.ts): `src/hooks/useStartMigration.ts`
- [HTTP client](https://github.com/kartiksood10/acme-migration-ui/blob/master/src/services/api.ts): `src/services/api.ts`
- [Migration DTOs](https://github.com/kartiksood10/acme-migration-ui/blob/master/src/types/migration.ts): `src/types/migration.ts`

### Preferences

- [Settings](https://github.com/kartiksood10/acme-migration-ui/blob/master/src/components/screens/SettingsScreen.tsx): `src/components/screens/SettingsScreen.tsx`

### Other components

- **User**
- **Migration backend**

## Connections

- User → React entry: uses
- React entry → Route handling: renders (evidence: `src/main.tsx`)
- Route handling → Shared layout: wraps routes (evidence: `src/App.tsx`)
- Route handling → Migration dashboard: routes to (evidence: `src/App.tsx`)
- Route handling → Migration history: routes to (evidence: `src/App.tsx`)
- Route handling → Migration details: routes to (evidence: `src/App.tsx`)
- Route handling → Settings: routes to (evidence: `src/App.tsx`)
- Shared layout → Summary polling: reads summaries (evidence: `src/components/layout/AppLayout.tsx`)
- Shared layout → Settings: imports theme (evidence: `src/components/layout/AppLayout.tsx`)
- Migration dashboard → Summary polling: loads summaries (evidence: `src/components/screens/DashboardScreen.tsx`)
- Migration dashboard → New migration form: opens form (evidence: `src/components/screens/DashboardScreen.tsx`)
- Migration history → Summary polling: loads summaries (evidence: `src/components/screens/MigrationHistoryScreen.tsx`)
- Migration details → Detail polling: loads job (evidence: `src/components/screens/MigrationDetailsScreen.tsx`)
- New migration form → Migration submission: submits form (evidence: `src/components/screens/NewMigrationModal.tsx`)
- New migration form → Settings: reads repo key (evidence: `src/components/screens/NewMigrationModal.tsx`)
- Summary polling → HTTP client: requests summaries (evidence: `src/hooks/useMigrations.ts`)
- Detail polling → HTTP client: requests job (evidence: `src/hooks/useMigrationDetails.ts`)
- Migration submission → HTTP client: posts migration (evidence: `src/hooks/useStartMigration.ts`)
- HTTP client → Migration backend: targets API (evidence: `src/services/api.ts`)
- Summary polling → Migration DTOs: uses DTOs (evidence: `src/hooks/useMigrations.ts`)
- Detail polling → Migration DTOs: uses DTOs (evidence: `src/hooks/useMigrationDetails.ts`)
- Migration submission → Migration DTOs: uses form types (evidence: `src/hooks/useStartMigration.ts`)