プロジェクト 003
Simple Stack
課題の一覧・追加・編集・削除を通して、Next.js App Routerとフロントエンドの状態管理を学ぶために制作したタスク管理ボード。公開サービスではなく、ローカルのMock APIと組み合わせて動作を確認する学習用プロジェクト。
01 / Problem
CRUD、状態管理、レスポンシブUI、API連携を個別に学ぶだけでは、実際のアプリでそれぞれがどうつながるのか把握しづらかった。
02 / Idea
チームの課題管理を題材に、フロントエンドからローカルAPIまで一連のデータフローを実装する学習プロジェクト。
03 / Solution
タスクの一覧・追加・編集・削除、状態フィルター、CSV入出力を実装。デスクトップではテーブル、モバイルではカードに切り替え、ExpressのMock APIをローカルで起動してCRUDの流れを確認できる構成にした。