Super Kitobxon

Super Kitobxon — オンライン速読スクールのプラットフォーム。コースと保護された動画レッスン、32種類のインタラクティブなトレーナー（Schulteテーブル、RSVPなど）、メンター付きグループ、書籍、進捗グラフ、Click/Payme決済。

Super Kitobxonはオンライン速読スクールです。受講者はコースを購入し、動画レッスンと演習を進め、毎日トレーナーで練習し、成果をグラフで確認します。私はこのプラットフォームのフロントエンド（受講者向けアプリと管理画面）を構築しました。

受講者向け

• コース：カタログ、比較とフィルター、受講登録。レッスンツリーと、テキスト・ファイル・テスト・演習を備えたレッスンプレーヤー。
• 32種類のトレーナー（7カテゴリ）：Schulteテーブル、RSVPリーダー、WPMテスト、ジグザグ法・Spritz・ブロック法、「カーテン」読みなど。連続トレーニングプログラムと結果履歴。
• 進捗：7日・30日・90日・365日のグラフと統計カード。
• グループと書籍：メンター付きグループ、PDFリーダーとオーディオプレーヤーを備えたライブラリ。
• 集中ツール：タイマー、メトロノーム、BGM。
• SMSコードによる登録、デバイスセッション管理。ClickとPaymeによる決済。

管理画面

コース、セクション、レッスン、動画、テスト、演習、ユーザー、グループ、書籍、音楽、トレーナー用コンテンツ（単語、テキスト、画像）の管理。手動でのコース登録とアプリ内翻訳エディター。

技術的な工夫

• トレーナーレジストリ：各トレーナーは必要な時に読み込まれ（lazy）、バックエンドはリストの設定のみを担当。APIが停止していてもローカルのリストで動作します。
• 共通トレーナー環境：サウンド、全画面、速度、タブ非表示時の一時停止、統一フォーマットでの結果返却。演習結果は0–1の比率で、管理者が設定した点数に基づいて評価されます。
• 正確なタイマー：時間はsetIntervalのカウントではなくDate.now()の差分から算出。低速な端末でもずれません。
• 動画保護：ユーザーIDとセッションIDを含む動くウォーターマークと、署名付きcookieによるアクセス。
• 新バージョン：10分ごとに新しいbuildを確認し、次のページ遷移時に更新。演習の途中では決して更新しません。
• 型付きAPI：型はバックエンドのOpenAPIスキーマから生成。4言語対応で、キリル文字のテキストはウズベク語のラテン文字から自動生成。テストファイルは62個。

私の役割

フロントエンドをすべて担当。43ページ、246コンポーネント、32種類のトレーナーを手がけました。バックエンド（Django）は別チームが担当しています。

成果

受講者はコース、演習、毎日のトレーニングを一つのプラットフォームで行い、読書速度の伸びをグラフで確認できます。