Otalingo

英語カバー曲の歌詞同期表示とAI解釈で、音楽を教材に変える学習アプリ。

英語カバー曲を題材に、歌詞の同期表示、行単位の解釈、プレイリスト、学習再開導線をまとめた語学学習アプリです。

実装は Next.js App Router と TypeScript が中心です。認証は Auth.js、データ層は Prisma を使い、歌詞データ、動画メタデータ、ユーザー投稿、プレイリストをアプリ内の学習体験へつなげています。

実装で見せたい点

• LRC 形式の歌詞を解析し、再生位置に合わせてアクティブ行を切り替える UI。
• YouTube ID、曲情報、歌詞、翻訳をまとめる編集ワークフロー。
• AI 翻訳・解釈の利用量制限、権限チェック、公開/非公開状態の扱い。
• Stripe や外部 AI API を含む、実サービス寄りの境界設計。

技術メモ

ローカルでは corepack pnpm dev で 127.0.0.1:3000 に起動します。現状は Cloudflare D1 への移行検討メモがありつつ、アプリ側は Prisma/SQLite ローカル運用と外部 API 連携を保つ構成です。