Building GamerLinks: A Link-in-Bio Platform with Auto Content Scheduling for Gaming Creators

Source: Dev.to

The Problem

Gaming creators (streamers, YouTubers, etc.) need more than just a static list of links. They need to:

• Show their stream schedules
• Highlight monetization options
• Build communities
• Track meaningful analytics

Generic link‑in‑bio tools don’t solve these problems, so I built something that does.

The Tech Stack

Frontend

• React 19.2.0 (Create React App)
• React Router v6
• Tailwind CSS with custom gaming themes
• @dnd-kit for drag‑and‑drop
• date-fns for date/time handling

Backend

• Firebase Firestore (NoSQL database)
• Firebase Authentication
• Firebase Storage (for images)
• Firebase Cloud Functions (serverless)

Key Libraries

• react-image-crop for avatar editing
• qrcode.react for QR code generation
• react-icons for iconography

The Killer Feature: Auto Content Scheduling

The Challenge

Gaming creators have recurring schedules (e.g., streaming every Monday, Wednesday, and Friday at 7 PM). They shouldn’t have to manually create each event. The system should:

• Generate future occurrences automatically
• Handle timezone conversions
• Update event status (Scheduled → Live → Completed)
• Display events on profiles dynamically

The Solution

I built a recurring‑event system that generates occurrences for the next three months.

// 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;
}

The system automatically:

• Creates events based on patterns
• Converts timezones
• Updates status based on current time
• Removes past events
• Generates future occurrences

Event Status Management

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' };
    }
  });
}

Real‑Time Updates with Firestore

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

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

When a creator updates their schedule, all viewers see the change instantly.

Gamification System

A level and badge system tracks:

• Profile views
• Link clicks
• Followers gained
• Content scheduled
• And more…

Levels progress from Rookie → Bronze → Silver → Gold → Platinum, with badges awarded automatically via Cloud Functions to prevent client‑side manipulation.

Analytics with Protection

To guard against spam, I added rate limiting, validation, and a queue for batch processing.

// 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()
  });
}

The Follow System

Firestore subcollections store follower/following relationships:

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

Real‑time subscriptions keep follower counts up to date:

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

Mobile‑First Design

The platform is fully responsive. An Instagram‑style sidebar:

• Slides in from the left on mobile
• Overlays content with a backdrop
• Closes on outside click
• Prevents body scroll when open

Challenges Faced

• Timezone Handling – Supporting multiple timezones required date-fns-tz.
• Real‑Time Performance – Too many Firestore listeners can degrade performance; I batched subscriptions and used memoization.
• Image Optimization – Avatar uploads needed cropping, compression, and optimization; solved with react-image-crop and Firebase Storage.
• Analytics Spam – Prevented fake clicks/views via server‑side validation in Cloud Functions.

What I Learned

• Start simple – Over‑engineering early on leads to unnecessary complexity.
• Real‑time is powerful – Firestore subscriptions make the app feel instant.
• Mobile matters – Most creators use mobile; design mobile‑first.
• Gamification works – Levels and badges keep users engaged.

Current Status

GamerLinks launched a month ago and is fully functional with:

• Auto content scheduling
• Follow system
• Analytics
• Gamification
• Monetization features

User count is currently zero, but every product starts somewhere.

Try It

If you’re a gaming creator (or know one), check it out: gamerlinks.org – it’s free to start. Feedback is welcome.

What’s Next

• More platform integrations
• Enhanced analytics
• Mobile app (using Capacitor)
• Team/collaboration features

Questions?

Feel free to ask anything about the tech stack, implementation, or features. I’m happy to share more code snippets or explain decisions.

Tech Stack Summary

• React + Firebase
• Real‑time Firestore subscriptions
• Cloud Functions for server‑side logic
• Mobile‑first responsive design
• Auto content scheduling system

Links

• GamerLinks
• Example Profile