Padhne se pehle, product ko ek baar use karke dekho
Neeche har chapter ek asli product banate waqt liya gaya decision hai. Jab tumne dekh liya ki yeh banata kya hai, tab yeh sab kaafi zyada samajh aata hai: home page pe ek topic likho aur doosri taraf se poori video nikalte dekho. Wahan das minute lagane se yeh page theoretical se practical ho jaata hai.
Card ki zarurat nahi, aur pehli script ka koi paisa nahi lagta.
Buniyaad
Yahin se shuru karo. Har ek cheez ek building block hai jo har project mein kaam aayegi, aur saath mein wahi code hai jo abhi is product mein yeh kaam kar raha hai.
The problem
Ek normal JavaScript variable value to rakh leta hai, par usse badalne se screen dobara draw nahi hoti. Box mein type karo, variable mein rakho, aur screen pe kuch nahi hota.
Why it happens
useState do cheezein deta hai: abhi ki value, aur usse set karne wala function. Setter ko call karna React ko batata hai ki "yeh badal gaya, dobara draw karo". Bas itna hi idea hai, aur lagbhag har interactive component yahin se shuru hota hai. Is codebase mein 74 files ise use karti hain.
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
Input wahi dikhata hai jo state kehti hai, aur type karne se state update hoti hai. Yeh loop - state screen banati hai, events state badalte hain - ek line mein React hai. Dhyan do ki button bhi wahi state padhkar decide karta hai ki woh chalne layak hai ya nahi: ek hi sach, do jagah use ho raha hai.
Try it yourself
Ek box banao jo batata ho ki tumne kitne characters type kiye. Phir wahi cheez normal variable se karke dekho aur dekho ki kuch nahi hota.
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 | Screen pe badalne wali cheez yaad rakhna | Har jagah. Topic box, har toggle, har khulne-band hone wala panel. |
| useEffect | 72 | React ke bahar ki duniya se baat karna | Render ka progress poochna, archive fetch karna, Escape key sunna. |
| useCallback | 33 | Do renders ke beech function ki identity same rakhna | Child panels ko diye gaye handlers, taaki woh bevajah dobara render na hon. |
| useRef | 30 | Yaad rakhna, bina dobara render kiye | Ek baar wale guards ("yeh sirf ek baar default karo"), aur DOM node pakadna. |
| useMemo | 7 | Mehngi cheez baar baar calculate karne se bachna | Lambi archive list ko search box mein type karte waqt filter aur group karna. |
| useContext | 2 | Har level pe props bheje bina data share karna | Kaun signed in hai. Ek AuthContext, jise koi bhi component padh sakta hai. |
| useLayoutEffect | 1 | Browser ke paint karne se PEHLE page naapna | Share dropdown ki position. useEffect se woh visibly jump karta dikhta. |
| useSearchParams | 1 | State ko URL mein rakhna | Dashboard tab: ?tab=history refresh ke baad bhi rehta hai aur share ho sakta hai. |
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 aur scale
Ek hi build har jagah kaise chalta hai, kaam queue kaise hota hai, aur traffic aane par asli mein hota kya hai. Patterns, humare servers ka naksha nahi.
Security
Woh galtiyan jinse product breach hote hain, aur woh structural aadatein jo un galtiyon ko karna mushkil bana deti hain.
AI jo khud ko sambhaalta hai
Do system jo zyadatar products mein hote hi nahi: production errors jo pull request ban jaate hain, aur ek product jo user feedback se seekhta hai bina koi model dobara train kiye. Patterns, humara internal setup nahi.
Mehngi seekhein
Woh bugs jo production tak pahunch gaye. Har ek ne asli time ya paisa liya, aur inmein se koi bhi kisi tutorial mein nahi milega.
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.
Imaandar 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.