# Atlases: 16 Interactive Learning Guides That Run Code in Your Browser > Source: > Published: 2026-07-07 19:40:22+00:00 Atlases is a learning site: 16 long-form technical guides, each one a 12-chapter deep dive that you read in a browser tab while running the actual thing in another pane of the same tab. The databases atlas ships a real SQLite engine. The Python atlas runs CPython. The C++ atlas compiles C++. Nothing is a screenshot or an animated GIF pretending to be a terminal — it's the real interpreter, downloaded to your browser and running locally. It's live at [atlases.vercel.app](https://atlases.vercel.app/), and I built it with Claude as a pair programmer. The pitch is "pick a topic, build the intuition." There are 16 atlases: Databases, Networking, Linux, Cryptography, Compilers, Observability, AI/LLM Engineering, FiveM/Lua/QBCore, Encoding & Wire Formats, Python, JavaScript, C++, C, Docker, n8n, and Coolify. That spread is deliberately personal — it's the stack I actually touch, from running a FiveM RP server to wiring up n8n workflows to deploying with Coolify, so the topics are the things I wanted a good reference for and couldn't find in one place. Each atlas has the same 12-chapter spine: origin story, toolchain, the bedrock concepts, a working snippet library, a triage/troubleshooting section, and a roadmap of where to go next. That's 192 chapters across the site. What makes it more than a long blog is the interactive parts: No signup, no ads, no tracking. Progress saves to localStorage, so the site doesn't need to know who you are to remember where you were. The stack is intentionally boring: Vite + React 18 + Tailwind, with `react-router-dom` for routing and `lucide-react` for icons. That's almost the whole runtime dependency list. Each atlas is a single self-contained `.jsx` file in `src/atlases/` — `db-atlas.jsx` , `python-atlas.jsx` , and so on — lazy-imported and code-split in `App.jsx` so you only download the atlas you open. The landing page in `src/pages/Landing.jsx` just lists them. Adding a new atlas is a three-step move: drop the file in `src/atlases/` , add a lazy route in `App.jsx` , add a card on the landing page. The content pipeline matches the pattern I use for everything: I decided what each atlas should cover and how it should feel, Claude drafted the chapters, and then every claim got a human fact-check pass before it shipped. The sandbox engines are off-the-shelf WASM/JS interpreters wired into React components, so the heavy lifting of "actually run SQLite in a browser" is sql.js doing its job — my work was the glue and the teaching around it. Deployment is the easy part. The repo is on GitHub at [denrod25-del/atlases](https://github.com/denrod25-del/atlases), and Vercel auto-deploys every push to `main` . A small `vercel.json` handles the SPA rewrites so deep links to a specific atlas resolve correctly. `npm run build` produces a `dist/` folder of static files that would deploy anywhere — Vercel just happens to be the zero-config option. **Facts about a fast-moving industry go stale, and a learning site that's wrong is worse than no learning site.** Several atlases make time-sensitive claims — the current frontier model lineup, the latest C++ and C standards, the current PostgreSQL and LLVM versions, whether OpenTelemetry's GenAI conventions are stable yet. Those were correct when written and rot quietly. My fix is twofold. First, every fast-moving claim carries an explicit "current as of June 2026"-style stamp right in the text, so a reader can see exactly how fresh the fact is instead of trusting it blindly. Second, refreshing those stamps is now a recurring maintenance task rather than a one-time thing. A single pass already caught real drift: the frontier model lineup needed updating to the current Opus / GPT-5.5 / Gemini lineup, OpenTelemetry's GenAI semantic conventions were still experimental (not stable, as an earlier draft implied), and the FiveM ecosystem's "Overextended" had been renamed to CommunityOx. The lesson: date your claims so the rot is visible, and treat the dates as a checklist. **The site started out written for an audience of one.** The first versions were personalized to me — examples referenced my Claw World RP server by name, the Linux sandbox had a hardcoded username from my own setup, and asides assumed you were, well, me. Great for a private reference, useless as a public site. Before launch I did a de-personalization pass: pulled the RP-server references, renamed the Linux sandbox's example user (and updated the challenge checkers that validated against that username — easy to miss, would have broken the exercises), and rewrote the personal asides into something a stranger could follow. If you build a tool for yourself and later want to share it, budget real time for stripping out the assumptions you didn't know you'd baked in. **Deep links break on static hosts unless you tell the host about your router.** Because each atlas is a client-side route, hitting `atlases.vercel.app/db` directly — or refreshing on it — asks Vercel for a file that doesn't exist on disk, which is a 404. The fix is the SPA rewrite in `vercel.json` that points every unknown path back at `index.html` and lets React Router sort it out. It's a one-liner, but it's invisible until someone shares a deep link and it 404s for everyone who clicks. Atlases is live and public at [atlases.vercel.app](https://atlases.vercel.app/), with the source on GitHub at [denrod25-del/atlases](https://github.com/denrod25-del/atlases) under an MIT license. Sixteen atlases, 192 chapters, real in-browser sandboxes for SQLite, CPython, C/C++, JavaScript, a shell, Lua, and PromQL, a quiz per chapter, troubleshooting trees, and dated facts you can audit. No signup, no ads, no tracking — just open a topic and start reading. This is another entry in the series on projects built this way. The running list is on the [projects page](https://dev.to/projects/).