cd /news/developer-tools/atlases-16-interactive-learning-guid… · home topics developer-tools article
[ARTICLE · art-49969] src=dev.to ↗ pub= topic=developer-tools verified=true sentiment=↑ positive

Atlases: 16 Interactive Learning Guides That Run Code in Your Browser

Atlases is a learning site featuring 16 interactive technical guides that run real code in the browser, including SQLite, CPython, and C++ compilers. Built by a developer using Claude as a pair programmer, the site offers 12-chapter deep dives on topics like databases, networking, and AI/LLM engineering, with no signup or tracking. The project is deployed on Vercel and uses Vite, React 18, and Tailwind for a lightweight stack.

read5 min views1 publishedJul 7, 2026

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, 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, 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, with the source on GitHub at 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.

── more in #developer-tools 4 stories · sorted by recency
── more on @atlases 3 stories trending now
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
Live at https://your-agent.zahid.host
Get free account → Pricing
from €0/mo · no card required
LIVE [news/atlases-16-interacti…] indexed:0 read:5min 2026-07-07 ·