プロジェクト概要（ドキュメントはAI作成）

モダンなフルスタックアプリケーションの開発環境

• フロントエンド: Next.js 14 + TypeScript + Tailwind CSS + shadcn/ui
• バックエンド: FastAPI（Python）
• DB: PostgreSQL
• コンテナ化: Docker Compose
• ホットリロード対応

技術スタック

Frontend

• Next.js 14 - Reactフレームワーク
• TypeScript - 型安全な開発
• Tailwind CSS - ユーティリティファーストCSS
• shadcn/ui - モダンなUIコンポーネントライブラリ
• Radix UI - アクセシブルなプリミティブコンポーネント

Backend

• FastAPI - 高速なPython Webフレームワーク
• PostgreSQL - リレーショナルデータベース

ディレクトリ構成

myapps/
├── frontend/                 # Next.js アプリケーション
│   ├── src/
│   │   ├── pages/           # ページコンポーネント
│   │   ├── components/      # UIコンポーネント
│   │   │   └── ui/         # shadcn/ui コンポーネント
│   │   ├── styles/         # CSSファイル
│   │   │   ├── globals.css
│   │   │   └── tailwind.css
│   │   └── lib/            # ユーティリティ
│   ├── package.json        # フロントエンド依存関係
│   ├── tailwind.config.js  # Tailwind設定
│   ├── postcss.config.js   # PostCSS設定
│   └── tsconfig.json       # TypeScript設定
├── backend/                 # FastAPI アプリケーション
│   ├── src/
│   │   ├── main.py         # メインアプリケーション
│   │   └── db.py           # データベース設定
│   └── requirements.txt    # Python依存関係
└── docker-compose.yml      # コンテナ設定

セットアップ・起動方法

1. 環境準備

# リポジトリをクローン
git clone <repository-url>
cd myapps

# 環境変数ファイルを作成
cp .env.sample .env

2. アプリケーション起動

# 全サービスを起動
docker compose up --build

# バックグラウンドで起動する場合
docker compose up -d --build

3. アクセス

• フロントエンド: http://localhost:3000
• バックエンドAPI: http://localhost:8000
• API ドキュメント: http://localhost:8000/docs

開発ガイド

フロントエンド開発

# フロントエンドコンテナに入る
docker compose exec frontend sh

# 依存関係のインストール
npm install

# 開発サーバー起動（コンテナ外から）
npm run dev

新しいshadcn/uiコンポーネントの追加

# コンテナ内で実行
npx shadcn-ui@latest add [component-name]

バックエンド開発

# バックエンドコンテナに入る
docker compose exec backend sh

# 依存関係のインストール
pip install -r requirements.txt

ログの確認

# 全サービスのログ
docker compose logs

# 特定サービスのログ
docker compose logs frontend
docker compose logs backend