构建 GamerLinks：面向游戏创作者的 Link-in-Bio 平台，具备自动内容排程

Source: Dev.to

问题

游戏创作者（主播、YouTuber 等）需要的不仅仅是一个静态的链接列表。他们需要：

• 展示直播时间表
• 突出变现选项
• 构建社区
• 跟踪有价值的分析数据

通用的 link‑in‑bio 工具无法解决这些问题，于是我构建了一个专门的解决方案。

技术栈

前端

• React 19.2.0 (Create React App)
• React Router v6
• Tailwind CSS，配有自定义游戏主题
• @dnd-kit 用于拖拽
• date-fns 用于日期/时间处理

后端

• Firebase Firestore（NoSQL 数据库）
• Firebase Authentication
• Firebase Storage（用于图片）
• Firebase Cloud Functions（无服务器）

关键库

• react-image-crop 用于头像编辑
• qrcode.react 用于二维码生成
• react-icons 用于图标

核心功能：自动内容排程

挑战

游戏创作者通常有固定的循环时间表（例如每周一、三、五晚上 7 点直播）。他们不应该手动创建每一个事件。系统需要：

• 自动生成未来的出现次数
• 处理时区转换
• 更新事件状态（已排程 → 正在直播 → 已完成）
• 在个人主页上动态展示事件

解决方案

我实现了一个循环事件系统，能够为接下来的三个月生成出现次数。

// Simplified version of the logic
function processRecurringEvents(events) {
  const processed = [];

  events.forEach(event => {
    if (event.isRecurring && event.recurrenceType === 'weekly') {
      // Generate occurrences for next 3 months
      const occurrences = generateWeeklyOccurrences(
        event.scheduleStart,
        event.weeklyDays, // [1, 3, 5] for Mon, Wed, Fri
        event.durationHours
      );
      processed.push(...occurrences);
    } else {
      processed.push(event);
    }
  });

  return processed;
}

系统会自动：

• 根据模式创建事件
• 转换时区
• 根据当前时间更新状态
• 删除过去的事件
• 生成未来的出现次数

事件状态管理

function updateEventStatuses(events) {
  const now = new Date();

  return events.map(event => {
    const start = new Date(event.scheduleStart);
    const end = new Date(start.getTime() + event.durationHours * 3600000);

    if (now >= start && now  end) {
      return { ...event, status: 'completed' };
    } else {
      return { ...event, status: 'scheduled' };
    }
  });
}

使用 Firestore 的实时更新

useEffect(() => {
  const unsubscribe = subscribeProfileByUsername(username, profile => {
    setProfile(profile);
    // Profile updates automatically when data changes
  });

  return () => unsubscribe();
}, [username]);

当创作者更新他们的时间表时，所有观众会立即看到变化。

游戏化系统

等级与徽章系统会跟踪：

• 个人主页浏览量
• 链接点击次数
• 获得的粉丝数
• 已排程的内容
• 以及更多…

等级从 Rookie → Bronze → Silver → Gold → Platinum 递进，徽章通过 Cloud Functions 自动授予，以防止客户端篡改。

带保护的分析

为防止垃圾信息，我加入了限流、校验以及批处理队列。

// Simplified analytics protection
function trackLinkClick(username, linkUrl) {
  const key = createRateLimitKey(username, 'linkClick');

  if (!checkRateLimit(key, 10, 60000)) { // 10 per minute
    return; // Rate limited
  }

  // Queue for batch processing
  analyticsQueue.push({
    type: 'linkClick',
    username,
    linkUrl,
    timestamp: Date.now()
  });
}

关注系统

Firestore 子集合存储关注/被关注关系：

profiles/{profileId}
  └── followers/{followerId}
  └── following/{followingId}

实时订阅保持关注计数同步：

subscribeToFollowerCount(userId, count => {
  setFollowerCount(count);
});

移动优先设计

平台完全响应式。类似 Instagram 的侧边栏：

• 在移动端从左侧滑入
• 使用遮罩覆盖内容
• 在点击外部时关闭
• 打开时阻止页面滚动

面临的挑战

• 时区处理 – 支持多时区需要 date-fns-tz。
• 实时性能 – 过多的 Firestore 监听器会降低性能；我对订阅进行了批处理并使用了记忆化。
• 图片优化 – 头像上传需要裁剪、压缩和优化；通过 react-image-crop 与 Firebase Storage 解决。
• 分析垃圾信息 – 通过 Cloud Functions 的服务器端校验阻止虚假点击/浏览。

收获

• 从简开始 – 过早的过度设计会导致不必要的复杂度。
• 实时很强大 – Firestore 订阅让应用感觉瞬时响应。
• 移动端重要 – 大多数创作者使用移动设备，必须移动优先设计。
• 游戏化有效 – 等级与徽章能提升用户黏性。

当前进展

GamerLinks 在一个月前上线，已具备以下完整功能：

• 自动内容排程
• 关注系统
• 分析功能
• 游戏化
• 变现功能

目前用户数为零，但每个产品都有起点。

试用

如果你是游戏创作者（或认识的创作者），请访问 gamerlinks.org — 免费开始。欢迎提供反馈。

下一步计划

• 更多平台集成
• 增强分析功能
• 移动端应用（使用 Capacitor）
• 团队/协作功能

有问题吗？

欢迎随时提问，关于技术栈、实现细节或功能都可以。我乐意分享更多代码片段或解释设计决策。

技术栈概览

• React + Firebase
• 实时 Firestore 订阅
• Cloud Functions 处理服务器端逻辑
• 移动优先响应式设计
• 自动内容排程系统

链接

• GamerLinks
• 示例个人主页