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

I spent the last few months building GamerLinks—a link-in-bio platform specifically designed for gaming creators. Here's what I built, why I built it, and the technical challenges I faced.

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 most challenging and rewarding feature was auto content scheduling. Here's how it works:

The Challenge

Gaming creators have recurring schedules. They might stream every Monday, Wednesday, and Friday at 7 PM. They shouldn't have to manually create each event. The system should:

1. Generate future occurrences automatically
2. Handle timezone conversions
3. Update event status (Scheduled → Live → Completed)
4. Display events on profiles dynamically

The Solution

I built a recurring event system that:

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

Events automatically transition states:

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: 'live' };
    } else if (now > end) {
      return { ...event, status: 'completed' };
    } else {
      return { ...event, status: 'scheduled' };
    }
  });
}

Real-Time Updates with Firestore

I used Firestore's real-time subscriptions to keep profiles updated:

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

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

This means when a creator updates their schedule, all viewers see the update instantly.

Gamification System

I built a level and badge system that tracks:

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

The system calculates levels, ranks (Rookie → Bronze → Silver → Gold → Platinum), and awards badges automatically. This runs via Cloud Functions to prevent client-side manipulation.

Analytics with Protection

Analytics tracking needed protection against spam. I implemented:

• Rate limiting
• Validation via Cloud Functions
• Queue system for batch processing
• Duplicate detection

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

I built a follow system using Firestore subcollections:

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

Real-time subscriptions keep follower counts updated:

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

Mobile-First Design

The entire platform is mobile-responsive. I built an Instagram-style sidebar that:

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

Challenges Faced

1. Timezone Handling - Supporting multiple timezones for scheduling was complex. I used date-fns-tz for conversions.

2. Real-Time Performance - Too many Firestore listeners could slow things down. I optimized by batching subscriptions and using memoization.

3. Image Optimization - Avatar uploads needed cropping, compression, and optimization. I used react-image-crop and Firebase Storage.

4. Analytics Spam - Preventing fake clicks/views required server-side validation via Cloud Functions.

What I Learned

• Start simple - I over-engineered some features initially. Simpler solutions often work better.
• Real-time is powerful - Firestore subscriptions make the app feel instant.
• Mobile matters - Most creators use mobile. Design mobile-first.
• Gamification works - The level/badge system keeps users engaged.

Current Status

I launched GamerLinks a month ago. It's fully functional with:

• Auto content scheduling
• Follow system
• Analytics
• Gamification
• Monetization features
• And more...

But I have zero users. That's okay. 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. I'd love feedback from developers and creators.

What's Next

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

Questions?

Ask me anything about the tech stack, implementation, or features. I'm happy to share 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

Let me know what you think! 🎮