JH Link：一个连接并吸引本地青少年中心的 PWA

Source: Dev.to

这是对 DEV 周末挑战：社区 的一次提交

社区

该项目面向我所在的本地青少年中心。虽然它的主要目标是为 10‑19 岁的青少年提供一个充满活力的中心，但中心保持开放和友好的氛围，欢迎整个社区的成员。各年龄段的人都可以随时来聊聊天、在咖啡厅买杯饮料，甚至参加活动。然而，沟通和参与往往是碎片化的，依赖口耳相传和零散的社交媒体帖子。成员很难跟踪活动、查看谁会参加，或者在不在中心现场时仍然保持归属感。管理员也需要花费大量时间处理签到和参与记录等手动任务。

我构建的内容

为了解决这些问题，我打造了 JH Link，一款面向青少年中心的渐进式网络应用（PWA）。

它是一款移动优先的应用，提供：

• 活动动态： 实时列出即将举行的活动，成员只需轻点一下即可报名。
• 成员档案： 为成员提供展示自我的空间，并查看自己的参与历史。
• 数字会员卡： 基于二维码的虚拟卡片，实现快捷签到，取代实体卡。
• 游戏化机制： 积分与等级系统，奖励参与活动的成员，促进友好竞争和持续参与。
• 管理员面板： 为工作人员提供完整的后台，管理活动、签到成员以及积分系统。

目标是让参与更轻松、更有回报，并在成员不在现场时仍能加强社区凝聚力。

演示

你可以在此体验应用的在线演示：

以下是应用的视频演示：

代码

完整源码已在 GitHub 上公开：

开发过程

我在周末完成了 JH Link 的开发，采用了现代全栈 TypeScript 方案。

• 框架： Next.js（使用 App Router）
• 后端与数据库： Supabase 用于身份验证，配合具备行级安全（Row Level Security）的 PostgreSQL 数据库以及存储。
• 部署： Vercel
• 样式： Tailwind CSS
• UI/UX： 完全的渐进式网络应用（PWA），可在移动设备上安装，提供原生般的体验。包括页面切换动画和导航进度条。
• 工具链： 使用 bun 作为包管理器；在 VS Code Dev Container 中进行开发。

开发过程的重要环节是与 AI 助手协作。这种共同开发模式极为高效：AI 负责大量初始脚手架、模板代码以及复杂的服务器操作，我则专注于架构、用户体验和关键代码审查。我们一起实现功能、调试 SQL 策略、优化异步 JavaScript，使得在极短时间内就交付了功能丰富的应用。