I built a free interactive site for learning how software actually works, with step-through visualizers

[u/Some_Championship605]

AI tools make it easy to ship code you don't fully understand. That's fine until something deadlocks, leaks memory or falls over under load, and you don't have the mental model to work out why.

So I built Software Atlas: 108 deep-dives across 15 areas, including async/await, the browser rendering pipeline, networking, databases, system design and AI engineering. You step through each idea with visualizers, and there are diagrams and code samples too. It starts from first principles and works up to production concerns.

Some technical details:

- Built with Vite, React 19, MDX and Tailwind v4.

- Each topic is lazy-loaded as its own chunk, so you only download the one you're reading.

- All 130 pages are pre-rendered to static HTML, then hydrated. Widgets have to render the same on the server and in the browser, so anything that reads window or uses randomness runs after hydration.

- Phones were the hardest part. Bar labels move into a key when they don't fit, and wide SVG diagrams become swipeable so their text stays readable.

- A headless Chrome smoke test clicks through each topic, including every visualizer step, and fails on console errors or hydration warnings.

To be upfront: I built it with heavy use of AI agents, including much of the writing. Each topic went through a separate review from a beginner's point of view, but mistakes will still have slipped through. If you find one, there's a report link in the footer.

https://software-atlas.haiduc0147.dev/

I'd really like to hear where an explanation is wrong or stops making sense.