生日应援网站产品系统Vibe Coding

本项目立项于粉丝后援会的主题应援场景。艺人生日、出道纪念、新歌发布这类节点，粉丝组织的宣传物料通常散落在微博超话、微信群和朋友圈里，图文刷过即沉底，参与记录无法留存，站外来的路人也没有一个统一入口了解艺人。项目要解决的就是这个问题：把一次性的应援活动，收敛成一个可长期访问、可持续沉淀内容的线上载体。

行业上属于文化娱乐中的粉丝社区运营方向。业务背景是国内艺人粉丝自组织的常态化应援需求——既需要内容展示端承接站外流量，也需要 UGC 收集端让粉丝真正参与进来，同时受非官方、非盈利定位约束，必须完成 ICP 与公安备案、明示素材版权归属。同类场景可复用于品牌粉丝运营、演出活动专题页、线上纪念展览等方向。

项目以“线上展厅”的形式组织，划分为七个主模块：

一、首页主视觉与生日倒计时，多图轮播承载艺人主视觉，实时倒计时到活动当天；
二、成长档案，按年份归档艺人的出生、节目、作品与舞台节点，时间轴形式展开；
三、歌声舞台，作品与舞台影音的分类归档与播放入口；
四、应援昵称环，聚合粉丝昵称形成环形可视化的集体署名；
五、信件档案，核心 UGC 模块，粉丝在线提交生日祝福信件，提交后进入待审队列，审核通过即时上墙，并实时统计信件总数；
六、0911 拼图与生日派对小游戏，两个轻互动玩法，提升停留时长与二次传播；
七、项目片尾与展厅目录，致谢共创成员，并提供全站导航索引。

后台侧提供信件内容审核、敏感词过滤与归档管理，保证公开展示内容可控。全站支持 PC 与移动端双端适配。

我负责项目全流程，包括需求策划、UI 设计、前端开发、后端接口、数据库设计、服务器部署与后续运维，是该项目的独立开发者。

技术实现上，前端使用 React + TypeScript，基于 Next.js 的 App Router 组织七个展厅页面的文件路由，页面走服务端渲染以保证首屏速度与搜索引擎收录，全站类型约束覆盖数据结构与组件 props，降低多页面复用时的出错成本。样式层用 CSS 实现完整的视觉体系，包括主视觉轮播、时间轴、环形昵称墙等自定义布局，并通过响应式断点完成 PC 与移动端双端适配。生日倒计时、拼图与小游戏等交互由 JavaScript 实现客户端状态驱动。SEO 侧统一生成各页 title、canonical 与 OG 卡片信息，接入百度站长验证；素材统一转 webp 静态托管，控制首屏体积。

后端基于 Next.js 的服务端路由提供接口，数据层使用 MySQL，围绕信件、成长档案、作品归档、粉丝昵称等内容建表，信件表以状态字段驱动待审、通过、驳回的流转，配合索引支撑列表分页与实时计数查询。

部署在华为云服务器，通过宝塔面板管理站点与 MySQL 实例，Node 服务由 PM2 守护进程常驻运行并配置开机自启，nginx 做反向代理与 HTTPS 证书配置，代码托管在 Gitee，本地推送后服务端拉取更新。

主要难点在于视觉表现与首屏性能的平衡，以及 UGC 内容的审核链路——公开展示的祝福必须先审后发，同时不能让提交者感到延迟，最终用待审占位加审核通过后落库上墙的方式解决。