システム概要・構成図

1. プラットフォーム概要

Issue駆動開発を活用した業務委託向けプラットフォーム。報酬付きIssueを業務委託エンジニアがAI（Claude Code）で自発的に取得・解決し、MR内の報告資料のみでレビュー完了できる粒度で納品する。

ビジネスフロー

1. マネージャーがGitLab上に報酬付きIssueを作成
2. 業務委託エンジニアがIssueを取得（アサイン）
3. AI（Claude Code）を活用して開発・MR提出
4. レビュアーがMR内の報告資料でレビュー
5. FB対応 → 承認 → 報酬確定

2. 全体アーキテクチャ図

graph TB
    subgraph "Client Layer"
        Browser["Browser<br/>(React 19 + Vite)"]
    end

    subgraph "CDN / Edge"
        CFPages["Cloudflare Pages<br/>(Frontend Hosting)"]
    end

    subgraph "Backend Layer"
        API["FastAPI<br/>(REST API Server)"]
        Workers["Cloudflare Workers<br/>(Webhook Receiver)"]
    end

    subgraph "Data Layer"
        DB["PostgreSQL<br/>(Primary Database)"]
    end

    subgraph "External Services"
        GitLab["GitLab<br/>(Issue / MR / OAuth)"]
        Slack["Slack Bot<br/>(通知)"]
        Discord["Discord Bot<br/>(通知)"]
    end

    subgraph "CI/CD"
        GitLabCI["GitLab CI<br/>(Build / Deploy)"]
    end

    Browser -->|HTTPS| CFPages
    CFPages -->|API Calls| API
    API -->|SQLAlchemy ORM| DB
    API -->|OAuth / API| GitLab
    API -->|Webhook通知| Slack
    API -->|Webhook通知| Discord
    GitLab -->|Webhook Events| Workers
    Workers -->|Event Forward| API
    GitLabCI -->|Deploy Frontend| CFPages
    GitLabCI -->|Deploy Backend| API

3. コンポーネント一覧と責務

コンポーネント	技術	責務
Frontend SPA	React 19 + Vite + TypeScript	管理画面UI（プロジェクト一覧、カンバン、予算管理、ETA表示）
Backend API	FastAPI + SQLAlchemy	ビジネスロジック、認証、データ永続化、GitLab API連携
Webhook Receiver	Cloudflare Workers	GitLab Webhookの受信・検証・イベント転送
Database	PostgreSQL	プロジェクト、Issue、ユーザー、報酬、レビュー履歴の永続化
Frontend Hosting	Cloudflare Pages	SPA静的ファイル配信、CDNキャッシュ
CI/CD Pipeline	GitLab CI	ビルド、テスト、デプロイ自動化
認証	GitLab OAuth 2.0	SSO、ユーザー認証・認可
通知	Slack / Discord Bot	Issue割り当て、レビュー依頼、報酬確定等の通知

4. 技術スタック一覧

Frontend

カテゴリ	技術	バージョン
UIフレームワーク	React	19.x
ビルドツール	Vite	6.x
言語	TypeScript	5.x
状態管理	Zustand or TanStack Query	最新
UIコンポーネント	Shadcn/ui + Tailwind CSS	最新
ルーティング	React Router	7.x
HTTPクライアント	fetch API (native)	-

Backend

カテゴリ	技術	バージョン
Webフレームワーク	FastAPI	0.115+
ORM	SQLAlchemy	2.x
データベース	PostgreSQL	16.x
マイグレーション	Alembic	1.x
言語	Python	3.12+
タスクキュー	(必要に応じてCelery or ARQ)	-

Infrastructure

カテゴリ	技術	用途
Frontend Hosting	Cloudflare Pages	SPA配信
Backend Hosting	VPS or Cloudflare Workers	API Server
CI/CD	GitLab CI	ビルド・デプロイ
認証	GitLab OAuth 2.0	SSO
通知	Slack / Discord Bot	イベント通知

5. デプロイ構成

graph LR
    subgraph "開発者"
        Dev["git push"]
    end

    subgraph "GitLab CI"
        Build["Build Stage"]
        Test["Test Stage"]
        DeployFE["Deploy Frontend"]
        DeployBE["Deploy Backend"]
    end

    subgraph "Production"
        CF["Cloudflare Pages"]
        VPS["VPS / Workers"]
        PG["PostgreSQL"]
    end

    Dev --> Build --> Test
    Test --> DeployFE --> CF
    Test --> DeployBE --> VPS
    VPS --> PG

6. 管理画面の画面構成

/                          → ダッシュボード（全プロジェクトサマリー）
/projects                  → プロジェクト一覧
/projects/:id              → プロジェクト詳細（カンバンビュー）
/projects/:id/budget       → 予算管理・支払い一覧
/projects/:id/analytics    → 進捗分析・ETA表示
/issues/:id                → Issue詳細（報酬・アサイン・MRリンク）
/settings                  → システム設定（Webhook・通知設定）

主要画面の機能

プロジェクト一覧

• 予算 / Issue消化率 / 支払い確定チケット金額を一覧表示
• 予算超過・進捗遅延のアラート表示

プロジェクト詳細（カンバン）

• ステータス別Issue管理（Open / In Progress / Review / Done）
• ドラッグ＆ドロップによるステータス変更
• アサイン状況と消化率から完了予測（ETA）を可視化