Day 22。我参加过太多Q&A环节一团糟的活动了。大家互相喊叫,同样的问题被问两遍,最好的问题被最大声的人淹没。是时候做点更好的了。
提示词#
“构建一个实时问答板,主持人创建会话,观众实时提交和投票问题,主持人可以高亮、回答、删除问题或关闭会话。包含一个带二维码的分享弹窗。”
怎么做的#
这个项目经历了7个Watchfire任务,从数据库层逐步构建到最终打磨:
- Firebase Firestore搭建。 数据层。会话和问题集合,匿名认证让用户无需创建账号就能加入,安全规则保证一切都锁好。
- 会话创建。 主持人填写标题和描述,点击创建,得到一个独特的会话页面。简单的表单,没有花哨的东西。
- 问题提交。 观众访问会话页面并提交问题。280字符限制保持聚焦。问题实时显示给会话中的所有人。
- 实时投票。 每个用户每个问题一票,服务端强制执行。投票数在所有连接的客户端实时更新。按最多投票或最新排序。
- 主持人控制。 主持人在每个问题上有额外按钮:高亮、标记已回答、删除。高亮的问题被提升到屏幕右侧的专用面板。主持人还可以完全关闭会话。
- 带二维码的分享弹窗。 分享按钮打开一个弹窗,包含会话链接、复制按钮和用qrcode.react生成的二维码。把手机对准屏幕就能加入。
- UI打磨。 整理布局,优化双栏设计,确保高亮问题面板在桌面端和移动端都显示正常。
最终成果#

简洁的落地页。 创建一个会话或粘贴现有会话代码加入。匿名认证在后台进行,用户只需选择一个显示名称就可以开始了。

零注册摩擦。 首次访问会弹出显示名称提示。就这样。Firebase匿名认证处理其余的事情。不需要邮箱、密码或OAuth流程。对于现场活动工具来说,这正是需要的。当演讲者说"扫描二维码"的时候,你可不想让大家还在纠结创建账号。

创建会话只需两个字段。 标题和描述。点击按钮就开始主持实时问答。这里的简洁性很重要,因为主持人通常是在演讲开始前五分钟才设置的。

分享弹窗完成了它的使命。 带复制按钮的会话链接和二维码就在那里。这就是我设想的工作流:主持人创建会话,把这个弹窗投影到大屏幕上,观众扫码,问题开始涌入。

观众视图保持专注。 提交问题,查看其他问题,给你想要得到回答的问题投票。提交框在顶部,问题列表在下面,默认按投票数排序。所有内容通过Firestore监听器实时更新。

主持人拥有管理工具。 每个问题显示高亮、标记已回答和删除按钮。只有主持人能看到这些。头部还有一个关闭会话按钮,可以锁定整个会话。右栏显示高亮的问题,如果还没有高亮任何问题则显示占位消息。

高亮功能运作良好。 当主持人高亮一个问题时,它被提升到右侧面板,问题文本和提问者名称醒目显示。主列表中该问题也会有视觉标记,让所有人都知道它被点名了。在移动端,这个高亮区域位于页面顶部而不是侧栏。


投票创造了天然的过滤器。 最好的问题浮到顶部。主持人不用把所有问题都读一遍。观众替你做了筛选。
Bug报告#
这个项目出奇地干净。Firestore实时监听器处理了棘手的部分,所以问题和投票无需轮询或手动刷新逻辑就能即时显示。匿名认证流程也很顺畅。这个项目零bug报告。
试试看#
创建一个会话并分享链接。不需要账号。
Day 22总结#
第四个Firebase项目了。到这个阶段,模式已经自动写出来了:匿名认证、Firestore监听器、实时同步。我大概闭着眼睛都能做一个出来。技术栈已经不是重点了。
这个项目有意思的是管理层。大多数问答工具只是带投票数的问题列表。高亮功能改变了这一点。当主持人高亮一个问题时,它会广播到房间里的每个屏幕。观众看到正在讨论什么。主持人不用对着麦克风喊"下一个问题"就能控制节奏。这是一个产品洞察,而不是技术洞察。
我会在真正的演讲中使用它吗?会的。我参加过太多次会议,Q&A环节变成了谁先抢到麦克风,谁就花五分钟问一个实际上是评论的"问题"。这个工具解决了那个问题。观众投票,最好的问题浮上来,主持人选择要回答什么。房间里最大声的人不再是决定因素。
删除按钮悄悄地成了最重要的功能。跑题的问题、重复的问题、有人在搞笑。主持人移除它们,没人注意到。没有尴尬的"我们继续吧"时刻。它们就这么消失了。
这是30 Days of Vibe Coding的第22天。关注我用AI辅助编程在30天内交付30个项目的过程。







