Todo App

Todo アプリ

React Native モバイルアプリと Node.js/Express バックエンド API を備えた、包括的な Todo アプリケーションです。このファイルは Cursor と Box MCP サーバーを使用して作成されました。コードは手作業では一切記述していません。

Cursor で Box を検索し、製品要件定義書（PRD）とコーディング規約を探しました。そして、コーディング規約に必ず従うようにしたうえで、PRD に記載されたアプリを作成するよう Cursor に依頼しました。Box で使用したドキュメントを確認するには、/sample-docs ディレクトリをご覧ください。

PRD やガイドラインを都合よく解釈して、ビルドを簡単にすることを防ぐため、以下の公開されているサンプルを使用しました。

• ScalablePath の Damian Filiatrault による PRD。
• Google の GitHub からダウンロードしたコーディング規約

プロジェクト構成

• /mobile-app - Expo を使用した React Native モバイルアプリケーション
• /api - TypeScript を使用した Node.js/Express バックエンド API

機能

• ユーザー認証（サインアップ、ログイン）
• タスクリストの作成と管理
• 名前、説明、期限、優先度を指定したタスクの作成
• タスクを完了としてマーク
• タスクとリストの削除
• クロスプラットフォーム対応（iOS と Android）

技術スタック

モバイルアプリ

• Expo を使用した React Native
• TypeScript
• 状態管理用の Redux Toolkit
• ナビゲーション用の Expo Router
• セーフエリア処理用の React Native Safe Area Context

バックエンド API

• Express を使用した Node.js
• TypeScript
• Mongoose を使用した MongoDB
• JWT 認証
• リクエスト検証用の Express Validator

セットアップ手順

前提条件

• Node.js 18+
• MongoDB
• Expo CLI（npm install -g expo-cli）
• iOS シミュレーター（iOS 開発用）
• エミュレーターを備えた Android Studio（Android 開発用）

モバイルアプリのセットアップ

# Navigate to the mobile app directory
cd mobile-app

# Install dependencies
npm install

# Start the development server
npm start

# Run on iOS
npm run ios

# Run on Android
npm run android

API のセットアップ

# Navigate to the API directory
cd api

# Install dependencies
npm install

# Create a .env file with the following variables
# PORT=3000
# MONGODB_URI=mongodb://localhost:27017/todo-app
# JWT_SECRET=your-secret-key

# Start the development server
npm run dev

# Build the project
npm run build

# Start the production server
npm start

環境変数

モバイルアプリ

mobile-app ディレクトリに .env ファイルを作成し、以下を記述します。

EXPO_PUBLIC_API_URL=http://localhost:3000/api

API

api ディレクトリに .env ファイルを作成し、以下を記述します。

PORT=3000
MONGODB_URI=mongodb://localhost:27017/todo-app
JWT_SECRET=your-secret-key

API エンドポイント

認証

• POST /api/auth/register - 新しいユーザーを登録
• POST /api/auth/login - ユーザーをログイン

リスト

• GET /api/lists - 現在のユーザーのすべてのリストを取得
• POST /api/lists - 新しいリストを作成
• GET /api/lists/:listId - 特定のリストを取得
• PUT /api/lists/:listId - リストを更新
• DELETE /api/lists/:listId - リストを削除

タスク

• GET /api/lists/:listId/tasks - リスト内のすべてのタスクを取得
• POST /api/lists/:listId/tasks - 新しいタスクを作成
• GET /api/lists/:listId/tasks/:taskId - 特定のタスクを取得
• PUT /api/lists/:listId/tasks/:taskId - タスクを更新
• DELETE /api/lists/:listId/tasks/:taskId - タスクを削除

コントリビューション

1. リポジトリをフォークします
2. フィーチャーブランチを作成します（git checkout -b feature/amazing-feature）
3. 変更をコミットします（git commit -m 'Add some amazing feature'）
4. ブランチにプッシュします（git push origin feature/amazing-feature）
5. プルリクエストを作成します

ライセンス

このプロジェクトは MIT ライセンスの下でライセンスされています。