🫁

[個人開発]firebase × Reactで割り勘アプリを作ってみた

2024/08/08に公開

Firebase

React

個人開発

tech

 初めにこんにちは！24卒で某大手ECサイトの保守・運用会社に入社した新米エンジニアです。最近はbrSEとして中規模ECサイトの案件を中国側とやり取りする業務をしています。

そんな空いた時間や帰宅後の時間を使って、ちょっとしたサービスを作ってみました。

 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を使えば、もう二度と「割り勘の計算ミスで友情が壊れる」なんてことはありません！（たぶん）

ぜひ使ってみてください。そして、「ここ改善した方がいいよ」とか「こんな機能欲しい！」というアイデアがあれば、ぜひコメントで教えてください。

みなさんの「割り勘ストレス」が少しでも減りますように

初めに

QuickSplitって何よ？

なぜ作ったの？

技術スタック

QR招待

データフロー

これから直したいところ

最後に

Discussion