これは、Next.js、GraphQL、Prismaで構築されたモダンなTODOアプリケーションです。 このアプリケーションはクリーンアーキテクチャの原則に従い、タスクとユーザーを管理するための堅牢なAPIを提供します。
Details
- フロントエンド: App Routerを使用したNext.js
- API: Apollo ServerによるGraphQL
- データベース: SQLite用のPrisma ORM（他のデータベースにも設定可能）
- 認証: 安全な認証のためのAuth0
- アーキテクチャ: 関心の分離を持つクリーンアーキテクチャ
- テスト: APIエンドポイントのエンドツーエンドテスト
- ランタイム: 高速なJavaScript実行のためのBun
APIはGraphQLを使用して構築され、以下の主要な型を提供します：
type Task {
id: ID!
userId: ID!
title: String!
description: String!
completedAt: DateTime
createdAt: DateTime!
updatedAt: DateTime!
user: User!
}type User {
id: ID!
name: String!
email: String!
role: UserRole!
createdAt: DateTime!
updatedAt: DateTime!
tasks: TaskConnection!
}
enum UserRole {
ADMIN
EDITOR
}-
クエリ:
task(id: ID!): Task!- IDによるタスクの取得- 権限: ログインユーザーは自分のタスクのみアクセス可能。管理者は全てのタスクにアクセス可能。
tasks(page: Int, perPage: Int, sortKey: TaskSortKey, sortOrder: SortOrder, q: String): TaskConnection!- ソートとフィルタリング機能を持つページネーション付きタスクの取得- 権限: 全てのログインユーザーがアクセス可能。ただし、一般ユーザーは自分のタスクのみ取得可能。
-
ミューテーション:
createTask(input: CreateTaskInput!): Task!- 新しいタスクの作成- 権限: 全てのログインユーザーが利用可能。作成されるタスクは自動的にユーザーに紐づけられる。
updateTask(id: ID!, input: UpdateTaskInput!): Task!- 既存タスクの更新- 権限: ログインユーザーは自分のタスクのみ更新可能。管理者は全てのタスクを更新可能。
completeTask(id: ID!): Task!- タスクを完了としてマーク- 権限: ログインユーザーは自分のタスクのみ完了可能。管理者は全てのタスクを完了可能。
deleteTask(id: ID!): Task- タスクの削除- 権限: ログインユーザーは自分のタスクのみ削除可能。管理者は全てのタスクを削除可能。
-
クエリ:
me: User!- 現在認証されているユーザーの取得- 権限: 全てのログインユーザーが自分の情報にアクセス可能。
user(id: ID!): User!- IDによるユーザーの取得- 権限: ログインユーザーは自分の情報のみアクセス可能。管理者は全てのユーザー情報にアクセス可能。
users(page: Int, perPage: Int, sortKey: UserSortKey, sortOrder: SortOrder, name: String): UserConnection!- ソートとフィルタリング機能を持つページネーション付きユーザーの取得- 権限: 管理者のみがアクセス可能。
-
ミューテーション:
createUser(input: CreateUserInput!): User!- 新しいユーザーの作成- 権限: 管理者のみが利用可能。
updateUser(id: ID!, input: UpdateUserInput!): User!- 既存ユーザーの更新- 権限: ログインユーザーは自分の情報のみ更新可能。管理者は全てのユーザー情報を更新可能。
deleteUser(id: ID!): User- ユーザーの削除- 権限: ログインユーザーは自分のアカウントのみ削除可能。管理者は全てのユーザーを削除可能。
APIは認証にAuth0を使用しています。アプリケーション内からのリクエストは、Auth0のセッション認証を使用して自動的に認証されます。これはNext.jsのミドルウェアによって処理されます。
APIはリスト操作のためのオフセットベースのページネーションをサポートしています：
type PageInfo {
totalCount: Int!
perPage: Int!
totalPage: Int!
currentPage: Int!
}
interface Edge {
cursor: String!
node: Node!
}
interface Connection {
edges: [Edge!]!
pageInfo: PageInfo!
}
enum SortOrder {
asc
desc
}このアプリケーションは、関心事の明確な分離を持つクリーンアーキテクチャの原則に従っています：
- ドメイン: コアビジネスエンティティとルール
- ユースケース: アプリケーション固有のビジネスルール
- インターフェースアダプター: アプリケーションと外部インターフェース間のアダプター
- フレームワーク: 外部フレームワークとツール
- Auth0のウェブサイトにアクセスし、アカウントを作成またはログインします。
- 新しいアプリケーションを作成します：
- ダッシュボードから「Applications」→「Create Application」を選択
- アプリケーション名を入力（例：「TODO App」）
- 「Regular Web Applications」を選択
- 「Create」をクリック
- アプリケーション設定を構成します：
- 「Settings」タブで以下の項目を設定：
- Allowed Callback URLs:
http://localhost:3000/auth/callback - Allowed Logout URLs:
http://localhost:3000
- Allowed Callback URLs:
- 「Save Changes」をクリック
- 「Settings」タブで以下の項目を設定：
- 以下の情報をメモします：
- Domain
- Client ID
- Client Secret
- プロジェクトのルートディレクトリに
.envファイルを作成します（.env.sampleをコピーして使用できます） - 以下の環境変数を設定します：
# Database
DATABASE_URL="file:./dev.db"
# SSO
# @see https://github.com/auth0/nextjs-auth0
AUTH0_DOMAIN=your-auth0-domain.auth0.com
AUTH0_CLIENT_ID=your-client-id
AUTH0_CLIENT_SECRET=your-client-secret
AUTH0_SECRET=a-long-random-string-at-least-32-characters
AUTH0_CONNECTION=Username-Password-Authentication
APP_BASE_URL=http://localhost:3000
AUTH0_DOMAIN、AUTH0_CLIENT_ID、AUTH0_CLIENT_SECRETには、Auth0アプリケーション設定からメモした値を入力しますAUTH0_SECRETには、32文字以上のランダムな文字列を生成して入力します（セッション暗号化に使用）- 例: 以下のコマンドを使用して生成できます:
openssl rand -hex 32
- 例: 以下のコマンドを使用して生成できます:
# 依存関係のインストール
bun install
# 開発サーバーの実行
bun devブラウザでhttp://localhost:3000を開いて結果を確認します。
アプリケーションを初期化すると、以下のデフォルトアカウントが作成されます：
- 名前: 田中太郎
- メールアドレス: [email protected]
- パスワード: Test1234
- 権限: EDITOR（編集者）
- 名前: 管理者
- メールアドレス: [email protected]
- パスワード: Test1234
- 権限: ADMIN（管理者）
これらのアカウントを使用してアプリケーションにログインできます。
このプロジェクトには、Junie等のAIによる実装が含まれています。AIは主にコードの生成、最適化、およびドキュメント作成の支援に活用されています。
このプロジェクトで使用されている技術についての詳細情報：