{"slug": "how-i-keep-a-living-system-map-of-mam-van-every-change-before-after", "title": "How I keep a living system map of Mầm Văn — every change, before & after", "summary": "Vũ Xuân Toàn, a developer and indie maker from Bắc Ninh, Vietnam, built a living system map for Mầm Văn, his React/TypeScript/Supabase/Gemini AI literature-learning platform for Vietnamese middle-school students. The map covers 262 nodes spanning every screen, engine and flow, links each node to the exact code files and functions implementing it, and is verified automatically against the codebase. Map versions are archived immutably, so each change that touches a flow gets before-and-after views for comparison.", "body_md": "Hi, I'm **Vũ Xuân Toàn (Vu Xuan Toan)**, a software developer and indie maker from Bắc Ninh, Vietnam, and the founder of Vu Xuan Toan Tech. In my [intro post](https://dev.to/vut08905/hello-im-vu-xuan-toan-vu-xuan-toan-a-software-developer-indie-maker-from-vietnam-5bko) I mentioned **Mầm Văn** — the literature-learning platform I'm building for Vietnamese middle-school students (React, TypeScript, Supabase, Gemini AI). Today I want to share the part of the project I'm most proud of, because it isn't a feature for users — it's how I keep the whole system *understandable* while it changes every week.\n\nMầm Văn has two big portals (teacher and student), an AI content studio, a question bank, XP and mastery engines, a knowledge tree, grading workflows, notifications, an admin area… After a few months of intense building, \"how does this all connect?\" stopped being a question I could answer from memory.\n\nSo I built a **complete map of every flow in the system** — 262 nodes covering every screen, every engine, and the relationships between them (for example: *publishing a lesson → notifies students*, or *rejecting a gift request → refunds the student's total XP wallet*). Every node also lists the exact code files and functions that implement it, verified automatically against the codebase.\n\nThe map only stays true if it can never drift. So I work under one strict rule:\n\nYou can see both, live:\n\nThe part I like most: whenever a change modifies a *flow*, the history page automatically gets two buttons — **\"flow BEFORE this change\"** and **\"flow AFTER this change\"**. Every version of the map is archived immutably, so I can reopen exactly how the system looked before any change and compare. When I recently removed an AI status bar from the question bank, the before-map still shows its node in the tree; the after-map doesn't. That makes design review honest: nothing about the system's shape is ever lost or misremembered.\n\nBecause an indie maker's scarcest resource isn't code — it's *clarity*. The map has already caught wrong assumptions before I wrote a line of code, and it lets anyone (a collaborator, a teacher using the platform, future me) understand a fairly complex product in minutes.\n\nIf you build long-lived side projects, I'd genuinely recommend stealing this workflow: one living map, updated in the same commit as the code, with archived before/after versions.\n\n—\n\nI'm Vũ Xuân Toàn. My home on the web is [vuxuantoan.me](https://vuxuantoan.me), my code lives at [github.com/vut08905](https://github.com/vut08905), and Mầm Văn itself is live at [mamvan.vercel.app](https://mamvan.vercel.app). Say hi!", "url": "https://wpnews.pro/news/how-i-keep-a-living-system-map-of-mam-van-every-change-before-after", "canonical_source": "https://dev.to/vut08905/how-i-keep-a-living-system-map-of-mam-van-every-change-before-after-5f79", "published_at": "2026-10-20 18:06:45+00:00", "updated_at": "2026-10-20 18:18:22.905936+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "ai-products"], "entities": ["Vũ Xuân Toàn", "Mầm Văn", "Vu Xuan Toan Tech", "Supabase", "Gemini", "React", "TypeScript"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/how-i-keep-a-living-system-map-of-mam-van-every-change-before-after", "markdown": "https://wpnews.pro/news/how-i-keep-a-living-system-map-of-mam-van-every-change-before-after.md", "text": "https://wpnews.pro/news/how-i-keep-a-living-system-map-of-mam-van-every-change-before-after.txt", "jsonld": "https://wpnews.pro/news/how-i-keep-a-living-system-map-of-mam-van-every-change-before-after.jsonld"}}