--- canonical: https://tanveerriaz.me/blog/dashboard-atlas format: text/markdown --- Codex pets went viral. Tiny animated companions. Sitting inside a coding tool. Reacting while an agent works. Useful? A little. Adorable? Absolutely. Dashboard material? I could not resist. Nobody asked for a competitive ranking of coding companions. I built one anyway. ## The first version was beautiful. It was also wrong. I started where many AI builds start now: with an image. A dark pixel dashboard. Pet of the Week. Ranking bars. Funny names like Boba Byte and Panic Panda. It looked convincing enough to ship. Then I looked closer. The dashboard was ranking imaginary pets. The community already had real pets with real names, real creators and real sprites. I had accidentally built a polished interface around a fictional dataset. Is a fictional pet leaderboard a global crisis? No. But that was not the point. If the interface says live community data , the pets should be the pets people actually made. The more polished a dashboard looks, the easier it is to stop asking whether the story underneath it is true. ## So I rebuilt it around the real community I replaced every generated mascot with the original community spritesheet. No redraws. No “inspired by” substitutes. Then I connected views, likes and downloads from the public source and turned those signals into a transparent league score. heat = log(views + 1) + 2 × log(likes + 1) + 2.5 × log(downloads + 1) The scores are normalised from 5.8 to 9.8 across the current top eight. It is not scientific. It is not pretending to be. The formula is visible because rankings are more fun when everyone can see how the game works. ## The build process, without the magic trick Here is the actual sequence. Not “prompt in, perfect product out.” The useful part happened in the corrections. ### Start with the question Who is ranking higher? Who is ranking lower? Which pet has the funniest name? A playful question gave the dashboard a reason to exist. ### Generate the first visual direction I used the viral pet idea to create the dark pixel-league concept. It established the hierarchy quickly: hero pet, KPIs, leaderboard, categories and lore. ### Check the story against the source This is where the build changed. I found the public pet gallery, removed the invented animals and mapped the authentic sprites, creators and engagement signals. ### Turn the image into a working product React and Vite for the interface. A small serverless function for the public data. A 15-minute cache to stay friendly to the source. A labelled authentic snapshot if the endpoint is temporarily unavailable. ### Test whether the system could travel I used four colour worlds from Chroa and rebuilt the same dashboard idea for wealth, hospitality, creators and cultural campaigns. Same link. Five genuinely different views. ## Then one dashboard became five I did not want four recolours of the pet screen. Quiet Luxury needed more air. Dark Deco needed brass rules and a slower rhythm. Vaporwave needed energy without becoming a glitch festival. Bauhaus needed the grid to explain the information. Colour was only one part. Typography, density, borders, motion and the charts themselves had to change. [Codex Pet League Live community data · authentic sprites Open →](https://codex-pet-league.vercel.app/?dashboard=pets) [Private Wealth Briefing Sample data · Quiet Luxury Data Open →](https://codex-pet-league.vercel.app/?dashboard=quiet-luxury) [Hotel Portfolio Nightbook Sample data · Dark Deco Open →](https://codex-pet-league.vercel.app/?dashboard=dark-deco) [Creator Signal Studio Sample data · Vaporwave Y2K Open →](https://codex-pet-league.vercel.app/?dashboard=vaporwave) [Culture Campaign Board Sample data · Bauhaus Primary Open →](https://codex-pet-league.vercel.app/?dashboard=bauhaus) ## The prompts are part of the product A screenshot tells you what I made. A prompt gives you somewhere to start. Every dashboard exposes the exact design direction, data requirements, palette and - just as importantly - the things to avoid. Copy one. Change the domain. Make it yours. Codex Pet League - live community dashboard Create a high-fidelity React dashboard called “Codex Pet League”. Use a midnight navy pixel-interface with lavender, mint, coral, yellow and cyan accents. Source published Codex pets from a free public community API and rank animal or creature pets with a disclosed engagement formula using views, likes and downloads. Use each pet’s authentic spritesheet - never redraw or substitute the pet. Include a Pet of the Week arena, four source-backed KPI cards, an eight-row leaderboard, archetype breakdown, factual category winners, source freshness, methodology disclosure, responsive behavior, keyboard focus states and reduced-motion support. Cache the public endpoint for 15 minutes and show a clearly labelled last-known authentic snapshot if the source is unavailable. Private Wealth Briefing - Quiet Luxury Data Design an executive private-wealth dashboard using Chroa’s Quiet Luxury Data system. Use the frozen palette #fee8e2, #ebd5cf, #1b8ea5, #317bb9 and #1c1411; Cormorant Garamond for restrained display type, Schibsted Grotesk for interface copy and IBM Plex Mono for figures. Build a spacious summary-first layout with assets monitored, net inflow, portfolio yield and risk-budget KPIs; a thin-line performance chart; allocation bars; a mandate donut; and a compact holdings table. Use hairline dividers, almost no shadows, generous margins and barely-there transitions. Label all example figures as sample data. Avoid bright accents, dense tables, generic SaaS gradients and decorative cards. Hotel Portfolio Nightbook - Dark Deco Create a premium hotel-portfolio dashboard in Chroa’s Dark Deco world. Use the frozen palette #170a01, #251608, #c17403, #854f04 and #f9ece1; Poiret One for display titles, Jost for interface copy and IBM Plex Mono for nightly figures. Present revenue, occupancy, RevPAR and guest sentiment, then show a stately revenue line, property occupancy bars, revenue-mix ring and a three-property nightbook. Use near-black brown surfaces, hairline brass rules, stepped Art Deco geometry, square corners and slow light-sweep reveals. Label figures as sample data. Avoid cyberpunk neon, rounded SaaS cards, gradients and playful multicolour accents. Creator Signal Studio - Vaporwave Y2K Build a creator-analytics dashboard using Chroa’s Vaporwave Y2K world. Use the frozen palette #021a15, #0d2621, #d55f8b, #f17763 and #e1f3ef; Syne for display type, Space Grotesk for interface copy and VT323 for small signal labels. Include monthly reach, core community, save rate and sponsor value; an audience-growth line; format-performance bars; an audience-mix ring; and a top-content list. Use rounded blobby containers, dark sea-glass surfaces, coral and pink signals, spring-like transitions and exactly one chrome treatment. Label all numbers as sample data. Avoid glitch effects, synthwave horizons, looping sparkle and generic purple gradients. Culture Campaign Board - Bauhaus Primary Create a cultural-campaign dashboard in Chroa’s Bauhaus Primary system. Use the frozen palette #fceaef, #efdde2, #186f60, #10a4b8 and #1b1416; Josefin Sans for geometric display type, DM Sans for interface copy and Space Mono for metrics. Show tickets moved, earned reach, member actions and remaining budget; a campaign-velocity line; channel bars; owned/earned/paid mix; and milestone rows. Build the layout from a strict grid of circles, squares and 2px rules with square corners and snap transitions. Label all figures as sample data. Use no gradients, soft shadows, pill buttons or organic blobs. ## The stack costs me nothing to keep running No paid database. No private API key. No monthly dashboard bill. React + Vite The dashboard interface and all five routes. Public pet data Cached for 15 minutes through one serverless function. Vercel free tier Hosting, deployment and the live URL. Free infrastructure still has limits. That is fine. This is a playful experiment, not a global payments platform. The important part is that someone can open it, inspect it, copy the prompt and build their own version without paying to understand the idea. Open the Dashboard Atlas. Switch between all five views. Inspect the real pet data. Copy any build prompt from the top-right corner. [Explore all five dashboards →](https://codex-pet-league.vercel.app/) Would I build a serious leaderboard for tiny coding companions again? Absolutely. Because this is what building with AI feels like now. One silly question can become an image, then an app, then a design system, then something another builder can reuse. The point was never only the pets. The point was how quickly an idea can become a working artifact - and why we still need to stop, look closely, and ask whether the artifact is telling the truth. What harmless internet trend would you turn into a dashboard? Curious mind. Builder mode! 🇸🇬