ディレクトリ構成
src
components
(共通UI・lesson・sandbox・packet-sim・network-shared 等)
contexts
data
courses.ts
course-data
hooks
infrastructure/db
schema
index.ts
middlewares
routes
__root.tsx
index.tsx
courses.index.tsx
courses.$courseId.index.tsx
courses.$courseId.lessons.$lessonId.tsx
api/auth
dashboard.tsx
mypage.tsx
ranking.tsx
profile.$userId.tsx
friends.tsx
services
utils
- components: 共通UI、サンドボックス・パケットシミュレーター、ネットワーク共有コンポーネント
- contexts: 認証など React Context
- data: 静的データ・コース定義(
courses.ts,course-data/) - hooks: カスタムフック(進捗・XP・デバウンス等)
- infrastructure/db: Drizzle スキーマ・DB 接続
- middlewares: サーバー関数・API(認証・進捗・ランキング等)
- routes: TanStack Router のファイルベースルーティング
- services: ビジネスロジック
- utils: ユーティリティ
ルーティング
TanStack Router のファイルベースルーティングを使用しています。| ファイル | パス |
|---|---|
index.tsx | / |
courses.index.tsx | /courses |
courses.$courseId.index.tsx | /courses/:courseId |
courses.$courseId.lessons.$lessonId.tsx | /courses/:courseId/lessons/:lessonId |
dashboard.tsx | /dashboard |
mypage.tsx | /mypage |
ranking.tsx | /ranking |
profile.$userId.tsx | /profile/:userId |
データベース
主なテーブル
- user: ユーザー情報(level, xp, totalTimeSpent, currentStreak など)
- session: 認証セッション
- account: OAuth 連携アカウント
- course_progress: レッスン単位の進捗(完了・所要時間・ステータス)
- league: 週次リーグ情報