aipath: a 30-lesson AI course built as a React app, with the demos as the syllabus

The gap aipath is aiming at: people who read AI news and cannot build anything

Most introductory AI material picks one of two shapes. Either it is a news feed, which leaves you able to repeat claims about transformers without knowing what a token is, or it is a textbook, which opens with partial derivatives and loses the reader in week one. aipath takes a third position. The README describes it as "a from-scratch AI course designed for absolute beginners" spanning six stages and thirty lessons, with each lesson around twenty minutes and, in the project's own phrasing, barely touching math. The stated trajectory runs from "AI-news bystander" to "AI-app builder." That is a specific audience: someone who has used a chat model, has heard the words RAG and agent, and wants the mental model plus enough code to assemble something. The final stage is the tell. Lessons 26 to 30 cover calling APIs, local deployment, RAG in practice, evaluation and safety, and a closing lesson. The course is not trying to produce researchers. It is trying to produce people who can wire an LLM into an application and know where the safety lines sit.

Six stages, thirty lessons, and one fixed page template

The curriculum is laid out in the README as a table and, more importantly, encoded in src/data/lessons.js, which the README calls the "single source of truth" for the catalog metadata. Stage 1 covers intuition (the three circles, how machines learn, a single neuron, gradient descent, data and overfitting). Stage 2 covers backpropagation, CNN, embedding, attention, and transformer. Stage 3 handles tokens, pretraining, SFT/RLHF, temperature and sampling, and scaling laws. Stage 4 moves to prompt engineering, context, RAG, function calling, and agents. Stage 5 covers diffusion, multimodality, reasoning models, MCP, and the model landscape. Stage 6 is the build-it stage. Every lesson, per the README, follows one structure: core concept, then an interactive demo where you tune parameters, then common pitfalls, then a mini exercise. A fixed table of contents sits on the left of each lesson page. That uniformity is a design decision with a cost. It makes the site predictable to navigate and cheap to extend, but it also means a lesson on scaling laws and a lesson on prompt engineering get the same four-part treatment, whether or not the material wants it. The README does not say how the template flexes for lessons that resist a slider-based demo.

How a lesson actually renders: data catalog, lazy registry, visualization controllers

The architecture is a single Vite entry (index.html) mounting src/main.jsx, with App.jsx holding a route table that the README describes as "data-driven, auto-registered from lessons." Home.jsx renders the philosophy, learning path, and usage sections from the same catalog data. LessonPage.jsx is the shell plus what the README calls a "lazy registry of 30 lessons," so L01.jsx through L30.jsx load on demand rather than in one bundle. Shared UI comes from components/ui.jsx, which exports named primitives: Pill, Dots, Lsec, DemoPanel, Chips, FlipCard, SliderRow, QuizItem. There is also LossChart.jsx, a Recharts loss curve. The interesting layer is src/lessons/viz/, described as "framework-agnostic visualization controllers." Five are named: NeuralNetViz.jsx for the home-page canvas animation, gradientDescent.js for a three.js 3D descent, cosmos.js for a three.js word-vector starfield, convScan.js for a CNN convolution scan on canvas, and diffusion.js for denoising and CFG on canvas. Putting these outside the lesson components is the right call. A three.js scene has its own lifecycle and its own render loop, and keeping it out of the React tree avoids fighting the reconciler over the canvas. The README also notes the repo retains a legacy/ directory holding the original 30-lesson static HTML site as a migration reference, which suggests the React version is a port rather than a greenfield build.

Running it locally: four npm scripts and a port number

The README gives a four-command workflow. npm install installs dependencies. npm run dev starts the dev server with hot reload on http://localhost:5173. npm run build produces a production build in dist/. npm run preview serves that build locally on http://localhost:4173. That is the whole documented setup, and it is standard Vite. There is no environment file, no API key configuration, and no backend described in the README. That matters for stage 6, which the README says has you "call an LLM API" and "run an open-source model on your own machine (Ollama)." The repository as documented is a frontend. If the stage 6 lessons require a live API key or a local Ollama daemon, the README does not say where those credentials or endpoints are configured, and a reader should check the L26 to L30 source before assuming the exercises run out of the box. The live site at aipath.buynao.com is described as requiring no signup and making every concept playable, which is the lower-friction path for evaluating the content.

