実装指示書

Viet Learn - ベトナム語フラッシュカード学習アプリの実装仕様

概要

背景: ホーチミン在住の日本人が日常で使えるベトナム語フレーズを手軽に学べるアプリ。

目的: プロトタイプデプロイフローのデモ用サンプルアプリとして作成。 Claude Code → GitHub → Coolify の一気通貫デプロイを実演する。

ターゲット: ベトナムに住む/旅行する日本語話者。ベトナム語初学者。

成功基準: カテゴリ選択 → クイズ → 結果表示の基本フローが問題なく動作すること。

画面構成

パス	画面名	説明
/	トップ	4カテゴリから選択
/quiz/[category]	クイズ	フラッシュカード + 4択
/result	結果	スコア表示 + リトライ
/spec	仕様書	このページ
/qa	QA	テストチェックリスト

画面遷移:

トップ(/) ──カテゴリ選択──> クイズ(/quiz/[cat])
                              │
                         全問完了
                              │
                              v
                         結果(/result)
                              │
                    ┌─────────┴─────────┐
                    v                   v
              もう一度挑戦          カテゴリ選択
              /quiz/[cat]              /

インタラクション仕様

要素	トリガー	変化	duration
カテゴリカード	hover	border: border → border-primary, shadow追加	150ms ease
選択肢ボタン	click	正解: green bg / 不正解: red bg	即時
プログレスバー	問題進行	幅が増加	300ms ease
スコア円グラフ	ページ表示	stroke-dashoffset アニメーション	1000ms ease