https://github.com/b13o/warikan-calculator

💰 A calculator for splitting the bill.
https://github.com/b13o/warikan-calculator

custom-hooks react typescript zustand

Last synced: 28 days ago
JSON representation

💰 A calculator for splitting the bill.

• Host: GitHub
• URL: https://github.com/b13o/warikan-calculator
• Owner: b13o
• Created: 2024-11-17T09:22:37.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-12-13T16:51:46.000Z (30 days ago)
• Last Synced: 2024-12-13T17:48:48.877Z (30 days ago)
• Topics: custom-hooks, react, typescript, zustand
• Language: TypeScript
• Homepage: https://b13o.github.io/warikan-calculator/
• Size: 46.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# 割り勘計算機

## 概要

このプロジェクトでは、割り勘アプリを構築します。  

メンバーを登録し、支払い記録を入力することで、最適な精算方法を画面に表示します。

## 学習目標

Zustand を使用したグローバルな状態管理について、学習します。

複数のコンポーネント間で状態を共有する設計や、useContext との違いについて、確認してください。

### 推奨技術

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

- Zustand を用いたグローバルな状態管理

- Vite を用いた React 環境構築

- TypeScript による型チェック

- Tailwind CSS を用いたスタイリング

- GitHub Pages へのデプロイ

- 複雑なロジックを分離させるカスタムフック

---

## 🎯 お題

- 「ユーザーストーリー」を全て満たすアプリを構築してください。

- 必要に応じて、スクリーンショットやデモサイトの URL を参照してください。

- スタイルは、あなた自身で独自にカスタマイズすることが可能です。

### 必須機能

1. **メンバー登録**：

   - 割り勘を行うメンバーを追加し、表示する。

2. **支払い記録**：

   - 立て替えた人、金額、内容を記録・削除する。

3. **精算結果の算出**：

   - 最適な精算方法を表示する（例：誰が誰にいくら払うべきか）

## ユーザーストーリー

- [ ] ユーザーがサイトにアクセスすると、メンバーの名前を入力できるフォームがが表示されている。

- [ ] 追加したメンバーの名前が、全員表示される

- [ ] ユーザーが支払い記録を追加する際は、支払った人をドロップダウンリストから選択できる

- [ ] 支払い内容（テキスト）と金額（数値）を入力できる

- [ ] 必要な情報を入力し、「**_記録する_**」ボタンをクリックすると、支払いの記録が一覧で表示される

- [ ] 支払い記録を削除できる

- [ ] 最適な精算方法として「誰が誰にいくら払えば良いか」が一覧で表示される

- [ ] アプリケーションがデプロイされており、誰でもアクセス可能である。