Waity-カトレア

プロジェクト概要

飲食店などの待ち時間を楽しい体験に変えることを目的としたWebアプリです。

ユーザーは店内のQRコードを読み込み、簡単なゲームで他の来店客と対戦します。ゲームの勝者は店内BGMの候補曲を追加でき、敗者は既存の候補曲の中から投票します。

投票結果はランキングとして表示され、そのランキングをもとに店舗はBGMを流すことができます。

フローチャート

draw.ioで書いています。

工夫ポイント

待ち時間のエンタメ化

飲食店の待ち時間はユーザー体験のネックになりがちです。
このアプリではゲームを通して待ち時間を楽しい時間に変えることを目指しました。

お客さん参加型のBGM

店内BGMはお店の雰囲気を作る重要な要素です。
このアプリでは以下の仕組みによって、お客さんがBGM選びに参加できます。

• ゲーム
• 投票
• 曲追加

これにより、お客さんと一緒にお店の雰囲気を作っていくことができます。

ランキングUIの工夫

曲数が多くなった場合でも使いやすいように、以下のようなUI設計にしています。

• ランキング一覧のみスクロール可能
• 下部の操作ボタン（シェア等）は固定

SNSシェア機能

ランキング結果を X（旧Twitter）でシェアできる機能を実装しました。

これにより

• おしゃれなカフェ体験などを投稿し、ユーザーの承認欲求を満たす
• 店舗の宣伝

といった効果が期待できます。

技術スタック

フロントエンド

• React
• Vite
• TypeScript
• react-router-dom
• Tailwind CSS
• Canvas API

状態管理

• React Hooks
• React Context

Firebase（バックエンドレス構成）

Firebaseを中心に構成することでバックエンド不要の構成を実現しました。

Authentication
Firebase Anonymous Authentication

データ管理
Cloud Firestore

管理データ

• ゲーム状態
• 投票
• ランキング
• スコア

在室管理
Realtime Database（presence）

サーバー処理
Cloud Functions

• ゲーム開始
• 結果集計
• 不正防止

ホスティング
Firebase Hosting

外部API

iTunes API Spotify APIの新規アプリ作成制限により、代替としてiTunes APIを使用しました。

実装機能

• 楽曲検索
• ジャケット画像表示
• 試聴

ゲームの説明

Hit & Blow

数字を推理して当てるロジックゲームです。
相手より早く正解したプレイヤーが勝利します。

エイ積むゲーム

上から落ちてくるオブジェクトを積み上げるバランスゲームです。
倒してしまったプレイヤーが負けとなります。

神経衰弱

カードをめくって同じペアを探す記憶ゲームです。
より多くのペアを揃えたプレイヤーが勝利します。

連打ゲーム

制限時間内にどれだけ画面をタップできるかを競うゲームです。 タップ回数が多いプレイヤーが勝利します。

おすすめメニュー診断

質問に答えておすすめメニューを診断できます。

チーム開発の進め方

今回のハッカソンでは4人チームで開発を行いました。野良チームで、メンバー全員でミーティングの時間を取ることなどが難しかったので、非同期でも開発が進められる体制を作りました。

Google Driveで議事録共有

ミーティング内容をGoogle Driveで共有し、以下を全員が確認できるようにしました。

• 進捗状況
• 決定事項
• 今後のタスク

役割分担の明確化

各メンバーの担当機能を明確にすることで

• 作業の重複防止
• 開発スピードの維持
• 各々のタスクの明確化 を実現しました。