How kartiksood10/acme-migration-ui works
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: App.tsx Route handling · useMigrations.ts Summary polling · api.ts HTTP client · AppLayout.tsx Shared layout
Components 15
Application shell
- React entry
src/main.tsx - Route handling
src/App.tsx - Shared layout
src/components/layout/AppLayout.tsx
Migration screens
- Migration dashboard
src/components/screens/DashboardScreen.tsx - New migration form
src/components/screens/NewMigrationModal.tsx - Migration history
src/components/screens/MigrationHistoryScreen.tsx - Migration details
src/components/screens/MigrationDetailsScreen.tsx
Data and API
- Summary polling
src/hooks/useMigrations.ts - Detail polling
src/hooks/useMigrationDetails.ts - Migration submission
src/hooks/useStartMigration.ts - HTTP client
src/services/api.ts - Migration DTOs
src/types/migration.ts
Preferences
- Settings
src/components/screens/SettingsScreen.tsx
Other components
- User
- Migration backend
Connections 22
- User → React entry: uses
- React entry → Route handling: renders
src/main.tsx - Route handling → Shared layout: wraps routes
src/App.tsx - Route handling → Migration dashboard: routes to
src/App.tsx - Route handling → Migration history: routes to
src/App.tsx - Route handling → Migration details: routes to
src/App.tsx - Route handling → Settings: routes to
src/App.tsx - Shared layout → Summary polling: reads summaries
src/components/layout/AppLayout.tsx - Shared layout → Settings: imports theme
src/components/layout/AppLayout.tsx - Migration dashboard → Summary polling: loads summaries
src/components/screens/DashboardScreen.tsx - Migration dashboard → New migration form: opens form
src/components/screens/DashboardScreen.tsx - Migration history → Summary polling: loads summaries
src/components/screens/MigrationHistoryScreen.tsx - Migration details → Detail polling: loads job
src/components/screens/MigrationDetailsScreen.tsx - New migration form → Migration submission: submits form
src/components/screens/NewMigrationModal.tsx - New migration form → Settings: reads repo key
src/components/screens/NewMigrationModal.tsx - Summary polling → HTTP client: requests summaries
src/hooks/useMigrations.ts - Detail polling → HTTP client: requests job
src/hooks/useMigrationDetails.ts - Migration submission → HTTP client: posts migration
src/hooks/useStartMigration.ts - HTTP client → Migration backend: targets API
src/services/api.ts - Summary polling → Migration DTOs: uses DTOs
src/hooks/useMigrations.ts - Detail polling → Migration DTOs: uses DTOs
src/hooks/useMigrationDetails.ts - Migration submission → Migration DTOs: uses form types
src/hooks/useStartMigration.ts