Real-Time GitHub Stars Counter: Building Live Updates with Motia Streams

In today's social-driven development world, real-time metrics and live updates are essential for building engaging applications. Whether you're creating a portfolio site, an open-source project showcase, or a developer dashboard, you need systems that can display live data without complex infrastructure.

This comprehensive guide explores how to build a production-ready, real-time GitHub stars counter using Motia's event-driven architecture and streaming capabilities. We'll cover:

1. Real-Time Streams: How Motia's streams enable effortless live data synchronization
2. Secure Webhooks: Production-ready webhook signature verification and event handling
3. Minimal Architecture: Building powerful real-time features with just two components
4. Live Integration: How this exact counter powers the live star count on the Motia website

Let's build a stars counter that updates in real-time across all connected clients.

🏭 Production-Grade Example

This is not a tutorial project - this is battle-tested, production-ready code that handles real traffic at scale. Every aspect has been designed for enterprise use:

• 🔐 Enterprise Security: HMAC webhook verification, timing-safe comparisons, comprehensive input validation
• ⚡ High Performance: Handles thousands of concurrent connections with automatic scaling
• 📊 Full Observability: Structured logging, error tracking, and comprehensive monitoring
• 🛡️ Error Resilience: Graceful degradation, retry logic, and fault tolerance
• 🌍 Global Scale: Production deployment on Motia Cloud with worldwide CDN
• 💰 Cost Efficient: Serverless architecture that scales to zero when not in use

Live Proof: Powering Motia.dev Header

This isn't just a demo - this exact code powers the live GitHub star counter you can see right now in the header of Motia.dev!

Look at the top-right corner of the Motia website and you'll see:

• 🏠 Motia logo on the left
• 📑 Blog, Docs, Manifesto navigation
• ⭐ GitHub icon with a live star count (currently showing 7953+ stars)
• 🚀 Vercel OSS 2025 badge

That live-updating number next to the GitHub icon? That's this exact implementation in production, processing real webhook events and streaming updates to thousands of visitors in real-time!

The Power of Real-Time Simplicity

At its core, our GitHub stars counter solves a fundamental challenge: how do you display live, real-time metrics without complex WebSocket infrastructure or manual state management? Traditional approaches often involve intricate server-side event handling, client connection management, and complex state synchronization.

Our Motia-powered solution breaks this down into just two simple components:

• GitHub Webhooks: Instant notifications when repository stars change
• Motia Streams: Real-time data synchronization with automatic state management
• Production Security: Built-in webhook signature verification

🎯 Live in Action: This exact implementation powers the real-time star counter visible in the header of Motia.dev (look for the GitHub icon with live count), updating instantly whenever developers star the repository!

Instead of complex infrastructure, we get a resilient real-time system where data flows effortlessly from GitHub events to live client updates.

The Anatomy of Our Real-Time Counter

Our application consists of just two specialized components, each handling a specific part of the real-time data flow. Let's explore the complete architecture.

import { StreamConfig } from 'motia'
import { z } from 'zod'
 
const RepositoryStarsSchema = z.object({
  stars: z.number(),
  name: z.string(),
  fullName: z.string(),
  organization: z.string(),
  lastUpdated: z.string(),
})
 
export type RepositoryStars = z.infer<typeof RepositoryStarsSchema>
 
export const config: StreamConfig = {
  name: 'stars',
  schema: RepositoryStarsSchema,
  baseConfig: { storageType: 'default' },
}

Real-Time Data Flow

The beauty of this architecture lies in its simplicity. Here's how real-time updates flow through the system:

1. GitHub Event → User stars/unstars your repository
2. Webhook Delivery → GitHub sends POST request to your endpoint
3. Security Validation → Signature verification ensures request authenticity
4. Stream Update → Data is written to Motia stream with streams.stars.set()
5. Live Propagation → All connected clients automatically receive the update
6. UI Updates → Client applications re-render with new star count

No manual WebSocket management, no connection handling, no state synchronization code required!

Key Features & Benefits

⚡ Instant Real-Time Updates

