# joyceql/magic-resume architecture

> Architecture diagram of the GitHub repository joyceql/magic-resume, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/joyceql/magic-resume
- Repository: https://github.com/joyceql/magic-resume

## Overview

Magic Resume is a browser-based resume editor. Users create or import resumes in the dashboard, edit structured content in the workbench, choose a template and theme, preview the result, and export it to PDF; resume data is autosaved locally and can sync with a user-selected directory. AI writing and grammar assistance, model configuration, PDF import, multilingual UI, and template browsing are separate product capabilities. The README documents several of these features; sampled source confirms store behavior, PDF-import requests, and AI endpoints, but does not expose all UI-to-service wiring.

Main entry points: [`src/app/app/dashboard/resumes/page.tsx`](https://github.com/joyceql/magic-resume/blob/main/src/app/app/dashboard/resumes/page.tsx) (Resume dashboard), [`src/app/app/workbench/[id]/page.tsx`](https://github.com/joyceql/magic-resume/blob/main/src/app/app/workbench/%5Bid%5D/page.tsx) (Resume workbench), [`src/components/preview/index.tsx`](https://github.com/joyceql/magic-resume/blob/main/src/components/preview/index.tsx) (Resume preview), [`src/store/useResumeStore.ts`](https://github.com/joyceql/magic-resume/blob/main/src/store/useResumeStore.ts) (Resume state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_creation["Resume creation"]
  node_dashboard["Resume dashboard<br/>[page.tsx]"]
  node_import["PDF import UI"]
  node_importclient["Import request client"]
  node_importapi["Resume import API<br/>[resume-import.ts]"]
  node_workbench["Resume workbench<br/>[page.tsx]"]
  node_editor["Structured editor<br/>[EditPanel.tsx]"]
end

subgraph group_presentation["Preview and export"]
  node_preview["Resume preview<br/>[index.tsx]"]
  node_templates["Template renderer<br/>[index.tsx]"]
  node_registry["Template registry<br/>[registry.ts]"]
  node_export["PDF export<br/>[PdfExport.tsx]"]
end

subgraph group_assistance["AI assistance"]
  node_aiadmin["AI model settings<br/>[page.tsx]"]
  node_polishui["AI text polish<br/>[AIPolishDialog.tsx]"]
  node_polishapi["Polish endpoint<br/>[route.ts]"]
  node_grammarui["Grammar checker"]
  node_grammarapi["Grammar endpoint<br/>[route.ts]"]
  node_aiprovider["AI provider config<br/>[ai-models.ts]"]
end

subgraph group_platform["App and persistence"]
  node_public["Landing page<br/>[page.tsx]"]
  node_resume[("Resume state<br/>[useResumeStore.ts]")]
  node_history[("Undo redo history<br/>[resumeHistory.ts]")]
  node_fileio["File directory sync<br/>[fileSystem.ts]"]
  node_locale["Localization<br/>[server.ts]"]
end

node_user(("Resume author"))
node_ai{{"Configured AI service"}}

node_user -->|"opens"| node_public
node_user -->|"manages resumes"| node_dashboard
node_dashboard -->|"opens resume"| node_workbench
node_user -->|"selects PDF"| node_import
node_import -->|"submits images"| node_importclient
node_importclient -->|"posts request"| node_importapi
node_importapi -->|"requests extraction"| node_ai
node_workbench -->|"edits content"| node_editor
node_editor -->|"updates resume"| node_resume
node_resume -->|"records snapshots"| node_history
node_resume -->|"syncs files"| node_fileio
node_workbench -->|"renders preview"| node_preview
node_preview -->|"renders template"| node_templates
node_templates -->|"selects template"| node_registry
node_preview -->|"exports PDF"| node_export
node_user -->|"configures models"| node_aiadmin
node_aiadmin -->|"reads model options"| node_aiprovider
node_user -->|"requests polish"| node_polishui
node_polishui -->|"sends text"| node_polishapi
node_polishapi -->|"streams completion"| node_ai
node_user -->|"checks text"| node_grammarui
node_grammarui -->|"sends content"| node_grammarapi
node_grammarapi -->|"requests corrections"| node_ai
node_public -->|"loads translations"| node_locale
node_dashboard -->|"loads translations"| node_locale

click node_public "https://github.com/joyceql/magic-resume/blob/main/src/app/(public)/%5Blocale%5D/page.tsx"
click node_dashboard "https://github.com/joyceql/magic-resume/blob/main/src/app/app/dashboard/resumes/page.tsx"
click node_import "https://github.com/joyceql/magic-resume/blob/main/src/app/app/dashboard/resumes/ImportResumeDialog.tsx"
click node_importclient "https://github.com/joyceql/magic-resume/blob/main/src/lib/pdf-import-client.ts"
click node_importapi "https://github.com/joyceql/magic-resume/blob/main/src/routes/api/resume-import.ts"
click node_workbench "https://github.com/joyceql/magic-resume/blob/main/src/app/app/workbench/%5Bid%5D/page.tsx"
click node_editor "https://github.com/joyceql/magic-resume/blob/main/src/components/editor/EditPanel.tsx"
click node_resume "https://github.com/joyceql/magic-resume/blob/main/src/store/useResumeStore.ts"
click node_history "https://github.com/joyceql/magic-resume/blob/main/src/store/resumeHistory.ts"
click node_fileio "https://github.com/joyceql/magic-resume/blob/main/src/utils/fileSystem.ts"
click node_preview "https://github.com/joyceql/magic-resume/blob/main/src/components/preview/index.tsx"
click node_templates "https://github.com/joyceql/magic-resume/blob/main/src/components/templates/index.tsx"
click node_registry "https://github.com/joyceql/magic-resume/blob/main/src/components/templates/registry.ts"
click node_export "https://github.com/joyceql/magic-resume/blob/main/src/components/shared/PdfExport.tsx"
click node_aiadmin "https://github.com/joyceql/magic-resume/blob/main/src/app/app/dashboard/ai/page.tsx"
click node_polishui "https://github.com/joyceql/magic-resume/blob/main/src/components/shared/ai/AIPolishDialog.tsx"
click node_polishapi "https://github.com/joyceql/magic-resume/blob/main/src/app/api/polish/route.ts"
click node_grammarui "https://github.com/joyceql/magic-resume/blob/main/src/components/editor/grammar/GrammarCheckDrawer.tsx"
click node_grammarapi "https://github.com/joyceql/magic-resume/blob/main/src/app/api/grammar/route.ts"
click node_aiprovider "https://github.com/joyceql/magic-resume/blob/main/src/config/ai-models.ts"
click node_locale "https://github.com/joyceql/magic-resume/blob/main/src/i18n/compat/server.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_dashboard,node_import,node_importclient,node_importapi,node_workbench,node_editor toneBlue
class node_preview,node_templates,node_registry,node_export toneAmber
class node_aiadmin,node_polishui,node_polishapi,node_grammarui,node_grammarapi,node_aiprovider toneMint
class node_public,node_resume,node_history,node_fileio,node_locale toneRose
class node_user,node_ai toneIndigo
```

## Components

### Resume creation

- [Resume dashboard](https://github.com/joyceql/magic-resume/blob/main/src/app/app/dashboard/resumes/page.tsx): `src/app/app/dashboard/resumes/page.tsx`
- [PDF import UI](https://github.com/joyceql/magic-resume/blob/main/src/app/app/dashboard/resumes/ImportResumeDialog.tsx): `src/app/app/dashboard/resumes/ImportResumeDialog.tsx`
- [Import request client](https://github.com/joyceql/magic-resume/blob/main/src/lib/pdf-import-client.ts): `src/lib/pdf-import-client.ts`
- [Resume import API](https://github.com/joyceql/magic-resume/blob/main/src/routes/api/resume-import.ts): `src/routes/api/resume-import.ts`
- [Resume workbench](https://github.com/joyceql/magic-resume/blob/main/src/app/app/workbench/%5Bid%5D/page.tsx): `src/app/app/workbench/[id]/page.tsx`
- [Structured editor](https://github.com/joyceql/magic-resume/blob/main/src/components/editor/EditPanel.tsx): `src/components/editor/EditPanel.tsx`

### Preview and export

- [Resume preview](https://github.com/joyceql/magic-resume/blob/main/src/components/preview/index.tsx): `src/components/preview/index.tsx`
- [Template renderer](https://github.com/joyceql/magic-resume/blob/main/src/components/templates/index.tsx): `src/components/templates/index.tsx`
- [Template registry](https://github.com/joyceql/magic-resume/blob/main/src/components/templates/registry.ts): `src/components/templates/registry.ts`
- [PDF export](https://github.com/joyceql/magic-resume/blob/main/src/components/shared/PdfExport.tsx): `src/components/shared/PdfExport.tsx`

### AI assistance

- [AI model settings](https://github.com/joyceql/magic-resume/blob/main/src/app/app/dashboard/ai/page.tsx): `src/app/app/dashboard/ai/page.tsx`
- [AI text polish](https://github.com/joyceql/magic-resume/blob/main/src/components/shared/ai/AIPolishDialog.tsx): `src/components/shared/ai/AIPolishDialog.tsx`
- [Polish endpoint](https://github.com/joyceql/magic-resume/blob/main/src/app/api/polish/route.ts): `src/app/api/polish/route.ts`
- [Grammar checker](https://github.com/joyceql/magic-resume/blob/main/src/components/editor/grammar/GrammarCheckDrawer.tsx): `src/components/editor/grammar/GrammarCheckDrawer.tsx`
- [Grammar endpoint](https://github.com/joyceql/magic-resume/blob/main/src/app/api/grammar/route.ts): `src/app/api/grammar/route.ts`
- [AI provider config](https://github.com/joyceql/magic-resume/blob/main/src/config/ai-models.ts): `src/config/ai-models.ts`

### App and persistence

- [Landing page](https://github.com/joyceql/magic-resume/blob/main/src/app/(public)/%5Blocale%5D/page.tsx): `src/app/(public)/[locale]/page.tsx`
- [Resume state](https://github.com/joyceql/magic-resume/blob/main/src/store/useResumeStore.ts): `src/store/useResumeStore.ts`
- [Undo redo history](https://github.com/joyceql/magic-resume/blob/main/src/store/resumeHistory.ts): `src/store/resumeHistory.ts`
- [File directory sync](https://github.com/joyceql/magic-resume/blob/main/src/utils/fileSystem.ts): `src/utils/fileSystem.ts`
- [Localization](https://github.com/joyceql/magic-resume/blob/main/src/i18n/compat/server.ts): `src/i18n/compat/server.ts`

### Other components

- **Resume author**
- **Configured AI service**

## Connections

- Resume author → Landing page: opens
- Resume author → Resume dashboard: manages resumes
- Resume dashboard → Resume workbench: opens resume
- Resume author → PDF import UI: selects PDF
- PDF import UI → Import request client: submits images
- Import request client → Resume import API: posts request
- Resume import API → Configured AI service: requests extraction
- Resume workbench → Structured editor: edits content
- Structured editor → Resume state: updates resume
- Resume state → Undo redo history: records snapshots
- Resume state → File directory sync: syncs files
- Resume workbench → Resume preview: renders preview
- Resume preview → Template renderer: renders template
- Template renderer → Template registry: selects template
- Resume preview → PDF export: exports PDF
- Resume author → AI model settings: configures models
- AI model settings → AI provider config: reads model options
- Resume author → AI text polish: requests polish
- AI text polish → Polish endpoint: sends text
- Polish endpoint → Configured AI service: streams completion
- Resume author → Grammar checker: checks text
- Grammar checker → Grammar endpoint: sends content
- Grammar endpoint → Configured AI service: requests corrections
- Landing page → Localization: loads translations
- Resume dashboard → Localization: loads translations