Day 18。何かコラボレーティブなものを作りたかった。リンクをシェアした瞬間に、他の人がインタラクションしてるのが見えるようなもの。リアルタイム投票アプリがぴったりだと思った。
プロンプト#
「リアルタイムで投票を作成・投票できるアプリを作って。ユーザーが複数の選択肢でポールを作成し、リンクで共有して、アニメーション付きの棒グラフで結果がライブ更新されるようにして。」
どうやって作ったか#
Watchfireがこれを31個のタスクに分解してくれた。投票アプリにしては多いけど、投票体験を完成させるための細かいことを考え始めると、機能リストはあっという間に膨らむ。
まずコアから：Firebaseリアルタイムデータベース連携、ポール作成フロー、投票の仕組み、そしてアニメーション付きの結果表示。その上にすべてを積み重ねた。素早くポールを作るためのカテゴリとテンプレート。アクセシビリティの改善。空のコンテンツがフラッシュしないようにローディングスケルトン。ちゃんとした404ページ。そしてもちろん、最後にいつものデプロイ修正ラウンド。
Firebase連携がすべての背骨だった。Firestoreがデータの永続化を担当し、リアルタイムリスナーが接続中のすべてのクライアントに投票の更新をプッシュし、匿名認証のおかげで投票するためだけにアカウントを作る必要がない。
何ができたか#
作成フローは1日ビルドにしては驚くほど充実している。
タイトル、説明、カテゴリタグ、複数の選択肢、さらにカラーテーマピッカーまである。カバー画像のサポート、スケジュール投票、パスワード保護、有効期限の設定も。下の方には「Yes or No」「1-5で評価」「チーム投票」といったよくある投票タイプのテンプレートがあって、セットアップを完全にスキップできる。
結果ページが楽しいところ。投票した後、バーがアニメーションで表示され、勝っている選択肢がハイライトされ、紙吹雪が画面中に弾ける。
各ポールページには絵文字リアクション、コメントセクション、QRコード生成付きのシェアリンク、CSVデータと画像の両方のエクスポートオプションもある。かなりの機能面積だ。
「マイポール」ダッシュボードでは、作成したすべてのポールを検索とカテゴリフィルターで管理できる。各ポールにはステータス、選択肢数、投票数が表示され、素早く再利用するための複製ボタンもある。
バグレポート#
デプロイラウンドが一番の苦労ポイントだった。Firebaseの設定を本番環境用に調整する必要があり、いつものVercel固有の問題もあった。外部サービスに依存するプロジェクトとしては珍しくない。ユーザーごとに1票の制限にはFirestoreのトランザクションが正しく動作する必要があり、それを正しく実装するのに何度かイテレーションが必要だった。
試してみて#
ポールを作ってリンクをシェアしよう。アカウント不要。
Day 18の評価#
ここの機能リストは濃い。Firebaseを使ったリアルタイム投票アプリに、アニメーション結果、QR共有、絵文字リアクション、コメント、CSVエクスポート、画像エクスポート、テンプレート、カテゴリ、パスワード保護、ダッシュボード。これはプロダクションレベルの機能リストを1日に詰め込んだものだ。
リアルタイムの部分がこのアプリに命を吹き込んでいる。リンクをシェアして、誰かが投票すると、自分の画面でバーが動く。リフレッシュ不要。FirebaseのリアルタイムリスナーとFramer Motionのアニメーションが組み合わさって、静的な結果では決して実現できないレスポンシブで洗練された体験になっている。
Watchfireのタスク31個、その深さが表れている。
これは30 Days of Vibe CodingのDay 18です。AIを活用したコーディングで30日間に30個のプロジェクトを出荷する様子をフォローしてください。
