Before you dive in, go and use the thing
Every chapter below is a decision made while building one real product. It reads far better once you have seen what it produces: type a topic on the home page and watch a finished video come out the other end. Ten minutes there makes the rest of this page concrete.
No card needed, and the first script costs you nothing.
Foundations
Start here. Each one is a building block you will use in every project, explained with the code doing that job in this product right now.
The problem
A plain JavaScript variable can hold a value, but changing it does not redraw anything. Type into a box, store it in a variable, and the screen never updates.
Why it happens
useState hands you two things: the current value, and a function to set it. Calling the setter tells React "this changed, draw again". That is the whole idea, and almost every interactive component starts here. In this codebase, 74 files use it.
Real code from this product
const [topic, setTopic] = useState('');
<input
value={topic}
onChange={(e) => setTopic(e.target.value)}
placeholder="e.g. Why the sky is blue"
/>
<button disabled={!topic.trim()}>Generate script</button>What to take away
The input shows what state says, and typing updates state. That loop - state renders the screen, events update state - is React in one sentence. Note the button reads the same state to decide if it is usable: one source of truth, two places using it.
Try it yourself
Build a box that shows how many characters you have typed. Then try it with a plain variable instead and watch nothing happen.
Every React hook in this codebase
Counted across 74 components. The pattern worth noticing: the two simplest hooks do almost all the work, and the exotic ones appear once or twice for one reason each.
| Hook | Files | What it is for | Where we use it |
|---|---|---|---|
| useState | 74 | Remember something that changes on screen | Everywhere. The topic box, every toggle, every open/closed panel. |
| useEffect | 72 | Talk to the world outside React | Polling a render for progress, fetching the archive, listening for Escape. |
| useCallback | 33 | Keep a function identity stable between renders | Handlers passed down to child panels so they do not re-render needlessly. |
| useRef | 30 | Remember without causing a re-render | One-shot guards ("only default this once"), and holding a DOM node. |
| useMemo | 7 | Avoid recomputing something expensive | Filtering and grouping long archive lists as you type in the search box. |
| useContext | 2 | Share data without passing props down every level | Who is signed in. One AuthContext, read by any component that needs the user. |
| useLayoutEffect | 1 | Measure the page BEFORE the browser paints | Positioning the Share dropdown. With useEffect you would see it jump. |
| useSearchParams | 1 | Keep state in the URL | The dashboard tab: ?tab=history survives a refresh and can be shared. |
Also used: createPortal in 19 components (modals, dropdowns and toasts), which is not a hook but solves the same class of problem - getting out of a parent that clips you.
Docker & scale
How the same build runs everywhere, how work is queued, and what actually happens when traffic arrives. Patterns, not a map of our servers.
Security
The mistakes that get products breached, and the structural habits that make them hard to make.
AI that maintains itself
Two systems most products do not have: production errors that become pull requests, and a product that learns from user feedback without retraining a model. Patterns, not our internals.
Hard-won lessons
Bugs that reached production. Each cost real time or money, and none of them is in a tutorial.
What should we explain next?
This page grows from what readers ask for. Tell us what you are stuck on, or what was unclear above.
The honest stack list
React 18 with plain JavaScript (no TypeScript in this codebase), Tailwind for styling, ASP.NET Core 8 and C# on the server, Entity Framework Core over SQL Server, Hangfire for background jobs, FFmpeg for every frame of video, and a set of AI APIs for script, voice, images and motion. Nothing here is chosen to sound impressive - each piece is doing a job you can see in the product.
The most useful habit behind all of it: when something looks wrong, measure the actual output rather than trusting the log line. Most of the lessons above were found by opening a finished file, not by reading code.