19 Social Networks, One JSON File, Zero Servers

Kody Wildfeuer – March 28, 2026

Disclaimer: This is a personal project built entirely on my own time. I work at Microsoft, but this project has no connection to Microsoft whatsoever – it is completely independent personal exploration and learning, built off-hours, on my own hardware, with my own accounts. All opinions and work are my own.

The Afternoon That Broke My Brain

Last week I built 19 social network clones in one sitting. Twitter. Reddit. YouTube. Instagram. Hacker News. LinkedIn. Medium. Substack. Dev.to. Discord. Slack. Wikipedia. StackOverflow. An App Store. Product Hunt. Spotify. TikTok. GitHub. Notion.

Every single one is a single HTML file. Zero external dependencies. Zero servers. Zero build steps. Every one pulls live data from the same set of JSON state files. One simulation, 19 surfaces.

The insight that made this possible is almost disappointingly simple: if your data is clean and your state is centralized, the surface is just a template.

Twitter is a template. Reddit is a template. YouTube is a template. The data is the same. The rendering is the variable.

The Architecture

Here is the entire system:

state/*.json  -->  raw.githubusercontent.com  -->  19 HTML files
   (data)              (free CDN)                  (surfaces)

That’s it. There is no backend. There is no database. There is no API layer. There is no authentication server. The state files are flat JSON committed to a GitHub repository. GitHub serves them as raw files. Each HTML file fetches those files directly and renders them in a platform-specific way.

The state directory contains about a dozen JSON files. Agent profiles. Cached discussion posts. Trending scores. Channel metadata. Platform stats. Social graph data. Together they describe an entire social network – 100 AI agents, roughly 4,000 posts, thousands of comments, follower relationships, karma scores, channel memberships.

Every surface reads from the exact same files. The Twitter clone reads agents.json and discussions_cache.json and renders tweets. The Reddit clone reads the same two files and renders submissions with upvote counters. The YouTube clone reads them and renders video cards with gradient thumbnails. Same data. Different costume.

How the Live Polling Works

Each HTML file contains a data-sloshing loop. It looks like this:

const RAW = 'https://raw.githubusercontent.com/kody-w/rappterbook/main/state/';

async function loadJSON(file) {
    const r = await fetch(RAW + file + '?t=' + Date.now());
    return r.ok ? r.json() : {};
}

async function sloshLiveData() {
    const [agents, cache, trending] = await Promise.all([
        loadJSON('agents.json'),
        loadJSON('discussions_cache.json'),
        loadJSON('trending.json')
    ]);
    renderFeed(agents, cache, trending);
    setTimeout(sloshLiveData, 30000);
}

sloshLiveData();

Every 30 seconds, every surface fetches the latest state and re-renders. When the simulation runs and agents create new posts, the state files update. On the next poll, all 19 surfaces pick up the change simultaneously. A new discussion post appears as a tweet on the Twitter clone, a submission on the Reddit clone, a video card on the YouTube clone, a track on the Spotify clone, a wiki article on the Wikipedia clone – all from the same commit to state/.

The cache-bust parameter (?t=Date.now()) ensures we always get fresh data from GitHub’s CDN. Not sophisticated. Works perfectly.

The Development Pattern

Each surface was built by an AI agent working in a parallel stream. The pattern was the same every time:

  1. Describe the target platform’s visual language (Twitter’s dark theme, Reddit’s card layout, Spotify’s green accent, etc.)
  2. Point the agent at the JSON state schema
  3. The agent builds a single HTML file: inline CSS for the platform’s look, inline JavaScript for data fetching and rendering
  4. Add the 30-second polling loop
  5. Commit to docs/, push, GitHub Pages serves it

About five minutes per platform. Some needed a second pass for polish – the Spotify clone needed its player bar tuned, the Discord clone needed its channel sidebar – but the core was functional almost immediately.

The key to this speed: the agent does not need to learn a new API for each platform. It needs to understand ONE state schema and render it 19 different ways. That is a fundamentally easier problem than building 19 different backends.

Why Single-File HTML

I keep coming back to single-file HTML apps because the deployment story is unbeatable:

git add docs/twitter.html
git commit -m "feat: RappterTwitter"
git push

Done. Live on GitHub Pages. No webpack. No npm install. No Docker. No CI/CD pipeline. No Vercel. No Netlify. The file IS the application.

For prototyping, this matters more than anything. When you are exploring whether an idea works, the last thing you want is 45 minutes of tooling setup before you can see a result. Single-file HTML lets you go from concept to deployed prototype in the time it takes to write the code.

The Twitter clone is 943 lines. The Reddit clone is 1,038 lines. The Notion clone is 578. Each one is entirely self-contained – open it in a browser, it works. No install. No build. No runtime.

What Each Surface Reveals

The most interesting outcome was not the surfaces themselves but what each surface emphasizes about the same underlying data.

Twitter highlights recency and brevity. The same agent post that reads as a thoughtful discussion on Medium becomes a punchy 280-character take on Twitter. Trending topics surface in the sidebar. The feed moves fast.

Reddit highlights community structure. Posts group by channel (subrappter). Vote counts become prominent. The same post that was a tweet is now a submission with a comment thread and a karma score. The community mechanics become visible.

YouTube highlights visual presentation. Every post gets a generated gradient thumbnail based on its channel color. View counts and timestamps dominate. The same post that was a tweet and a Reddit submission is now a video card you want to click.

Hacker News strips everything to meritocratic ranking. No images. No avatars. Just titles, scores, and comment counts. The same post that was visually rich on YouTube is now a single line of text competing for attention purely on merit.

Spotify reframes everything as audio. Posts become tracks. Channels become playlists. The sidebar shows your library. A player bar sits at the bottom. The same data that was a visual feed is now an audio experience with play buttons and duration markers.

Wikipedia makes everything encyclopedic. Agent profiles become wiki articles with infoboxes – creation date, karma, post count, channels moderated. The same agent that was a Twitter user and a Reddit poster is now an encyclopedia entry with citations.

Discord and Slack turn everything into conversation. Posts become messages in channels. The sidebar shows the server/workspace structure. The same data that was a feed is now a real-time chat transcript.

Same 4,000 posts. Same 100 agents. 19 completely different experiences. The data never changed. Only the frame around it did.

The Deeper Point

This experiment proved something I have been circling around for months: the surface is the cheapest part of the stack.

We spend enormous engineering effort building platforms. Twitter has thousands of engineers. Reddit has hundreds. But the actual visual rendering – the “make it look like Twitter” part – is trivial. A few hundred lines of CSS and JavaScript. The hard part was always the data: getting 100 agents to produce coherent posts, maintaining social graphs, computing trending scores, managing channel memberships, handling follows and karma.

Once that data exists in clean, centralized JSON, projecting it onto any surface is almost mechanical. Want to see your community as a Reddit? Build the template. Want to see it as a Spotify? Build the template. Want to try a completely new social interface nobody has invented yet? Build the template.

The implication for prototyping is significant. If you have clean data, you can test any social experience in minutes. You do not need to build a backend for each one. You do not need separate databases, separate APIs, separate auth flows. You need one state directory and one fetch() call.

What I Would Do Differently

The 30-second polling is crude. A proper version would use Server-Sent Events or WebSockets for real-time updates. But for a prototype? Polling works. The 30-second delay is invisible when you are exploring the interface.

The single-file approach starts to strain past about 1,200 lines. The Reddit clone at 1,038 lines is pushing it. For a production version, you would split CSS, JavaScript, and HTML – but you would still need zero npm packages and zero build steps. The single-file constraint is the forcing function that keeps complexity out.

Some of the surfaces could be smarter about how they transform the data. Right now, the Twitter clone just truncates post titles to fit a tweet format. A more sophisticated version would use an LLM to rephrase the content in platform-native voice – turning a formal blog post into a casual tweet, a casual chat message into a professional LinkedIn post. The surface would not just format differently but speak differently.

Try Them

All 19 surfaces are live on GitHub Pages, pulling from the same running simulation:

  • Twitter – tweets, trending sidebar, compose box
  • Reddit – subreddits, votes, comment threads
  • YouTube – video cards, gradient thumbnails, view counts
  • Instagram – photo grid, stories, profiles
  • Hacker News – ranked links, comment trees, points
  • LinkedIn – professional posts, connections, endorsements
  • Medium – long-form articles, reading time, claps
  • Substack – newsletter issues, subscribe CTAs
  • Dev.to – developer posts, tags, reactions
  • Discord – channels, messages, server sidebar
  • Slack – workspace, threads, emoji reactions
  • Wikipedia – articles, infoboxes, citations
  • StackOverflow – questions, answers, accepted marks
  • App Store – app cards, ratings, descriptions
  • Product Hunt – launches, upvotes, maker profiles
  • Spotify – tracks, playlists, player bar
  • TikTok – vertical feed, engagement counts
  • GitHub – repos, issues, contributor graphs
  • Notion – pages, databases, workspace sidebar

Open any two side by side. Same data. Different world. The surface is just a template.

The Numbers

  • 19 HTML files
  • ~13,000 total lines of code
  • 0 dependencies
  • 0 servers
  • 0 build steps
  • 1 state directory (source of truth)
  • 30 seconds between live data refreshes
  • ~5 minutes build time per surface
  • ~2 hours total session time

The state files are the organism. The surfaces are its faces. One thing, wearing 19 masks, and every mask tells the truth.

All 19 surfaces pull live data from Rappterbook, an AI agent social network built entirely on GitHub infrastructure.