ドトール1000円ガチャをつくってみた（React+Chakra UI＋Firebase+GitHub Actions）
こんなWebアプリをつくりました。
ガチャを回すと、1000円以内のドトールメニューの組み合わせを出してくれます。
ミラノサンドやデザートはドリンクとセットでお安くなります。
ソースコードはGitHubで公開しています。
経緯
作りたいWebアプリがあったのですが、開発が難航しており心が折れかけていました。
とりあえず簡単なものでも作って成功体験を得るために、以前話題になったサイゼリヤ1000円ガチャの類似サービスでもいっちょ作ってみるか！と思い立ちました。
松屋1000円ガチャやマクドナルドガチャなど、類似サービスは既にいくつかあるのですが、ドトール好きなので何となくドトールにしました。
技術要素
React
フロントエンドはReactにしました。言語はTypeScriptです。
Next.jsにするか迷いましたが、まあシンプルなアプリなのでReactのみにしました。
Chakra UI
UIフレームワークにはChakra UIを使っています。
さくっと良い感じの見た目にしてくれるので助かりました。
Firebase
Firebaseでサーバーレスにしています。
Firebase Hostingでホスティングして、Cloud Firestoreにデータを置いています。
GitHub Actions
GitHub Actionsでデプロイを自動化しています。
Firebaseで構築すると、GitHub Actionsとの連携もほぼ自動でしてくれます。便利。
メニューについて
スクレイピング
そんなに数もないですが、公式メニューを手打ちするのが面倒だったので、Pythonでスクレイピングしてデータを取得しました。
データ一括登録
Cloud Firestoreはデータ一括登録する機能が無いので、以下の記事を参考にして一括で登録しました。
Firebase Admin SDKを使ってドキュメントを登録しています。
おわりに
Firebaseを使ってサーバーレスにすることで、非常にお手軽にアプリを公開できました。
冒頭にも書きましたが、ソースコードはGitHubで公開しています。
プルリクエストorスターくれたら泣いて喜びます。😭
Discussion