ロードマップ投票アプリ

概要

このプロジェクトでは、プロダクトのロードマップ管理アプリを構築します。

追加して欲しい機能の提案・投票・ステータス管理ができる、一般的なプロダクトロードマップアプリです。

学習目標

React 19 の、Actions を使用したサーバー関数についてです。

特に、クライアントコンポーネントとサーバーサイドで実行される関数を組み合わせた、 状態の更新方法について、確認してください。

推奨技術

このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。

• Actions を用いた非同期処理
• Next.js App Router でのプロジェクト構築
• TypeScript による型チェック
• Tailwind CSS を用いたスタイリング
• shadcn/ui によるコンポーネントの導入
• My JSON Server を用いたモック API の活用

---

🎯 お題

• 「ユーザーストーリー」を全て満たす、アプリを構築してください。
• 必要に応じて、スクリーンショットやデモサイトの URL を、参照してください。
• なお、スタイルは、あなた自身で独自にカスタマイズすることが可能です。

必須機能

1. 機能提案の作成：
   • タイトルと説明文を入力して新機能を提案する。
2. 投票機能：
   • 各提案に対して賛成の投票ができる。
3. ステータス管理：
   • 提案のステータス（提案中、計画済み、進行中、完了）を更新できる。

追加情報

今回推奨する API は、「My JSON Server」です。

• この API は、ユーザー登録なしで、無料で使用できます
• GitHub 上に用意したdb.jsonのファイルから、ダミーの API を構築することができます
• ただし、変更は異なるリクエスト間で保持されないので注意してください
• このプロジェクト用に用意された API エンドポイントを使用できます: https://my-json-server.typicode.com/b13o/roadmap-voting/issues

ユーザーストーリー

• ユーザーがサイトにアクセスすると、既存の機能提案一覧が表示されている。
• ボタンをクリックすると、モーダル形式のフォームが表示される。
• 新しい機能を投稿する際は、フォームでタイトルと説明文を入力することができる。
• 提案を作成すると、作成日時と投票数が、共に一覧に追加される。
• 提案は作成された段階で、投票数が１になっている
• 各提案に対して「👍」ボタンをクリックすると、投票数が 1 つ増加する。
• 提案のステータスを「提案中、計画済み、進行中、完了」の中から選択できる。
• ステータスごとに色分けされて表示される。
• ステータスごとにフィルタリングして、絞り込みをすることができる