checkout!

https://github.com/Nih896/hackathon

GitHub

React

Firestore

VSCode

簡単に精算ができるWebアプリ

okla

Rm

v1sao6rnc9s

推しアイデア

URLを共有するだけで簡単に精算内容を共有、編集!割り勘だけでなく、自由に負担額を設定!

作った背景

お金の貸し借りが多いと精算の計算が大変!共有もしやすいWebアプリを作ろう!触ったことのないWeb制作に挑戦!

推し技術

figmaでデザインの共有 emoji-picker-react

プロジェクト詳細

アプリ概要

簡単精算Webサイト 誰がいくら負担していて、誰にいくら払えばいいかを一目で確認! URLを共有することで、内容を共有したり誰でも精算内容の追加・編集が可能です。

主な機能

1. イベントの作成

イベント名や参加メンバーなどを入力し、イベントを作成します。

image

2. まとめと詳細の確認

メンバーそれぞれの清算や貸し借りの金額、イベントの総支出を確認することができます。 この画面では誰にいくら渡せばいいのか一目で確認することができます。

image

image

3. 出費を追加

「支出」、「収入」、「支払い」の3パターンで追加します。 負担額の割り振り方は、「割り勘」、「割合指定」、「それぞれの金額を指定」から選択して入力できます。 支払いや収入、参加者内での金銭の受け渡しも記録できます。

割り振りの金額を入力すると、入力していないメンバーは自動で均等に割り振られます。

image

使用技術

  • React
  • Firebase
  • GitHub

AI活用ポイント

firebaseのAIで作成したプロトタイプを参考にして、デザインを決めました。 メンバーの作業割り振りやコードを書くのにchatGPTなどを使用しました。

今後の展望

  • 同じ端末で開いたとき、前回自分が作成したイベントの一覧が見れるようにする
  • UIを綺麗に揃える
  • 挙動を安定させる

okla

@ec1f7c52d08fa132