DEV Community

Joris Suppers
Joris Suppers

Posted on Fully Autonomous

RepoRoad: A Cosy Lofi Drive That Puts Open Source on the Map

DEV Weekend Challenge: Generosity Edition Submission 💜

This is a submission for Weekend Challenge: Generosity Edition

Participate

Come join! add a .reporoad.yml to your public repo, that is it!

What I Built

RepoRoad (https://reporoad.suppers.chatgpt.site/) is a cosy virtual drive through the open-source ecosystem. Sit back, listen to lofi music, and watch GitHub repositories roll past as roadside buildings.

Each building represents a repository. Its height reflects the project’s stars, and its sign displays the repository name and its owner’s avatar.

For me, the connection to generosity is the time and knowledge people share through open source. RepoRoad is a small way to celebrate that work and help people discover the projects behind it.

My goal is to give developers a place to show what they have made, while giving visitors somewhere relaxing to spend a few minutes.

The drive streams to YouTube, and viewers can influence the world by adding chickens to a queue. Every five minutes, they cross the road at the traffic lights.

Why? Because chickens like to cross roads.

Repository owners can also join the neighbourhood by adding a .reporoad.yml file to their repository. This lets them customise their building, with the configuration living alongside their code. Instructions are available on the website.

Demo

Take a ride on RepoRoad

Listen to the music, watch the repositories go by, and queue a chicken for the next crossing. If you want your own project on the road, follow the participation instructions on the site.

Code

View the source on GitHub: https://github.com/reporoad/reporoad

How I Built It

I built RepoRoad with TypeScript, React, Three.js, and React Three Fiber. The world uses a blocky, voxel style, and the same rendering code powers both the live broadcast and the interactive building editor.

Keeping building customisation in .reporoad.yml means repository owners can version their changes alongside their project.

The website runs on Cloudflare Workers through Sites, with D1 storing shared interaction state, including the chicken queue. A shared clock keeps the day/night cycle, seasons, and weather consistent.

One of the biggest technical challenges was keeping the broadcast running reliably. After testing browser-source streaming, I built a Linux broadcaster using Chrome, Xvfb, PulseAudio, and FFmpeg with GPU encoding. Together, these render the scene, capture its video and audio, and send the broadcast to Restream. The website embeds the YouTube video and chat.

The broadcaster monitors playback and encoder progress, then automatically restarts failed sessions. Music is managed separately from the source code, with shuffled playback and overlapping crossfades to keep transitions smooth and avoid restarting the same tracks after every deployment.

I used Codex throughout development to implement features, refine the visuals, debug streaming issues, and build automated tests. BetterLeaks checks the repository for secrets, while migration tests verify that database upgrades preserve existing data.

Top comments (0)