ThinkFlow

授業プロジェクト · AI活用フロントエンド開発（2025年秋学期）

担当 · フルスタック開発、プロダクト構成設計、ワークフロー設計

使用技術 · React, TypeScript, Express, Prisma, PostgreSQL, Docker, Gemini

関連リンク · GitHub · 企画Wiki

ThinkFlow は、メモ、タスク、振り返り記録を一つの連続した仕組みとして扱うフルスタックの生産性アプリです。思いつき、実行、振り返りを別々の道具として切り離すのではなく、アイデアから行動、そして振り返りまでの流れを保つことを重視しました。

私はプロダクト構造と実装の両方を担当し、孤立したCRUD画面を並べるのではなく、共通の項目構造と遷移フローを中心に設計しました。その結果、メモや投稿をタスクへ昇格させ、完了したタスクを振り返り記録へつなげる、一貫した文書型ワークフローを実現しました。

• メモ、投稿、タスクを統合的に扱うフルスタックのウェブアプリを構築しました。
• 基本的なCRUD、検索、並び替え、ページネーション、タグによる絞り込みを実装しました。
• 文脈を保ったまま型を移行できるよう、メモ・投稿からタスクへの昇格フローを設計・実装しました。
• タスクから振り返り記録へつなぐ流れと、モーダルを用いた下書き生成の導線を実装しました。
• 実装前に frontend・backend・shared の分割構成と user story、feature spec を整理し、プロダクト全体を定義しました。

難しかったのは、メモ、タスク、投稿を別々に作ることではなく、それらを一つの一貫した流れとしてつなぐことでした。素早い記録、タスク管理、タグ付け、振り返り記述を同じプロダクトの中で支える必要があったため、どこまでを共通化し、どこからを型固有の情報として分けるかの判断が重要でした。

私は共通の項目モデルの上にタスク固有の情報を重ねる形で構造化しつつ、メモ・投稿からタスクへ、タスクから振り返りへと移る際のUIフローを揃えました。これにより、各機能を別アプリのように分断せず、自然につながりながら拡張しやすい構成にできました。

メモ・投稿画面とタスク管理画面です。別々の小さなアプリとして分けるのではなく、一つのワークフローとして自然につながるよう設計しました。