Claudeで案件管理システムを作ってみた

SESで働いている人なら必ず経験するのが、案件探しです。
案件の提案をされるとき、どういう形式で提案されますか？
チャットやExcel、システム様々な形式で提案を受けると思います。
しかし、チャットに埋もれてどこに詳細があるか分からなくなったり、Excelやスプレッドシートだとスマホから見づらかったりすることがありませんか？
そんなストレスを解消するべく、claudeに案件管理システムを作らせてみました。

対象

claudeを動かしたことがないという方向けになっております。

プロンプト

雑な感じですが、以下のようなプロンプトを投げます。

案件管理システムを開発してください。
背景としては、SESの案件を決める時にチャットで案件の内容を提案されますが、複数提案をされるとチャットに埋もれてどこにあるかわからなくなります。
また、実際に面談が行われた案件が、現在返答待ちなのか、見送りなのかわからないことも多々あります。
そして、この経験はあるか？と営業から質問されますが、たまに前に聞かれたことをまた聞かれることもあります。
この不便さと無駄な確認にリソースをわずかですが取られている状況ですので、これをシステムで管理して、即座に確認できるようにしたい。
今回のユーザは営業とエンジニア。
営業は案件の追加や進捗状況の変更ができる。また、エンジニアのこれまでの経験内容や個人情報（住んでる場所など）も追加できる。
エンジニアは自分に紹介された案件の一覧が確認できる。
管理ユーザは上記に加えてエンジニアの新規追加、削除が可能。
としてください。

環境

ローカルにあるWSL上で今回は開発してもらいました。
注意点としては、gitがないと動かない？感じでしたのでアカウントを作っておくといいかもしれない。

技術スタック

バックエンド — Python 3.12

分類	採用
Web フレームワーク	FastAPI 0.115
ORM	SQLAlchemy 2.0
マイグレーション	Alembic 1.14
DB ドライバ	psycopg 3（binary）
検証・設定	pydantic 2 / pydantic-settings
パスワード	argon2-cffi
トークン	PyJWT（HS256）
テスト	pytest 8（43 ケース）
Slack 連携（M6）	slack-bolt（導入済み・休眠中）

フロントエンド — TypeScript 5.7

分類	採用
UI ライブラリ	React 18
ビルド	Vite 6
コンポーネント	Mantine 7
サーバー状態	TanStack Query 5
HTTP	axios（withCredentials）
ルーティング	react-router-dom 6
フォーム	@mantine/form
アイコン	@tabler/icons-react
日付	dayjs

詰まったこと

実際にできたものを動作確認してみると、ログアウトを押しても最初のログイン画面に戻らない不具合が発生していました。
そのため、以下のプロンプトを投げました。

ログアウトを押下しても最初のログイン画面に戻りません。原因を調査して修正せよ。

結果、ログアウトを押下したらログイン画面に戻るようになりました。
こういった修正もプロンプトを投げれば原因を調査して修正まで行ってくれる且つ何を修正したかが分かるように返答してくれるのでとても便利です。

修正内容

バグ: /api/auth/logout が Cookie削除ヘッダ（Set-Cookie）を返しておらず、ブラウザにセッションCookieが残り続けていました。ログイン画面に遷移しても /api/auth/me が成功するため、すぐ元の画面に戻されていました。

・backend/app/api/auth.py — logout が「FastAPIが注入した Response をそのまま return していた」のをやめ、None を返すよう修正（返すと Set-Cookie が消える）。削除時のCookie属性（path / samesite / secure / httponly）もログイン時と一致させた
・frontend/src/auth/AuthProvider.tsx — qc.clear() → setQueryData(["me"], null) の順に変更し、ログアウト直後に /auth/me を再取得してリダイレクトと競合するのを防止。apiLogout が失敗してもローカル状態は必ずクリア
・frontend/src/components/AppLayout.tsx — logout が例外でも必ず /login へ遷移
・test_auth.py の test_logout_clears_session を、Cookieを手動クリアせずサーバが削除指示を返すか検証する形に（回帰防止）

実際にできたものを触ってみる

このシステムはエンジニア、営業、管理の三つのロールがあります。それぞれの違いについては、「それぞれのロールでできること」を参照してください。
今回はエンジニアとしてログインしていき、簡単に機能を紹介します。(全部細かく紹介すると量が多いので..)

