QueerCade (Part 2): Vibe-Code Something Strange — an Arcade of Queer Games on Sanity

#devchallenge #sanitychallenge #sanity #ai

Sanity Challenge Path Two Submission

This is a submission for the Sanity Challenge, Path Two: Vibe-Code Something Strange

What I built

QueerCade is a retro 8-bit pixel-art game database containing LGBTQ+ video games, constructed using TanStack Start, React 19, and the NES.css design system; it includes curated collections such as cozy queer games, visual novels, and dating sims, allows users to keep track of their personal library, and offers two enjoyable methods of exploring queer game history.

The Queer Character Constellation is an interactive stellar display that plots more than 870 carefully selected LGBTQ+ characters as stars. Users are able to pan around, zoom in and out, and switch between different layers of constellations which link characters from various franchises and periods based on common identity aspects (such as lesbian, gay, bisexual, trans, non-binary, and asexual), the decades in which they were released (ranging from the early 1980s pioneers to contemporary independent games), and narrative stereotypes. When any star is clicked on, information about the individual appears, together with portraits of the cast, the sources, and a direct link to the game itself in the arcade.
The Emoji Game Oracle lets you select 3 to 5 emojis covering mood, vibe, setting, and playstyle, after which an AI agent picks one custom match from the arcade and provides an in-character, retro-style explanation.

Live at QueerCade live site.

Sanity isn't a sidecar; it is the whole content backend, since all screens, filters, searches, and graphs obtain their data from Sanity through GROQ and there is no other content database.

How Sanity powers the app

Controls for the studio field and human-in-the-loop curation. Queer history in gaming is complex, controversial, and generally not recorded in mainstream gaming databases. To ensure that the curation process was thorough, we set up custom controls for the studio field:
- Status gates: An editorial status radio control (which goes through the stages of imported → under review → approved → featured) makes sure that raw automated syncs are never made available to the public app or agent tools until they have been checked. Editors create structured character arrays by providing dedicated input fields for the verified names of the characters, for the source citations (sourceUrl), and for the controlled tag selectors relating to identityTags and narrativeTropes (for example, coming-out-arc, found-family, playable-protagonist*).
- Editorial isolation means that fields such as editorNotes, sources, and character arrays are kept out of reach of the automated sync engine.
Instead, we use a pipeline, not a spreadsheet. The games come in from the IGDB API, are normalized, and are then written to Sanity via a server-side client (the token is stored in the cloud secrets and is never kept in the browser). Each time a sync runs, an importRecord document is logged—this keeps a record of what was created, updated, refreshed, and skipped. Strict enforcement of field ownership lets the IGDB machine metadata (such as ratings, covers, and release dates) refresh cleanly without overwriting human editorial entries.
With a planned approach and no unnecessary client-side bloat, all GROQ queries are located in the file src/lib/sanity/queries.ts. The constellation is able to fetch more than 800 curated character records that are embedded within games through a single projection, joining in the game metadata, the release years, the normalized identities, and the IGDB cast portraits to form a deterministic force-directed graph with no redundant client calls.
Image optimization runs in real time; the book covers and character portraits pass through @sanity/image-url with responsive sizing and retro borders — no separate asset pipeline needed.

The strange part

In most content management systems, character data is treated as a series of static items placed at the end of an article. About 'Vibe-Code Something Strange', I asked what might happen if an editorial CMS acted as the physics engine for a retro space map.

The nested document model used by Sanity regards character identities, tropes, and release years as dimensional metadata. Since the Studio field constraints confirm that identity tokens are clean and relationships are verified, an HTML5 Canvas can read the array directly from GROQ, turn the characters into nodes in a seeded d3-force simulation, and link the stars across the decades using sparse ring algorithms. Thus, a character from a 1993 point-and-click adventure can connect to the protagonist of a 2024 indie RPG through a common identity tag authored in Sanity Studio.

Together with the Path One Sanity MCP agent (the Emoji Oracle), the same Sanity dataset powers:

A retro pixel-art storefront
An AI agent queryable through MCP
An interactive celestial graph visualization

One content lake offers three entirely different interactive experiences.

By the numbers

746 games, 930 companies, 79 platforms, 22 genres
874 interactive character stars plotted across decades in the Constellation
4 curated collections, all human-assembled in Sanity Studio
1,754 tracked import operations with full change-history audit trails
0 content databases besides Sanity

Demo:

Queer Character Constellation — QueerCade

Explore LGBTQ+ video game characters as stars connected by identity, release era, and verified narrative tropes.

queercade.mikedemo.dev

Note: I tried to use the knowledge base, but it had a limit on the number of documents. I contacted Sanity support and Discord support, and unfortunately, using the knowledge base MCP wasn't possible, which is why I connected to the standard dataset MCP instead.

DEV Community