NeighborHub：实时社区连接，面向本地邻里

Source: Dev.to

DEV Weekend Challenge: Community

这是对DEV Weekend Challenge: Community的提交。

社区

NeighborHub 为 本地社区——居民、街区协会和希望拥有集中数字空间保持联系的邻里团体而构建。无论您是组织街区派对、发布安全公告、请求购物帮助，还是发起关于本地公园的讨论，NeighborHub 都能以有意义的方式将邻居们聚集在一起。该平台通过提供专为此目的构建、基于分类的社区动态，消除群聊和社交媒体的碎片化。

我构建的

NeighborHub 是一个实时社区连接平台，邻居们可以：

• 📢 发布公告 – 分享重要的社区更新
• 🎉 组织活动 – 创建包含日期、时间和地点的活动
• 🤝 请求帮助 – 向邻居寻求协助
• 💬 发起讨论 – 开启社区对话
• ❤️ 点赞与评论 – 通过 Supabase Realtime（WebSocket 订阅）实时互动
• 👤 查看个人资料 – 点击任意头像/用户名访问公开资料并查看该用户的帖子

关键亮点

• 乐观 UI – 操作即时感受；点赞切换和评论立即显示，随后与服务器同步。
• 分类过滤 – 可按活动、公告、求助请求或讨论过滤信息流。
• 骨架屏加载器 – 每个路由都有闪烁加载状态，提升感知性能。
• 全局导航进度条 – 页面切换时顶部出现动画渐变条。
• 完全响应式 – 在移动端、平板和桌面端均有出色表现。

演示

🔗 实时演示：

Code

此项目使用 Next.js 构建，并通过 create-next-app 引导启动。

入门

首先，运行开发服务器：

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

在浏览器中打开即可看到结果。

您可以通过修改 app/page.tsx 开始编辑页面。文件编辑时页面会自动更新。

该项目使用 next/font 自动优化并加载 Geist，这是 Vercel 的全新字体系列。

了解更多

探索以下资源，深入学习 Next.js：

• Next.js 文档 – 详细指南，涵盖 Next.js 的功能和 API。
• 学习 Next.js – 交互式教程，动手学习。
• Next.js GitHub 仓库 – 查看源代码，提交反馈，并参与贡献。

在 Vercel 上部署

部署你的 Next.js 应用最简单的方式是使用 Vercel Platform —— Next.js 的创建者。

欲了解更多细节，请参阅官方 Next.js deployment documentation。

我是如何构建它的

技术栈

架构决策

• 默认使用服务器组件 – 页面在服务器上获取数据，消除了客户端的瀑布请求。仅交互部分（按钮、评论表单、实时订阅）标记为客户端组件。
• 所有变更使用服务器动作 – 不需要单独的 API 路由。认证、帖子、评论、点赞和个人资料更新的表单提交均使用 Next.js 服务器动作，并配合 revalidatePath 实现缓存失效。
• 行级安全（RLS） – 每个表都有细粒度的策略；用户只能修改自己的数据，而公共读取权限保持社区透明。
• 数据库触发器 – likes_count 和 comments_count 通过 PostgreSQL 触发器自动保持最新，避免 N+1 查询。
• Supabase Realtime 订阅 – LikeButton 和 CommentSection 监听 postgres_changes 事件。localActionRef 防止当前用户的操作被双重计数，同时仍能接收其他用户的更新。
• 中间件 – 在每次请求时刷新 Supabase 身份验证会话，并保护 /profile、/posts/new 等路由不被未认证用户访问。
• 基于迁移的模式 – 八个有序的 SQL 迁移定义表、RLS 策略、触发器、索引、实时配置和种子数据。使用 supabase db push 可完整复现整个模式。