• ログイン画面
  認証には、メールアドレスとパスワードが必要。
  
  メールアドレスやパスワードを間違えるとちゃんとエラーになる。
  

• ダッシュボード
  ログインすると最初にダッシュボードが表示されます。
  
  現在、提案された案件の一覧と進捗状況が確認できる。
  確認したい案件を押下、またはサイドバーの紹介された案件を押下すると次の画面が表示されます。
  
  ステータス変更履歴や、変更の際のコメント、時間がすべて記録され表示されます。
  上のステータスのところを押下すると、対象の案件のみ表示されます。
  

• マイプロフィール
  マイプロフィールは、スキル、経歴、自分の個人情報、確認履歴などが表示されます。
  
  
  ・プロフィール
  右上にある編集を押下すると、プロフィールを編集することできます。
  
  
  ・スキル
  右上の追加を押せば新規追加が可能です。
  
  編集する際は右側にある鉛筆マークを押下すれば編集ができ、ごみ箱マークを押下すれば削除ができます。
  
  ・職歴
  スキルと同様に追加、修正、削除が可能です。
  
  
  ・確認履歴
  営業とエンジニアのやり取りが表示されます。
  営業からはもちろん、右上の質問を追加を押下すればエンジニアからも質問ができます。
  
  
  ・ログアウト
  右上の下矢印を押してログアウトを押すとログアウトが実行され最初のログイン画面に遷移します。
  
  

それぞれのロールでできること

エンジニア

• 自分に紹介された案件の一覧を確認できる（「マイ紹介案件」ページ）。ステータス別に確認でき、ステータス変更の履歴（タイムライン）も展開して見られる
• ダッシュボードで自分の進行中の案件を確認できる。カードから案件詳細（履歴タイムライン）へ遷移できる
• 自分のプロフィール（居住地・最寄駅・生年月日・電話・希望単価・稼働可能日・稼働形態・自己PRなど）、スキル、職歴を自分で編集できる（「マイプロフィール」ページ）
• 自分宛ての確認事項（Q&A）を閲覧・回答できる。他のエンジニア宛ての確認事項は見られない
• 案件の登録・編集、紹介の追加、ステータス変更はできない（営業・管理のみ）
• 他のエンジニアの情報は閲覧・編集できない

営業

• 案件の新規登録・編集ができる（案件名・取引先・エンド・業務内容・必須スキル・単価・勤務地・リモート可否・開始時期・募集人数・提案元チャットへのリンクなど）
• 案件一覧の検索・絞り込み（キーワード、募集中フィルタなど）、紹介状況の内訳確認ができる
• 案件に対してエンジニアを紹介（複数可）し、紹介ごとのステータスを変更できる（変更のたびにコメント付きで履歴が自動記録される）
• ステータス変更は5段階：提案中 → 返答待ち → 面談 → 成約 ／ 見送り
• 全エンジニアを横断検索できる（スキル・経験年数・キーワードなどで「〇〇の経験がある人」を検索）
• エンジニアの詳細情報（プロフィール・個人情報・スキル・職歴）を追加・編集できる
• エンジニアへの確認事項（Q&A）を登録・回答・編集・削除でき、全エンジニア横断で確認履歴を検索できる（同じ質問の重複を防止）
• ダッシュボードで「返答待ち」「3日以上放置」「今週の成約」「募集中」の案件を確認できる
• エンジニアアカウントの新規追加・削除はできない（管理のみ）

管理（管理者）

• 営業ができることをすべて行える（案件管理、紹介・ステータス管理、エンジニア情報編集、確認事項管理、ダッシュボード閲覧など）
• 上記に加えて、エンジニアアカウントの新規追加・削除ができる（ユーザー管理）

まとめ

今回案件管理システムを作りましたが、typescripitに関しては、自分は経験が全くない状態でしたが、プロンプトを投げるだけでクオリティの高いものができたので、claudeのすごさを実感しました。
これはエンジニアにとってかなり心強いと感じた反面、エンジニアいらないじゃんという危機感も感じました。
これからの時代、AI駆動開発が主流になっていくと思いますので、今からAIと触れ合って使いこなせるようにしておくことが重要だと思います。
もしまだ触ったことないという方がいれば、なんでもいいので何かシステムやゲームなど開発してみてください。
一緒にAIを活用できるようにしていきましょう。