Skip to content

tied-inc/todo-sample-app

BranchesTags
 
 

Repository files navigation

Todo Sample App

このプロジェクトは、HonoバックエンドとNext.jsフロントエンドを使用したモダンなTODOアプリケーションのサンプルです。

✨ 特徴

  • 🔐 Clerk認証システム - セキュアなユーザー認証
  • 📋 Kanbanボード - ドラッグ&ドロップ対応のタスク管理
  • 🎨 モダンUI - Shadcn/ui + Tailwind CSS
  • 📚 Storybook - コンポーネントライブラリ
  • 🔄 リアルタイム更新 - サーバーアクション使用
  • 🎯 TypeScript - 完全型安全

🏗️ アーキテクチャ

  • フロントエンド: Next.js 15 + React 19 (ポート3000)
  • バックエンド: Hono API (統合)
  • データベース: PostgreSQL (ポート5432)
  • 認証: Clerk
  • ORM: Prisma
  • UI: Shadcn/ui + Tailwind CSS
  • 開発: mise, Docker Compose, Storybook

📋 前提条件

  • Node.js 22.10.0 (mise が自動管理)
  • Docker & Docker Compose
  • mise (タスクランナー)
  • Clerk アカウント (認証用)

🚀 セットアップ

1. 依存関係のインストール

# 全ての依存関係をインストール
mise run install

2. 環境変数の設定

Clerkの設定を行います：

# frontend/.env.local ファイルを作成
cp frontend/.env.local.example frontend/.env.local

frontend/.env.local に以下を設定：

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key

3. 開発環境のセットアップ

# データベース起動 + Prismaクライアント生成 + マイグレーション実行
mise run dev_setup

4. シードデータの投入 (オプション)

# サンプルデータを投入
mise run db_seed

🔧 開発

開発サーバーの起動

# フロントエンド開発サーバー (バックエンドAPIも含む)
mise run dev_frontend

並行開発

以下のコマンドを別々のターミナルで実行できます：

# ターミナル1: フロントエンドサーバー
mise run dev_frontend

# ターミナル2: Storybookコンポーネント開発
mise run storybook

# ターミナル3: データベース管理UI
mise run db_studio

# ターミナル4: pgweb (データベースWebUI)
docker compose up pgweb

アクセス

🎨 UI コンポーネント

Storybook

# Storybook開発サーバー起動
mise run storybook

# Storybookビルド
mise run build_storybook

利用可能なコンポーネント

  • Button
  • Input
  • その他のShadcn/uiコンポーネント

📡 API エンドポイント

認証

  • すべてのAPIエンドポイントはClerk認証が必要

Todos API

  • GET /api/todos - ユーザーのTODO一覧取得
  • POST /api/todos - TODO作成
  • PUT /api/todos/:id - TODO更新
  • DELETE /api/todos/:id - TODO削除

Users API

  • GET /api/users - ユーザー情報取得
  • POST /api/users - ユーザー作成

認証API

  • GET /api/auth/me - 現在のユーザー情報取得

リクエスト例

# 認証ヘッダー付きTODO取得
curl -H "Authorization: Bearer YOUR_CLERK_TOKEN" \
     http://localhost:3000/api/todos

# TODO作成
curl -X POST http://localhost:3000/api/todos \
  -H "Authorization: Bearer YOUR_CLERK_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"title":"新しいTODO","description":"説明","status":"TODO"}'

🛠️ 利用可能なコマンド

開発サーバー

  • mise run dev_frontend - フロントエンド開発サーバー起動
  • mise run dev_setup - 開発環境セットアップ
  • mise run storybook - Storybook開発サーバー起動

データベース操作

  • mise run db_setup - PostgreSQLをDocker Composeで起動
  • mise run db_migrate - マイグレーション実行
  • mise run db_generate - Prismaクライアント生成
  • mise run db_reset - データベースリセット
  • mise run db_seed - シードデータ投入
  • mise run db_studio - Prisma Studio起動

ビルド

  • mise run build_prisma - Prismaパッケージビルド
  • mise run build_backend - バックエンドパッケージビルド
  • mise run build_frontend - フロントエンドビルド
  • mise run build_storybook - Storybookビルド

その他

  • mise run install - 全依存関係インストール

🗂️ プロジェクト構造

