Practice — Learn the Architecture by Doing
This is the hands-on track everyone takes. The rest of the Architecture section is reference — read it to look things up. This Practice track is the guided path through that reference: it tells you what to read, in what order, and what to go change in the real code.
Whether you just finished Frontend Foundations or you're an experienced dev who skipped it, you land here. It gets you productive in the AquaGen web application by having you set it up, make your first local commit, and make a few small changes to see how the pieces connect.
If React fundamentals feel shaky, do the Frontend Foundations track first — it's fast and makes this much easier.
Instead of teaching React, each page points you at the real architecture docs (the other pages in this section) and gives you a task on the actual codebase, so you learn by tracing and changing real code rather than reading in the abstract.
mainEverything in this track happens on your own local branch. Make changes, commit them
locally, run the app, and see what happens — but do not push to main. This is for
learning; shipping real work comes later.
Prerequisites
- Solid React fundamentals (components, hooks, context, routing, data fetching).
- Comfort with Git, branches, and pull requests.
- Repo access to
Fluxgentech/aquagen_web_appp— if you don't have it yet, that's your first task on the next page.
What you'll cover
| Page | Focus |
|---|---|
| 1. Setup & monorepo | Clone, install, run locally; understand the Nx apps/ + libs/ layout |
| 2. Tech stack & the apps | React 19 / MUI 7 / React Router 7 / TS / Axios; the five apps + Module Federation status |
| 3. Routing & state | Routes, permissions, and how global/feature state works |
| 4. Components & API | The shared component library and the Axios/JWT API layer |
| 5. Domain, conventions & first changes | Standard Categories model, naming conventions, deployment — then a few changes locally |
How to use this track
- Keep the Web Application docs open in a second tab — this track links directly into them.
- Have the repo cloned and running so you can verify each concept in the actual code.
- Do every "Your task" — they're deliberately small and designed to force you into the right files.
Ready? → Setup & monorepo structure