connpass のようなイベントの掲載・申し込みができるアプリ
React Router によるクライアントサイドルーティングを実践し、SPA の実装を学ぶ。
React の実践型学習プラットフォーム React Road のお題 イベント掲載アプリに挑戦させていただいた学習プロジェクトです。
課題の実装の他、個人的な学習目的で私が行った変更や追加機能が含まれています。
Note
このリポジトリは、個人的な学習およびデモンストレーションの目的のみに使用されます。
This repository is for personal learning and demonstration purposes only.
トップページ |
イベント一覧ページ |
イベント詳細ページ |
イベント作成フォーム |
- イベント一覧ページ： サイトアクセス時に、イベント一覧を表示
- イベント詳細ページ： イベント詳細情報を表示
- イベント申し込みページ： イベントに申し込むためのメールフォーム(フロントエンドのみ)
- 申し込み完了ページ： 申し込み完了メッセージを表示
- 認証システム - ユーザー登録・ログイン・ログアウト機能 #3
- イベント管理 - CRUD 操作でイベントの作成・編集・削除 #4, #17
- データベース連携 - イベントと参加者情報をデータベースに保存 #1
- 定員管理 - 参加者が満員の場合、参加できないよう制御
- 型安全性 - フロントエンドとバックエンドで型定義を共有
- モダンフォーム - React Hook Form + Zod #16
- 状態管理 - Zustand による効率的な状態管理 #29
- ルーティング - React Router v6 → v7 へのアップデート
- イベント申し込み・キャンセル機能 - 参加申し込みとキャンセル機能 #5
- イベント作成履歴 - イベント作成履歴の表示 #40
- 画像アップロード - イベント画像のアップロード機能 #19
- ユーザー情報編集機能 - ユーザープロフィールページ・ユーザー情報の編集機能実装 #18
- メール通知 - メール通知システム実装 #28
| カテゴリ | 技術スタック |
|---|---|
| フロントエンド | Vite, React, React Router v7, TailwindCSS, shadcn/ui |
| 状態管理・フォーム | TanStack Query, Zustand, React Hook Form |
| バリデーション | Zod（フロントエンド・バックエンド共通スキーマ） |
| バックエンド | Cloudflare Pages Functions |
| データベース | Turso（libSQL） |
| 認証 | Better Auth |
| デプロイ | Cloudflare Pages |
| 開発ツール | TypeScript, bun |
Mermaid
graph TB
subgraph "クライアント（ブラウザ）"
React[React App<br/>Vite + TypeScript]
Zustand[Zustand<br/>状態管理]
TanStack[TanStack Query<br/>サーバー状態]
ReactRouter[React Router v7<br/>ルーティング]
end
subgraph "Cloudflare Pages"
StaticFiles[静的ファイル配信]
Functions[Pages Functions<br/>API endpoints]
end
subgraph "データベース"
Turso[(Turso libSQL)]
end
subgraph "認証"
BetterAuth[Better Auth<br/>セッション管理]
end
React --> StaticFiles
TanStack --> Functions
Zustand -.-> TanStack
Functions --> Turso
Functions --> BetterAuth
BetterAuth --> Turso
Mermaid
erDiagram
users {
text id PK
text email
boolean emailVerified
text name
text image
integer createdAt
integer updatedAt
}
events {
text id PK
text title
text date
text location
text description
text image_url
integer capacity
text creator_id FK
integer created_at
}
attendees {
text id PK
text event_id FK
text email
text user_id FK
integer created_at
}
sessions {
text id PK
text userId FK
text token
integer expiresAt
text ipAddress
text userAgent
integer createdAt
integer updatedAt
}
accounts {
text id PK
text accountId
text providerId
text userId FK
text accessToken
text refreshToken
text idToken
text password
integer createdAt
integer updatedAt
}
verifications {
text id PK
text identifier
text value
integer expiresAt
integer createdAt
integer updatedAt
}
users ||--o{ events : creates
users ||--o{ attendees : registers
users ||--o{ sessions : has
users ||--o{ accounts : has
events ||--o{ attendees : has
Mermaid
sequenceDiagram
participant U as User
participant C as Component
participant Z as Zustand Store
participant T as TanStack Query
participant A as API Functions
participant D as Database
U->>C: ログインボタンクリック
C->>T: useMutation.mutate()
T->>A: POST /api/auth/sign-in
A->>D: ユーザー認証
D-->>A: セッション作成
A-->>T: レスポンス返却
T->>T: onSuccess()
T->>Z: ユーザー情報を更新
Z-->>C: 状態変更通知
C-->>U: UI更新
| エンドポイント | メソッド | 認証 | 説明 |
|---|---|---|---|
/api/events |
GET | - | イベント一覧取得 |
/api/events/[id] |
GET | - | イベント詳細取得 |
/api/events/create |
POST | ✅ | イベント作成 |
/api/events/[id]/update |
PUT | ✅ | イベント更新 |
/api/events/[id]/delete |
DELETE | ✅ | イベント削除 |
| エンドポイント | メソッド | 認証 | 説明 |
|---|---|---|---|
/api/events/[id]/apply |
POST | ✅ | イベント申し込み |
/api/events/[id]/cancel |
DELETE | ✅ | イベント申し込みキャンセル |
/api/user/registrations |
GET | ✅ | ユーザー申し込み履歴取得 |
| エンドポイント | メソッド | 認証 | 説明 |
|---|---|---|---|
/api/auth/sign-in |
POST | - | ユーザーログイン |
/api/auth/sign-up |
POST | - | ユーザー新規登録 |
/api/auth/sign-out |
POST | ✅ | ユーザーログアウト |
/api/auth/session |
GET | - | セッション情報取得 |