割り勘計算機
概要
このプロジェクトでは、割り勘アプリを構築します。
メンバーを登録し、支払い記録を入力することで、最適な精算方法を画面に表示します。
学習目標
Zustand を使用したグローバルな状態管理について、学習します。
複数のコンポーネント間で状態を共有する設計や、useContext との違いについて、確認してください。
推奨技術
このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。
- Zustand を用いたグローバルな状態管理
- Vite を用いた React 環境構築
- TypeScript による型チェック
- Tailwind CSS を用いたスタイリング
- GitHub Pages へのデプロイ
- 複雑なロジックを分離させるカスタムフック
🎯 お題
- 「ユーザーストーリー」を全て満たすアプリを構築してください。
- 必要に応じて、スクリーンショットやデモサイトの URL を参照してください。
- スタイルは、あなた自身で独自にカスタマイズすることが可能です。
必須機能
- メンバー登録：
- 割り勘を行うメンバーを追加し、表示する。
- 支払い記録：
- 立て替えた人、金額、内容を記録・削除する。
- 精算結果の算出：
- 最適な精算方法を表示する（例：誰が誰にいくら払うべきか）
ユーザーストーリー
- ユーザーがサイトにアクセスすると、メンバーの名前を入力できるフォームがが表示されている。
- 追加したメンバーの名前が、全員表示される
- ユーザーが支払い記録を追加する際は、支払った人をドロップダウンリストから選択できる
- 支払い内容（テキスト）と金額（数値）を入力できる
- 必要な情報を入力し、「記録する」ボタンをクリックすると、支払いの記録が一覧で表示される
- 支払い記録を削除できる
- 最適な精算方法として「誰が誰にいくら払えば良いか」が一覧で表示される
- アプリケーションがデプロイされており、誰でもアクセス可能である。