The AI-generated provenance is disclosed, and it is the thing to weigh

The README states plainly that the course content, copy, interactive demos, and frontend code were generated by Claude Fable, that the 30 lessons were "polished word by word," that each visualization was implemented lesson by lesson and verified in a headless browser, and that the design system and React architecture were produced end to end by AI. This is unusually direct disclosure and it should shape how you read the repository. The status checklist confirms all six stages are migrated and pass the production build, and that complex interactions in three.js, canvas, and declarative SVG were verified lesson by lesson in a headless browser. Headless verification establishes that a canvas renders without throwing. It does not establish that the gradient descent scene teaches gradient descent correctly, or that the diffusion demo's classifier-free guidance slider produces a curve a beginner will interpret properly. Treat the code as sound and the pedagogy as unverified by any external reviewer, because the README names none. For a course whose entire premise is intuition transfer, that is the gap that matters most.

Where aipath is the wrong tool

The format has a hard ceiling. Thirty twenty-minute lessons with minimal math cannot get a reader to the point of fine-tuning a model, debugging a training run, or reading a paper. If your goal is to work on model internals, the README's own framing excludes you: the course stops at calling APIs, running Ollama locally, and building a RAG knowledge base. The interactive-demo approach also has a specific failure mode. A slider that reshapes a top-5 token distribution teaches the effect of temperature, but the README's description of the hero animation (turn the temperature, watch the candidates reshape from focused to wild) is a demonstration of an outcome, not of the sampling algorithm behind it. Readers who learn from parameter-twiddling often cannot reproduce the reasoning without the widget in front of them. The bilingual commitment is a second constraint worth naming. The README claims all 30 lesson bodies, demos, and quizzes exist in both Chinese and English with an instant language switch and no reload. Maintaining two parallel copies of every lesson body across thirty lessons is a real ongoing cost, and the README does not describe any mechanism that keeps the two versions in sync. Divergence over time is the likely outcome unless the build checks for it.

What to compare it against, and why the comparison is not close

The obvious alternative is a video course or a written textbook on the same material. The difference is not production quality, it is what the medium permits. A video explains gradient descent by showing a curve and a ball rolling down it; you watch, you nod, you move on. aipath's gradientDescent.js puts a three.js scene in the lesson and, per the README, has you tune the parameters yourself. That is a genuine difference in approach: the demo is the explanation, not an illustration of one. The trade-off is that a demo cannot deliver the density a textbook can. Thirty lessons at twenty minutes is roughly ten hours of material. A standard deep learning text covers backpropagation alone in more depth than aipath's single lesson L06. So the two are not substitutes. aipath is the on-ramp; the textbook is what you pick up after lesson 10 if you discover you want the math. The README is candid about this, framing the course as building a mental image first so that "the terms and math have somewhere to land." That is a coherent position, not a compromise.

Maintenance, licence, and what the repository does not tell you

On maintenance: the repository is not archived and the last push is recent, but no releases were retrieved, so there is no versioned artifact to track and no changelog to read. Upgrading means pulling the branch. The dependency surface is a Vite + React app with three.js and Recharts, which is a normal maintenance load for a frontend, but the thirty lesson components and five visualization controllers are the parts that will need attention when three.js or React majors move. The legacy/ directory is dead weight you can delete once you trust the port. On licensing: the README carries no licence identifier and the repository metadata does not supply one either. That is a real problem for anyone who wants to reuse the lesson content, fork the demos into their own teaching material, or deploy a modified copy. Without a licence file, the default is that all rights are reserved, so the practical move is to open an issue asking the maintainer to add one before you build on it. Nothing here is legal advice, but the absence of a licence is the single most concrete blocker in the repository, and it is easy to miss because everything else about the project is documented carefully.

Editorial conclusion

aipath fits a reader who wants the shape of modern AI without linear algebra: work through stages 1 to 5 on the live site, then read src/lessons/L26.jsx through L30.jsx before committing to stage 6. It is the wrong tool for anyone who needs to train or fine-tune a model, since the course stops at calling APIs and running Ollama. Verify three things first: the licence file in the repository root, whether the English and Chinese lesson bodies are truly parallel, and whether the stage 6 code is runnable as shipped or only descriptive.

Official sources

1. buynao/aipath on GitHub
2. Issues
3. Project website
4. README