Frontend demonstration of repository-to-platform architecture migration workflow. Fully client-side SPA — no backend required.
npm install
npm run dev # app → http://localhost:5173
npm run storybook # design system → http://localhost:6006
npm run build # production build
npx tsc --noEmit # type check
npm run lint # lintAny email and password combination works — authentication is fully mocked. No account creation required.
Paste these URLs in the Home input to trigger each scenario:
| URL | Scenario |
|---|---|
https://github.com/org/sample-monorepo |
Single branch — goes directly to migration |
https://github.com/org/myapp-api |
Multiple branches — opens BranchPickerModal |
https://github.com/org/private-svc |
Private / inaccessible — shows inline error |
All other URLs with a hyphen in the repo name, or a name ≥ 8 chars, also trigger the multi-branch scenario.
┌─────────────────────────────────────────────────────────────────┐
│ APP CONVERTER — Frontend SPA │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ PRESENTATION │ │
│ │ React 19 · CSS Modules · APP CONVERTER Design Tokens │ │
│ └──────────────────────┬──────────────────────────────────┘ │
│ │ │
│ ┌──────────────────────▼──────────────────────────────────┐ │
│ │ ROUTING │ │
│ │ React Router v6 · ProtectedRoute │ │
│ └──────────────────────┬──────────────────────────────────┘ │
│ │ │
│ ┌──────────────────────▼──────────────────────────────────┐ │
│ │ STATE LAYER │ │
│ │ Zustand · authStore · conversionStore │ │
│ │ projectsStore │ │
│ └──────────────────────┬──────────────────────────────────┘ │
│ │ │
│ ┌──────────────────────▼──────────────────────────────────┐ │
│ │ CONVERSION ENGINE │ │
│ │ ConversionSimulator (singleton) │ │
│ │ tick loop · state machine · pause/resume │ │
│ └──────────────────────┬──────────────────────────────────┘ │
│ │ │
│ ┌──────────────────────▼──────────────────────────────────┐ │
│ │ MOCK DATA LAYER │ │
│ │ simulation-script.ts · wizard-questions.ts │ │
│ │ projects-seed.ts · sessionStorage persistence │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ APP CONVERTER Sitemap │
├──────────────────────────┬──────────────────────────────────────┤
│ PUBLIC (no auth) │ PROTECTED (authStore.isAuth = true) │
│ │ │
│ /login │ /home │
│ /register │ /processing │
│ /forgot-password │ /profile │
│ │ │
│ │ ┌──── MODALS (overlay routes) ───┐ │
│ │ │ BranchPickerModal → /home │ │
│ │ │ QuestionWizardModal → /proc. │ │
│ │ │ ViewLogsModal → /home │ │
│ │ │ CloudConnectorModal → /profile│ │
│ │ │ DeleteAccountModal → /profile│ │
│ │ └────────────────────────────────┘ │
└──────────────────────────┴──────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ MAIN CONVERSION FLOW │
└────────────────────────────────────────────────────────────────┘
[unauthenticated]
│
▼
┌─────────┐ wrong credentials ──────────→ [inline error]
│ /login │ empty fields ───────────────→ [field error]
└────┬────┘
│ valid credentials
▼
┌──────────────────────────────────────────────────────────┐
│ /home (intake) │
│ [input GitHub URL] │
└──────────────────────────┬───────────────────────────────┘
│
┌────────────────┼────────────────┐
▼ ▼ ▼
[private] [1 branch] [N branches]
[inaccessible] start direct BranchPickerModal
inline error │ │
└───────┬───────┘
│ branch selected
▼
┌────────────────────────────┐
│ /processing │
│ logs streaming live │
│ progress bar │
└────────────┬───────────────┘
│
question trigger detected
│
▼
┌────────────────────────────┐
│ QuestionWizardModal │
│ (blocking — sim paused) │
└────────────┬───────────────┘
│ answered
▼
┌────────────────────────────┐
│ simulation resumes │
└────────────┬───────────────┘
│
┌───────────┴───────────┐
▼ ▼
[completed] [failed]
download mock error message
│ │
└──────────┬────────────┘
▼
┌────────────────────────┐
│ /home (dashboard) │
│ projects table │
│ ViewLogsModal on click │
└────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ AUTH SIDE FLOWS │
└────────────────────────────────────────────────────────────────┘
/login ──→ [Criar conta] ──→ /register ──→ back to /login
/login ──→ [Esqueceu senha] ──→ /forgot-password ──→ /login
┌────────────────────────────────────────────────────────────────┐
│ PROFILE FLOWS │
└────────────────────────────────────────────────────────────────┘
/profile ──→ [editar nome/email] ──→ salva inline
/profile ──→ [Cloud Connector] ──→ modal ──→ [Test Connection]
success ──→ connected badge
failure ──→ error message
/profile ──→ [Delete Account] ──→ modal confirm ──→ logout + clear stores
┌─────────────────────────────────────────────────────────────────┐
│ ZUSTAND STORES │
├─────────────────────────────────────────────────────────────────┤
│ │
│ authStore conversionStore │
│ ┌─────────────────────┐ ┌──────────────────────────┐ │
│ │ user: User | null │ │ active: Conversion | null │ │
│ │ isAuth: boolean │ │ status: ConversionStatus │ │
│ ├─────────────────────┤ │ logs: LogEntry[] │ │
│ │ login(user) │ │ currentQuestion: Q | null │ │
│ │ logout() │ ├──────────────────────────┤ │
│ │ updateUser(partial) │ │ startConversion(repo,br.) │ │
│ └─────────────────────┘ │ cancelConversion() │ │
│ │ answerQuestion(answer) │ │
│ projectsStore │ appendLog(entry) │ │
│ ┌─────────────────────┐ └──────────────────────────┘ │
│ │ projects: Project[] │ │
│ ├─────────────────────┤ Persisted to sessionStorage: │
│ │ addProject(p) │ conversionStore · projects │
│ │ updateProject(id,p) │ │
│ │ getById(id) │ │
│ └─────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ ConversionSimulator — State Machine │
└─────────────────────────────────────────────────────────────────┘
┌──────────┐
│ IDLE │ ◀─── destroy() / logout
└────┬─────┘
│ start(repo, branch)
▼
┌──────────┐
┌───▶│ RUNNING │◀──────────────────┐
│ └────┬─────┘ │
│ │ tick (setInterval) │
│ │ │
│ question trigger? resume()
│ │ │
│ yes ▼ │
│ ┌──────────┐ │
│ │ PAUSED │ ──── answer() ────┘
│ └──────────┘ (QuestionWizard)
│
│ cancel()
│ ▼
│ [IDLE]
│
│ tick ends
│ │
│ ┌─────┴──────┐
│ ▼ ▼
│ ┌──────────┐ ┌────────┐
└─│COMPLETED │ │ FAILED │
└──────────┘ └────────┘
▲ ▲
│ │
forceComplete() forceFail() (dev controls — any state)
src/
├── components/ shared UI components
│ ├── ui/ primitives (AgentPlan, QuestionWizard...)
│ ├── DevFab/ in-app test scenario helper
│ └── layouts/ AuthLayout, AppShell
├── pages/ route-level screens
│ ├── Login / Register / ForgotPassword
│ ├── Home/ intake + project history
│ ├── Migration/ live conversion view
│ └── Profile/ user settings + connector
├── stores/ Zustand global state
│ ├── authStore.ts user session
│ ├── conversionStore.ts active conversion + projects
│ ├── wizardSessionStore.ts wizard overlay state
│ ├── connectorStore.ts platform connector state
│ └── repoDraftStore.ts home intake draft (reset on mount)
├── services/ business logic
│ ├── conversionSimulator.ts tick loop state machine
│ └── mockRepoInspection.ts deterministic URL → scenario
├── mocks/ static mock data
│ ├── simulationScript.ts phases + tasks + logs definition
│ ├── wizardQuestions.ts 5 questions, 3 options each
│ └── mockProjects.ts seed projects for history demo
├── stories/ Storybook design system
│ ├── Introduction.mdx Start Here / Welcome
│ ├── atoms/ Buttons, Avatar, Badges, Inputs
│ ├── overlays/ QuestionWizard
│ ├── processing/ AgentPlan
│ └── shell/ TopBar
├── styles/
│ └── tokens.css APP CONVERTER design system tokens
├── types/ TypeScript interfaces
└── main.tsx
| Version | Scope | Status |
|---|---|---|
| V1 | Auth + Branded Shell | ✅ done |
| V2 | Home Intake + Repo Validation | ✅ done |
| V3 | Migration Core + ConversionSimulator | ✅ done |
| V4 | Question Wizard + Dev Controls | ✅ done |
| V5 | History + Log Recall + Download Mock | ✅ done |
| V6 | User Controls (Profile) | ✅ done |
| V7 | Storybook — Design System Proof | ✅ done |
| Polish | Home hero, CloudConnectorModal 4-state, TopBar status | ✅ done |
APP CONVERTER has its own design system — tokens defined in src/styles/tokens.css, inspired by enterprise migration interfaces. Run npm run storybook and navigate to Start Here / Welcome for the full guide.
| Token | Value |
|---|---|
--color-interactive |
#0f62fe (primary interactive blue) |
--font-primary |
Roboto, Helvetica, Arial |
--font-mono |
Roboto Mono, Courier New (logs and URLs only) |
--text-body-size |
16px (minimum for UI text) |
--spacing-md |
16px |