Social / Community Product Case Study

A Gamified Debate Community Built End to End

A community platform for the Ethereum ecosystem where members post claims, argue for or against them, answer questions and write wiki articles, earning XP toward ten ranks, per-community levels and a live leaderboard. Funded by an Ethereum Foundation grant, we designed and built it end to end in 2020 and 2021: a mobile-first Nuxt progressive web app on a Laravel API, with an event-sourced reputation engine, social logins and wallet linking, moderation tooling and an admin panel.

Grant-Funded

Backed by an Ethereum Foundation grant, designed and built end to end in 2020 and 2021

Understanding the problem

The Challenge

Industry Community / Web3
Funding Ethereum Foundation Grant
Timeline Jun 2020 to Jun 2021
Scope Design, App, API, Admin

A team in the Ethereum ecosystem, funded by an Ethereum Foundation grant, wanted a home for structured debate: a place where members post a claim, argue for or against it, answer each other's questions and build a shared wiki, with a reputation system that rewards the people who contribute the most. Forums and chat servers could not do it. Discussion scattered, nobody could tell which arguments carried weight, and there was no durable record of who had earned standing in which topic.

The hard part was the game layer. Every action, from writing an argument to receiving an agree on an answer, had to earn experience points, feed a level in the right community, roll up into a global rank and show up on a leaderboard, consistently and auditably. On top of that sat identity. The audience lives in wallets and developer profiles, so sign-in had to work with Twitter, GitHub, LinkedIn and Facebook accounts as well as email, members had to be able to link a MetaMask wallet, and optional proof-of-uniqueness verification had to keep one person from running several accounts.

We designed and built the whole product from a blank repository between June 2020 and June 2021: the brand and interface, the Nuxt progressive web app, the Laravel API, the event-sourced reputation engine and the admin panel the moderators run the community from.

The project was funded by a grant from the Ethereum Foundation.

How We Built It

The Process

Four layers, built in the order the product needed them: the debate model, the reputation engine that turns participation into standing, the identity stack the audience already uses, and the mobile-first app and admin that tie it together.

XP tracker with a level gauge, an XP breakdown per community and an activity chart over time

Phase 2

Event-Sourced Reputation Engine

XP is not a counter on the user row. Every earning event, an argument written, a claim voted, an answer agreed with, is stored as an immutable event and projected into per-community totals, ten ranks from Beginner to Legend, XP boosts and a leaderboard filterable by period and community. Any score can be replayed and audited. The XP tracker charts a member's progress by week, month, 90 days or a custom range.

Laravel Event Sourcing

Backend · Gamification

Two phones showing the leaderboard and a claim thread in the mobile layout

Phase 4

Mobile-First PWA and Admin Panel

The Nuxt app is server-rendered, response-cached and installable as a progressive web app, with touch gestures and infinite-scrolling feeds designed for phones first. Behind it, a Laravel Nova admin gives the team moderation queues for reported claims and arguments, approval flows for answers, wiki articles and community projects, an identity lens for verification checks, and activity metrics such as active members, claims per day and reported arguments.

PWA Laravel Nova

Mobile · Admin

A claim with its arguments split into for and against columns, each with agrees, comments and a flag for moderators

Phase 1

Product Design and the Debate Model

We started with the core object, the claim. Every claim belongs to a community, carries a source and background, and splits into for and against arguments, each with its own comment thread, agree votes and a flag that routes abuse to moderators. Featured debates surface on the home feed, and the same model extends to Q&A threads with voted top answers and a wiki with full revision history.

Product Design Nuxt

Design · Frontend

A member profile with XP earned per community, the current rank progress bar and the member's claims

Phase 3

Social Login, Wallets and Proof of Uniqueness

Members sign in with email or with Twitter, GitHub, LinkedIn or Facebook, then link a MetaMask wallet by signing a message the API verifies on the server. Communities and individual claims can require BrightID verification, so sensitive debates stay one person, one voice. Linked accounts, a notification feed with an opt-out for email digests, and public profiles with per-community XP give every member a visible standing.

OAuth Web3

Identity · Integrations

Scope & Deliverables

What We Did

  • Product Design and Brand Interface
  • Nuxt Progressive Web App
  • Laravel API With Event-Sourced XP
  • Admin Panel and Moderation Tooling

Designed and Built From a Blank Repository

We owned the product end to end: the interface design, the Vue and Nuxt frontend, the Laravel API and data model, the admin panel, deployment and a year of iteration. More than 1,500 commits went into the two repositories between June 2020 and June 2021.

The API is built on Laravel Restify, our own open-source REST framework, which gave every resource (claims, arguments, comments, questions, answers, communities, projects, wiki articles, ranks, XP) a consistent, filterable JSON endpoint with policies and validation. Reputation runs on event sourcing: aggregates for claims, arguments, comments, answers and user experience record what happened, projectors build the read models, and ranks and leaderboards derive from them.

On the frontend, Nuxt provides server-side rendering with a response cache, a PWA manifest and service worker, i18n, a Tiptap rich-text editor for claims, arguments and wiki articles, Highcharts for the XP tracker and infinite-scrolling feeds. Media goes through Spatie Media Library to S3, and Sanctum issues the API tokens.

Technologies & Services

Our Tech Stack

A stack chosen for speed and a small team: Nuxt on Vue for an SEO-friendly, installable frontend, Laravel with our own Restify package for the API, Spatie event sourcing for the reputation ledger, Laravel Nova for admin, and web3 tooling for wallet linking.

  • Full-Stack
  • Event-Sourced
  • Mobile-First
Nuxt 2 Nuxt 2
Vue.js 2 Vue.js 2
Laravel 7 Laravel 7
PHP 7.4 PHP 7.4
MySQL MySQL
AWS S3 AWS S3

Gamification and Reputation Design

Ten ranks, per-community levels, XP boosts and a leaderboard with period and community filters, all replayable from an immutable event log.

Identity and Web3 Integration

Email and four social logins, MetaMask wallet linking with server-side signature verification, and optional BrightID proof-of-uniqueness on communities and claims.

Moderation and Admin Tooling

A Laravel Nova admin with report queues for claims and arguments, approval flows for answers, wiki articles and community projects, and an identity lens for verification checks.

Mobile First

Built for the phone in your pocket

Debates, leaderboards and notifications are read on phones, so the app was designed at phone width first: an installable PWA with touch gestures, infinite feeds and layouts that scale up to the desktop rather than down from it.

Measurable Impact

The Results

Funded by an Ethereum Foundation grant, we took the product from a blank repository to a shipped, installable community app in twelve months, with the entire product surface built in-house: a home feed with featured debates, claims with for and against arguments and threaded comments, Q&A, a wiki with revisions, member profiles with per-community XP, a top-50 leaderboard, an XP tracker, notifications, search across claims, arguments, questions and wiki articles, community project pages and the admin behind them. Every one of those surfaces runs on the same event-sourced reputation ledger, and the whole thing works as well on a phone as on a desktop.

Ethereum Foundation Grant That Funded the Project
12 Months From a Blank Repository to a Shipped Product
End to End Design, Web App, API and Admin, Built In-House
9 Communities Each With Its Own XP, Levels and Leaderboard
10 Ranks From Beginner to Legend
1 Codebase Desktop, Phone and Installable App From One PWA

Building a community or social product?

Bring your idea, your challenge, or just a rough brief. We'll help you figure out the rest.