Stars update across all connected clients the moment GitHub sends the webhook - no polling, no delays.

🔐 Production-Ready Security

HMAC signature verification with timing-safe comparison prevents unauthorized webhook requests.

🧩 Minimal Architecture

Just two components handle the complete real-time functionality - no complex infrastructure required.

📊 Automatic State Management

Motia streams handle data persistence, synchronization, and client updates automatically.

🎯 Type-Safe Development

Full TypeScript integration with Zod validation ensures zero runtime surprises.

🌐 Live Production Usage

This exact implementation powers the real-time counter visible in the Motia website header - go check it out now!

🚀 Production-Grade Architecture

Built for enterprise scale with proper error handling, security, monitoring, and deployment automation.

Trying It Out

Ready to build your own real-time GitHub stars counter? Let's get it running.

git clone https://github.com/MotiaDev/github-stars-counter.git
cd github-stars-counter
npm install

# Generate a secure random secret
export GITHUB_WEBHOOK_SECRET=$(openssl rand -hex 32)
echo "GITHUB_WEBHOOK_SECRET=$GITHUB_WEBHOOK_SECRET" >> .env

npm run dev

# Get all repository star counts
curl http://localhost:3000/api/streams/stars
 
# Get specific repository star count  
curl http://localhost:3000/api/streams/stars/{org}/{repo}

# Deploy with version and API key
motia cloud deploy --api-key your-api-key --version-name 1.0.0
 
# Deploy with environment variables
motia cloud deploy --api-key your-api-key \
  --version-name 1.0.0 \
  --env-file .env.production \
  --environment-id your-env-id

🚀 Production Deployment Guide

Environment Variables

Configure these environment variables for production security and functionality:

# Required: GitHub webhook secret for security
GITHUB_WEBHOOK_SECRET="your-secure-random-secret"
 
# Optional: GitHub personal access token for enhanced API limits
GITHUB_TOKEN="ghp_your_github_token"

Security Best Practices

For production deployments, ensure you:

1. Generate secure webhook secrets:

   # Generate a cryptographically secure secret
   openssl rand -hex 32

2. Store secrets securely: Use environment variables, never commit to code

3. Monitor webhook signatures: The handler automatically verifies signatures when GITHUB_WEBHOOK_SECRET is set

4. Enable logging: Monitor for signature verification failures and unauthorized requests

Scaling Considerations

This architecture scales automatically with your traffic:

• Multiple repositories: Each repo gets its own stream key (org/repo)
• High concurrency: Motia streams handle thousands of concurrent connections
• Global distribution: Deploy to multiple regions for worldwide performance
• Cost optimization: Pay only for actual usage with serverless scaling

💻 Dive into the Code

Want to explore the complete real-time implementation? Check out the full source code and see how simple real-time features can be with Motia:

Conclusion: Real-Time Made Simple

This GitHub stars counter demonstrates how Motia transforms complex real-time development into simple, manageable components. With just two files and minimal configuration, we've built a production-ready system that handles webhook security, real-time synchronization, and live client updates.

The beauty of this approach is its scalability and extensibility:

• Add more repositories: Each gets its own stream automatically
• Enhance with analytics: Track starring patterns and user insights
• Multiple notification channels: Slack, Discord, email alerts for milestones
• Rich frontend integrations: React, Vue, vanilla JS - all work seamlessly

Key architectural benefits:

• No WebSocket complexity: Streams handle all real-time synchronization automatically
• Built-in security: Production-ready webhook verification out of the box
• Type safety: Full TypeScript support prevents runtime errors
• Zero configuration: Real-time features work with no additional setup

This exact implementation powers the live star counter you see in the header of Motia.dev - that 7953+ count updating in real-time? It's this code in action, proven at enterprise scale with thousands of daily visitors.

Production Metrics:

• Handles 10,000+ webhook events per day
• Sub-50ms response times globally
• 99.9% uptime with automatic failover
• Zero maintenance serverless architecture

Ready to add enterprise-grade real-time features to your applications? Deploy production-ready code with Motia today!