todo-sample-app/
├── frontend/                    # Next.js フロントエンド
│   ├── src/
│   │   ├── app/                # App Router
│   │   │   ├── (authorized)/   # 認証が必要なページ
│   │   │   │   └── dashboard/  # メインダッシュボード
│   │   │   ├── api/            # API Routes (Honoと統合)
│   │   │   ├── sign-in/        # Clerk サインイン
│   │   │   └── sign-up/        # Clerk サインアップ
│   │   └── components/
│   │       └── kanban/         # Kanbanボードコンポーネント
│   └── package.json
├── backend/                    # Hono APIルート
│   ├── src/
│   │   ├── routes/            # API ルート定義
│   │   └── app.ts            # Hono アプリケーション
│   └── package.json
├── packages/
│   ├── prisma/               # データベース設定
│   │   ├── schema.prisma     # スキーマ定義
│   │   └── seed.ts          # シードデータ
│   └── components/          # 共有UIコンポーネント
│       ├── src/
│       │   └── components/
│       │       └── ui/      # Shadcn/ui コンポーネント
│       └── package.json
├── compose.yml              # Docker Compose設定
└── mise.toml               # タスク定義

🗄️ データベース

スキーマ

model User {
  id            String   @id @default(cuid())
  email         String   @unique
  emailVerified Boolean  @default(false)
  name          String
  image         String?
  todos         Todo[]
}

model Todo {
  id          String     @id @default(cuid())
  title       String
  description String?
  completed   Boolean    @default(false)
  status      TodoStatus @default(TODO)  // TODO, IN_PROGRESS, DONE
  userId      String
  user        User       @relation(fields: [userId], references: [id])
}

ステータス

  • TODO: 未着手
  • IN_PROGRESS: 進行中
  • DONE: 完了

🔧 トラブルシューティング

ポートが使用中の場合

# ポート使用確認
lsof -i :3000  # フロントエンド
lsof -i :5432  # PostgreSQL
lsof -i :6006  # Storybook
lsof -i :8081  # pgweb

# プロセス終了
kill -9 <PID>

データベース接続エラー

# データベース再起動
docker compose down
mise run db_setup

Clerk認証エラー

  1. Clerk Dashboardで設定を確認
  2. 環境変数が正しく設定されているか確認
  3. ドメイン設定を確認

Prismaクライアント生成エラー

# クライアント再生成
mise run db_generate
mise run build_prisma

📚 技術スタック

フロントエンド

  • Next.js 15 - フルスタックReactフレームワーク
  • React 19 - UIライブラリ
  • TypeScript - 型安全性
  • Tailwind CSS - ユーティリティファーストCSS
  • Shadcn/ui - UIコンポーネントライブラリ
  • @dnd-kit - ドラッグ&ドロップ機能
  • Clerk - 認証・ユーザー管理

バックエンド

  • Hono - 高速・軽量Webフレームワーク
  • Zod - バリデーション
  • Clerk - 認証ミドルウェア

データベース・ORM

  • PostgreSQL - リレーショナルデータベース
  • Prisma - 次世代ORM

開発ツール

  • mise - タスクランナー・バージョン管理
  • Docker Compose - コンテナオーケストレーション
  • Storybook - コンポーネント開発環境
  • Biome - リンター・フォーマッター
  • pgweb - データベースWeb管理ツール

🎯 実装済み機能

  • ✅ Clerk認証システム
  • ✅ ユーザー登録・ログイン
  • ✅ Kanbanスタイルのタスク管理
  • ✅ ドラッグ&ドロップによるステータス変更
  • ✅ TODO CRUD操作
  • ✅ リアルタイム更新（サーバーアクション）
  • ✅ レスポンシブUI
  • ✅ エラーハンドリング
  • ✅ 型安全なAPI
  • ✅ 共有UIコンポーネント
  • ✅ Storybook統合

📝 備考

  • フロントエンドのNext.jsアプリケーション内でHono APIが統合されています
  • すべてのAPI操作にはClerk認証が必要です
  • ドラッグ&ドロップでTODOのステータスを変更できます
  • サーバーアクションを使用してリアルタイムでUIが更新されます
  • TypeScriptの厳格な型チェックが有効になっています

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Sponsor this project

 
Learn more about GitHub Sponsors

Packages

No packages published

Languages

  • TypeScript 90.6%
  • JavaScript 5.4%
  • CSS 4.0%