https://github.com/b13o/roadmap-voting
🗺️ Product roadmap management app.
https://github.com/b13o/roadmap-voting
nextjs server-actions shadcn-ui typescript useactionstate useoptimistic usetransition
Last synced: about 1 year ago
JSON representation
🗺️ Product roadmap management app.
- Host: GitHub
- URL: https://github.com/b13o/roadmap-voting
- Owner: b13o
- Created: 2025-01-21T12:16:01.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-27T19:36:00.000Z (over 1 year ago)
- Last Synced: 2025-01-27T20:32:47.891Z (over 1 year ago)
- Topics: nextjs, server-actions, shadcn-ui, typescript, useactionstate, useoptimistic, usetransition
- Homepage:
- Size: 6.84 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ロードマップ投票アプリ
## 概要
このプロジェクトでは、プロダクトのロードマップ管理アプリを構築します。
追加して欲しい機能の提案・投票・ステータス管理ができる、一般的なプロダクトロードマップアプリです。
## 学習目標
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**](https://my-json-server.typicode.com/)」です。
- この API は、ユーザー登録なしで、無料で使用できます
- GitHub 上に用意した`db.json`のファイルから、ダミーの API を構築することができます
- **ただし、変更は異なるリクエスト間で保持されないので注意してください**
- このプロジェクト用に用意された API エンドポイントを使用できます: `https://my-json-server.typicode.com/b13o/roadmap-voting/issues`
## ユーザーストーリー
- [ ] ユーザーがサイトにアクセスすると、既存の機能提案一覧が表示されている。
- [ ] ボタンをクリックすると、モーダル形式のフォームが表示される。
- [ ] 新しい機能を投稿する際は、フォームでタイトルと説明文を入力することができる。
- [ ] 提案を作成すると、作成日時と投票数が、共に一覧に追加される。
- [ ] 提案は作成された段階で、投票数が１になっている
- [ ] 各提案に対して「**👍**」ボタンをクリックすると、投票数が 1 つ増加する。
- [ ] 提案のステータスを「**提案中、計画済み、進行中、完了**」の中から選択できる。
- [ ] ステータスごとに色分けされて表示される。
- [ ] ステータスごとにフィルタリングして、絞り込みをすることができる