【割り勘アプリ】QuickSplit - メモ帳よさようなら、みんなでワイワイ割り勘管理！[個人開発]

初めに

こんにちは！24卒で某大手ECサイトの保守・運用会社に入社した新米エンジニアです。最近はbrSEとして中規模ECサイトの案件を中国側とやり取りする業務をしています。
そんな空いた時間や帰宅後の時間を使って、ちょっとしたサービスを作ってみました。その名も「QuickSplit」！

QuickSplitって何よ？

「QuickSplit」は、グループでの割り勘を簡単に管理できるWebアプリです。
URL: https://quickaplit.web.app/
友達との旅行や飲み会で、「あれ？誰が何を払ったっけ？」「いくら返せばいいの？」なんて悩んだことありませんか？私はよくあります（笑）
そんな時、メモ帳でガリガリ計算して、LINEで「おい、1500円な」なんて送るのも面倒くさい...。そこでQuickSplitの出番です！

なぜ作ったの？

正直、メモ帳で割り勘管理して友達に連絡するのが面倒くさかったんです（笑）。「いっそのこと、みんなで見られるようにしちゃえば良いんじゃね？」というノリで始めました。

技術スタック

フロントエンド: React
バックエンド: Firebase (Authentication, Firestore, Hosting)
UI: Material-UI
状態管理: React Hooks
その他: QRコード生成
(qrcode.react)--

＊モザイクの入れ方がわかりませんでしたTT

QR招待

生成されたQRにURLを埋め込むことで実現できました

<Dialog open={qrDialogOpen} onClose={() => setQrDialogOpen(false)}>
  <DialogTitle>グループ招待QRコード</DialogTitle>
  <DialogContent>
    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <QRCode value={`https://quickaplit.web.app/join/${groupId}`} size={256} />
      <Typography variant="body2" sx={{ mt: 2 }}>
        このQRコードをスキャンしてグループに参加できます。
      </Typography>
    </Box>
  </DialogContent>
</Dialog>

データフロー

ユーザーがグループを作成 → Firestoreに保存
グループメンバーを招待 → Firestoreに招待情報保存
支出を入力 → Firestoreに支出情報保存
リアルタイムリスナーで支出情報を取得 → 画面に表示
割り勘計算 → クライアント側で計算し、結果を表示

Firestoreのリアルタイムリスナーを使用しているので、誰かが支出を入力したら、他のメンバーの画面にもリアルタイムで反映されます。まるで魔法のように！（実際はただのWebSocket通信ですが...）

これから直したいところ

正直、まだまだ改善の余地がたくさんあります。例えば：

一部動作していない機能の修正（すみません、見つけたらこっそり教えてください...）
UIの改善（もっとオシャレに！）
精算機能の追加（◯◯さんは△△さんに□□円払ってね、みたいな）
プッシュ通知機能（「おい、まだ払ってねーぞ」機能）

最後に

QuickSplitを使えば、もう二度と「割り勘の計算ミスで友情が壊れる」なんてことはありません！（たぶん）
ぜひ使ってみてください。そして、「ここ改善した方がいいよ」とか「こんな機能欲しい！」というアイデアがあれば、ぜひコメントで教えてください。
みなさんの「割り勘ストレス」が少しでも減りますように