Skip to main content

ディレクトリ構成

src
components
(共通UI・lesson・sandbox・packet-sim・network-shared 等)
data
courses.ts
infrastructure/db
index.ts
routes
__root.tsx
index.tsx
courses.index.tsx
courses.$courseId.index.tsx
courses.$courseId.lessons.$lessonId.tsx
dashboard.tsx
mypage.tsx
ranking.tsx
profile.$userId.tsx
friends.tsx
  • 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: 週次リーグ情報