JK
プロジェクト
JK
>読み込み中 // 読み込み中
ビューを初期化中
制作・デザイン:JK
JK
>読み込み中 // PROJECT DETAILS
PARSING ARCHITECTURE, DIAGRAMS & API ENDPOINTS
プロジェクト一覧に戻る
ライブデモGitHubで見る
LaTeX レジュメジェネレーター
完了reacttypescriptvitetailwindgogindocker

LaTeX レジュメジェネレーター

ATS最適化されたLaTeXレジュメをモジュール式テンプレートと高速コンパイルで出力するプライバシー重視の作成ツール。

課題と解決策

従来のサービスは個人情報をクラウドに保管し、ATS審査で弾かれやすいPDFを生成しがちです。本ツールはローカル保存と正確無比なLaTeX組版を提供します。

機能

  • ATS選考に最適化された厳選9種のLaTeXテンプレート
  • プライバシーを保護するブラウザ完結型のローカル保存
  • Goバックエンドによるリアルタイム組版とライブプレビュー
  • A4用紙1枚のフォーマット制約を厳密に保証
  • LaTeXソースコードとPDFの両形式でエクスポート可能

技術スタック

技術バージョン目的採用理由
React19UI frameworkLatest concurrent features, lazy loading
TypeScript~6.0Type safetyPrevents runtime errors on complex resume data model
Vite8.xBuild tool & dev serverFast HMR, native ESM, code splitting via glob imports
Tailwind CSSv4Utility-first stylingRapid UI development, consistent design tokens
Zustand5.xState managementMinimal boilerplate, built-in persist middleware
@dnd-kitcore 6, sortable 10Drag-and-dropAccessible, performant sortable lists
Go1.25+Backend runtimeFast startup, small binaries, excellent concurrency
Gin1.12HTTP frameworkHigh performance, middleware ecosystem
Tectonic0.16.9LaTeX→PDF compilerSelf-contained, no TeX distribution needed
Docker—ContainerizationReproducible builds, production parity
SQLitemodernc.org/sqlite 1.54Stats persistenceNo CGO dependency, cross-compilation
Sentry10.xError tracking & monitoringSession replay, performance monitoring, feedback widget

アーキテクチャ

React 19 SPA

Zustand Store

localStorage

Live HTML Preview

LaTeX Generator

9 Template Engine

Gin Server

:8080

Rate Limiter

API Key Auth

Compile Handler

Tectonic

SQLite Stats

Prometheus

Grafana

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Frontend (React SPA)

  • React 19 SPA with Zustand state management
  • 9 pluggable template strategy pattern (config + preview + LaTeX generator)
  • Live A4 page simulation with zoom and pagination
  • WebSocket-based real-time compilation streaming
  • Vite 8 with code splitting via import.meta.glob

Backend (Go Microservice)

  • Go/Gin HTTP server with single concern: LaTeX compilation
  • Tectonic subprocess management with --untrusted sandboxing
  • Per-IP token bucket rate limiting (5 rps, burst 10)
  • API key authentication on compile endpoints
  • SQLite for aggregate visit/download statistics

Infrastructure

  • Docker Compose orchestration (backend + Prometheus + Grafana)
  • Multi-stage Docker builds (golang → alpine + tectonic)
  • Vercel deployment for frontend, Render for backend
  • Prometheus metrics with Grafana dashboards

プロジェクト構成

backend
cmd
server
main.goGin server setup, routes, middleware
internal
compiler
handlers
middleware
websocket
frontend
src
components
editor
preview
hooks
stores
templates

APIエンドポイント

Go Backend （ポート 8080）

メソッドルート目的
POST/api/compileCompile LaTeX to PDF (HTTP)
GET/api/compile/wsWebSocket compile with progress streaming
POST/api/stats/visitRecord page visit
POST/api/stats/downloadRecord PDF download
GET/api/statsGet aggregate stats
GET/api/healthHealth check (Tectonic + DB status)
GET/metricsPrometheus metrics

データベース設計

stats

2 cols
keyPK
TEXT
value
INTEGER
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

stats

カラム型備考
keyPKTEXTCounter name: 'visits' or 'downloads'
valueINTEGERCounter value, default 0

Single table with 2 key-value rows. WAL mode enabled. Used only for aggregate visit/download statistics — no user data stored.

No relationships. Single table with 2 counter rows.

主要な設計判断

Frontend-First Architecture

判断: All resume data, editing, preview, and LaTeX generation happen in the browser

理由: Privacy-first: all data stays in browser with localStorage persistence

利点: Zero server costs for editing, user privacy, offline-capable editing

トレードオフ: No cloud sync, no cross-device access, localStorage size limits

Tectonic for LaTeX Compilation

判断: Use Tectonic instead of pdflatex or other TeX distributions

理由: Self-contained binary, no TeX distribution needed on the server

利点: Simple Docker image, reproducible builds

トレードオフ: Slower than pdflatex for complex documents

Zustand over Redux/Context

判断: Use Zustand for state management with built-in persist middleware

理由: Minimal boilerplate, built-in localStorage persistence

利点: Simple state management, easy persistence

トレードオフ: Less ecosystem than Redux

WebSocket for Compile Streaming

判断: Use WebSocket instead of HTTP polling for PDF compilation

理由: Real-time progress feedback improves UX during 5-60s compilation

利点: User sees compilation stages (validating → writing → compiling → done)

トレードオフ: More complex than HTTP polling

Strategy Pattern for Templates

判断: Each template implements a Template interface with config, Preview, and generateLatex

理由: Multiple visual styles with shared data model

利点: Extensible, each template self-contained, lazy-loadable via import.meta.glob

トレードオフ: Code duplication across templates

SQLite for Stats Only

判断: Use SQLite for aggregate visit/download counters only

理由: Zero-config embedded DB adequate for 2 counter rows

利点: No external database dependency, simple deployment

トレードオフ: Write contention under concurrent access

テスト

None configured•ユニットテスト 0 件

テスト内容

    不足しているカバレッジ

    • Unit tests for escapeLatex, generateLatex functions
    • Unit tests for template rendering and LaTeX generation
    • Integration tests for compile handler
    • Integration tests for WebSocket compilation flow
    • E2E tests for critical user flows (edit → preview → export)

    主な課題

    • サーバーレス環境下で500ms未満のLaTeXコンパイルを実現すること
    • 動的コンテンツがA4 1ページの枠内に収まるよう自動調整すること

    学んだこと

    • LaTeX組版エンジンとWebマイクロサービスの効率的な結合
    • ユーザープライバシーを最優先にしたローカルファースト設計