SNSクローンの全体設計（Month 1 ゴール）

Month 1のゴールは「SNSクローンがローカルで動く状態（ユーザー登録 → ログイン → 投稿 → フォロー）」。このドキュメントはそのゴールに向けた全体設計図である。何を作るかを最初に把握しておくことで、各週の学習内容が「なぜ必要か」の文脈で理解できるようになる。

システム構成

ブラウザ
  ↓ HTTP（localhost:3001）
web/  React 19 + Vite + React Router v7 + Tailwind CSS v4
  ↓ fetch（localhost:3001）
api/  Hono v4（Node.js）
  ↓ Drizzle ORM
DB    PostgreSQL 16（Docker）

フロントエンドとバックエンドは別プロセスとして動く（ポートも別）。ブラウザからは localhost:3001 のHono APIにfetchでリクエストを送る。

機能一覧

機能	説明
ユーザー登録	メール・パスワードで新規アカウント作成
ログイン	JWT発行・ローカルストレージに保存
投稿作成	テキスト投稿（140文字以内）
タイムライン	フォロー中のユーザーの投稿一覧
フォロー/アンフォロー	他ユーザーをフォロー
プロフィール	ユーザー名・投稿一覧表示

DBスキーマ

// api/src/db/schema.ts

// ユーザーテーブル
export const users = pgTable("users", {
  id: text("id").primaryKey().default(sql`gen_random_uuid()`),
  username: text("username").notNull().unique(),
  email: text("email").notNull().unique(),
  passwordHash: text("password_hash").notNull(),
  createdAt: timestamp("created_at").defaultNow(),
});

// 投稿テーブル
export const posts = pgTable("posts", {
  id: text("id").primaryKey().default(sql`gen_random_uuid()`),
  userId: text("user_id").notNull().references(() => users.id),
  content: text("content").notNull(),  // 最大140文字
  createdAt: timestamp("created_at").defaultNow(),
});

// フォローテーブル（多対多）
export const follows = pgTable("follows", {
  followerId: text("follower_id").notNull().references(() => users.id),
  followingId: text("following_id").notNull().references(() => users.id),
  createdAt: timestamp("created_at").defaultNow(),
}, (t) => ({
  pk: primaryKey({ columns: [t.followerId, t.followingId] }),
}));

APIエンドポイント一覧（Hono）

認証
  POST /api/auth/register   ユーザー登録
  POST /api/auth/login      ログイン（JWTを返す）

投稿
  GET  /api/posts           タイムライン取得（要認証）
  POST /api/posts           投稿作成（要認証）
  GET  /api/posts/:id       投稿詳細
  DELETE /api/posts/:id     投稿削除（本人のみ）

ユーザー
  GET  /api/users/:username  プロフィール取得
  GET  /api/users/:username/posts  ユーザーの投稿一覧

フォロー
  POST   /api/follows/:username  フォロー
  DELETE /api/follows/:username  アンフォロー

コンポーネント構成（React + React Router v7）

src/
├── main.tsx              アプリのエントリーポイント
├── router.tsx            React Router の設定（createBrowserRouter）
├── pages/
│   ├── Home.tsx          タイムライン（/）
│   ├── Login.tsx         ログイン（/login）
│   ├── Register.tsx      ユーザー登録（/register）
│   └── Profile.tsx       プロフィール（/profile/:username）
├── components/
│   ├── PostCard.tsx      投稿カード
│   ├── PostForm.tsx      投稿フォーム
│   ├── UserCard.tsx      ユーザーカード
│   └── Header.tsx        ヘッダー（ナビゲーション）
└── lib/
    ├── api.ts            API呼び出しの共通関数
    └── auth.ts           JWT管理（保存・取得・削除）

Week別実装ロードマップ

Week 1: 開発環境 + プロジェクト基盤

環境構築完了（Node.js・pnpm・Docker）
リポジトリclone・pnpm dev で起動確認
Git操作に慣れる（add・commit・push）
feature/week1-setup ブランチを切ってPRを上げる

確認: localhost:3001/health が {"status":"ok"} を返す

Week 2: フロントエンド（React + Tailwind）

ログインページのUIを作る（React + Tailwind）
投稿カードコンポーネントを作る
React Routerでページ遷移を実装する
TypeScriptで型を定義する

確認: localhost:3000 でUIが表示される、ページ遷移が動く

Week 3: バックエンド（Hono + Drizzle + JWT）

DBスキーマを定義する（Drizzle）
pnpm db:push でテーブルを作成する
認証API（register / login）をHonoで実装する
JWTミドルウェアを実装する
投稿APIを実装する

確認: curl でAPIを叩いてレスポンスが返る

Week 4: 統合 + Docker + CI

フロントエンドからAPIを呼び出す（fetch）
JWTをローカルストレージに保存・認証フローを通す
Docker Composeでアプリ全体を起動できるようにする
GitHub Actionsでlint・型チェックが走るようにする
CLAUDE.mdを書く

確認: 登録 → ログイン → 投稿の一連の操作がブラウザで動く

参考リソース

リポジトリ（https://github.com/subaru-hello/fullstack_typescript_curriculum）
Hono公式（https://hono.dev/）
React Router v7（https://reactrouter.com/）
Drizzle ORM（https://orm.drizzle.team/）

生きているコード

本ドキュメントで扱ったパターンの完全な動作コードは、メンター側リポジトリの参照ブランチで確認できます。

対応 Week: W1 / W2
参照ブランチ:
W1: reference/week-1
W2: reference/week-2
対応 checklist 項目: 全 Must の前提

ブランチの作り方・見方は b00-curriculum-map を参照してください。