OpenSource RPG

Quest
Dashboard
Admin Dashboard
Leaderboard
Profile

Inspiration

Every open-source program struggles with the same problem — keeping contributors motivated beyond the first PR. We asked ourselves: "What if contributing to open source felt like playing an RPG?" Inspired by GitHub's contribution graph, Duolingo's streak mechanics, and classic RPG leveling systems, we built OpenSource RPG — a platform that transforms mundane contributions into an addictive progression experience.

What it does

OpenSource RPG integrates with GitHub to automatically track pull requests, issues, and code reviews, converting them into:

⚡ XP & Levels — 6-tier progression from Newbie to Open Source Legend
🔥 Streaks — Daily activity tracking with multipliers (7d = 1.2x, 30d = 2x)
🛡️ Badges — 12 achievements across 4 rarity tiers (Common → Legendary)
🏆 Leaderboards — Global, weekly, and per-project rankings with a podium view
📜 Quest Board — Kanban-style issue browser where contributors claim tasks

Mentors can register repositories, configure XP values per difficulty label, and review pending contributions. Organizers can manage seasons for programs like Apertre.

How we built it

Frontend: Next.js 16 (App Router) + TypeScript + Tailwind CSS + Framer Motion for RPG-themed animations (level-up effects, floating XP numbers, pulsing glows)
Backend: Next.js API Routes with GitHub webhook handlers for real-time PR/issue tracking
Database: Prisma ORM with SQLite (dev) / PostgreSQL (prod) — 8 models covering users, projects, quests, contributions, badges, and streak history
Auth: NextAuth.js with GitHub OAuth for seamless login
Gamification Engine: Custom XP calculator with streak multipliers, anti-spam PR heuristics, and automatic badge awarding

Challenges we faced

Build-time Prisma errors: API routes tried to initialize PrismaClient during static page collection. Solved with force-dynamic exports and a try-catch wrapper around client construction.
Designing the gamification math: Balancing XP values, streak multipliers, and level thresholds so progression feels rewarding but not trivially easy required multiple iterations.
RPG aesthetic without a design team: Achieving a premium dark-mode UI with neon accents, glassmorphism cards, and smooth animations using only CSS variables and Framer Motion.
GitHub webhook complexity: Handling label-based difficulty detection, anti-spam filtering, and automatic quest creation from labeled issues across multiple repositories.

What we learned

How to build a complete gamification system from scratch (XP, levels, streaks, badges)
GitHub webhook architecture and event-driven contribution tracking
Advanced Next.js patterns: dynamic API routes, server components, Prisma integration
Creating premium UI without a component library — pure CSS design systems with custom animations