Magic Resume

JOYCEQL/magic-resume — TanStack Start と Zustand で作られた、AI支援つきオンライン履歴書エディタ。

1 — 概要
What it is

Magic Resume は、履歴書を入力しながらプレビューし、テンプレート・テーマ・並び替え・PDF出力まで一画面で扱うオンラインエディタ。README ではリアルタイムプレビュー、カスタムテーマ、ダークモード、自動保存、ローカル保存、AI支援ライティングが主要機能として挙げられている。

設計の中心は「履歴書データを一つの構造体として持ち、編集UI・プレビュー・テンプレート・エクスポートへ同じデータを流す」こと。見た目はテンプレートで差し替え、内容は Zustand store に集約している。

8
テンプレート登録
3
主要出力形式
4
AIモデル種別
2
言語README
2 — 体験フロー
1
作成

空の履歴書か初期データつき履歴書を生成。表示言語に応じて初期状態も切り替える。

2
編集

基本情報、職歴、学歴、プロジェクト、資格、独自セクションを store 経由で更新。

3
プレビュー

テンプレート registry から選ばれた React コンポーネントが同じ履歴書データを描画。

4
調整

テーマ色、フォント、余白、セクション順、表示/非表示、1ページ自動縮小を調整。

5
出力

JSON、Markdown、PDFとして保存。必要に応じてローカルディレクトリとの同期も行う。

3 — 内部構造
State

Resume Store

useResumeStore が複数履歴書、アクティブ履歴書、各セクション更新、テンプレート変更、ファイル同期をまとめる。永続化キーは resume-storage。

ZustandpersistFile System Access
Data Model

ResumeData

基本情報、学歴、職歴、プロジェクト、資格、カスタム項目、グローバル設定を一つの型に集める。表示順と有効/無効は menuSections が持つ。

BasicInfoGlobalSettingsMenuSection
Templates

Template Registry

classic、modern、left-right、timeline、minimalist、elegant、creative、editorial を registry で統一管理する。

8 layoutsconfig.tsindex.tsx
Editing

Rich Text

Tiptap と Markdown 変換の補助関数で、本文フィールドをリッチテキストとして編集し、Markdown出力時は HTML 由来の内容を整える。

TiptapTurndownMarkdown
AI

Server Routes

/api/polish、/api/grammar、/api/resume-import が外部モデル呼び出しを担当。Gemini、Doubao、DeepSeek、OpenAI互換エンドポイントを扱う。

streamingJSON modecustom endpoint
Export

PDF / JSON / MD

JSONとMarkdownはブラウザ側で生成し、PDFはプレビュー DOM と抽出したCSSをPDF生成サービスへ渡す。画像は data URL 化して出力を安定させる。

PDF serviceBlob downloadsafe filename
4 — AI と出力
AI routes
経路役割返却
/api/polishMarkdown形式の履歴書文面を、より専門的で簡潔な表現へ改善する。ストリームテキスト
/api/grammar中国語履歴書の誤字と重大な句読点ミスだけを検出する。JSON
/api/resume-importテキストまたは画像から履歴書構造を抽出し、アプリのデータ形へ近づける。{ resume }
Export paths
形式処理主な用途
JSONResumeData をそのまま整形保存。バックアップ、再インポート、同期
Markdown表示中セクションを順序付きで本文化し、HTML本文はMarkdownへ変換。テキスト提出、LLM入力
PDFプレビューDOMを複製し、CSSと画像を整えてPDF生成サービスへ送る。応募書類として配布
Data flow
A
AI設定

ai-config-storage に選択モデルとモデルID/エンドポイント設定を保持。

B
API呼び出し

モデル種別ごとの URL、ヘッダ、必須設定を AI_MODEL_CONFIGS で切り替え。

C
UI反映

文章改善、校正ハイライト、インポート結果を store とプレビューに戻す。

5 — 運用と制約
Quick start

README上の最短起動手順はシンプル。パッケージマネージャは pnpm@10.3.0 が指定されている。

git clone git@github.com:JOYCEQL/magic-resume.git
cd magic-resume
pnpm install
pnpm dev

ビルドは pnpm build。Docker Compose ではアプリイメージをビルドしてバックグラウンド起動する手順がREADMEにある。

License note

ライセンスファイルは Apache License 2.0 本文に加えて、商用利用に関する追加制限を明記している。個人の非商用利用は無料、SaaS提供・商用製品への組み込み・商用運用目的の二次開発には事前の商用ライセンス取得が必要、という構成。

確認ポイント: 公開利用や社内業務利用を検討する場合は、READMEとLICENSEの最新内容を直接確認するのが安全。ここではソースに書かれている制約の要約に留める。
ローカル優先: 履歴書データは resume-storage に永続化され、許可されたディレクトリへJSON同期できる。ブラウザ環境と権限に依存するため、ファイル同期は補助経路として理解するとよい。
1ページ自動調整: A4高さから余白を引いた可用高さに対し、内容が少し超える場合だけ縮小する。下限は90%で、読みやすさを守る設計になっている。
Sources