Overview
RIOT.ID is a web app for RIOT Indonesia, a Bandung-based running community whose tagline is "Running Is Our Therapy". Members use it to find runs, register and carry a ticket to the start line. Organizers use it to see who signed up and who actually came. The project later became a peer-reviewed journal paper.
The challenge
RIOT has been running together since 2018 and keeps growing, but the admin side never caught up. Registering for an event, checking people in at the start and recording who joined which run were all manual. That does not scale.
The second problem was quieter. Outside the run itself, members had little reason to stay engaged. The research question I started from was simple: how do you keep people motivated between events?
Approach
Two ideas carry the whole app.
The QR code is the attendance record. Every participant gets a personal e-ticket with a QR code and a status: GOING, ATTENDED or ABSENT. At the start line, an organizer scans it and the status flips from GOING to ATTENDED. There is no separate attendance sheet to reconcile later. The ticket a runner shows is the same thing that updates their record.
Attendance becomes progress. Each event carries a point value. Turning up earns Experience Points (XP), and a Rank page turns XP into a leaderboard. Showing up to a run now counts for something visible, which is the motivation loop the community was missing.
Because the two ideas share the same scan, gamification costs organizers nothing extra. Checking someone in and rewarding them are one action.
What I built
- Accounts with email and password or "Continue with Google", so joining takes one click.
- Event pages showing date, time, location, organizer and how many points each event is worth.
- QR e-tickets with live status.
- Check-in by scan for organizers.
- Points and rank: XP per attended event and a community leaderboard.
- Organizer export of an event's participant list to PDF.
Process
I designed the interface with Design Thinking, built the app with Rapid Application Development on Next.js and MongoDB, and verified every feature with black-box testing against the project's objectives. RAD suited a community project: get a working version in front of members early and adjust from there.
Publication
The project is published as a research article:
Peter Shaan and Jay Idoan Sihotang (Fakultas Teknologi Informasi, Universitas Advent Indonesia). "RIOT.ID: Revolutionizing Running Community Management with Next.js and Gamification." CogITo Smart Journal, Vol. 10 No. 2 (2024), pp. 447-459. SINTA 2 accredited.
DOI: 10.31154/cogito.v10i2.764.447-459
The paper covers the design of the app, which combines QR Code technology with an XP-based gamification system to motivate member participation. It describes the Design Thinking approach to the interface, the RAD development process on Next.js and MongoDB, and a black-box test of every feature against the project's objectives. It presents RIOT.ID as a model other communities can follow to manage their members and keep them engaged.