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

gamerlinks — Fri, 05 Dec 2025 10:32:52 +0000

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:

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:

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

Timezone Handling - Supporting multiple timezones for scheduling was complex. I used date-fns-tz for conversions.
Real-Time Performance - Too many Firestore listeners could slow things down. I optimized by batching subscriptions and using memoization.
Image Optimization - Avatar uploads needed cropping, compression, and optimization. I used react-image-crop and Firebase Storage.
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:

Let me know what you think! 🎮

DEV Community: gamerlinks

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

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

The Problem

The Tech Stack

The Killer Feature: Auto Content Scheduling

The Challenge

The Solution

Event Status Management

Real-Time Updates with Firestore

Gamification System

Analytics with Protection

The Follow System

Mobile-First Design

Challenges Faced

What I Learned

Current Status

Try It

What's Next

Questions?