Coding, Breaking, Exploring
A 21 year old’s attempt to learn coding from building and breaking things.
01 : Js Foundation
Blog Summary: The bedrock of the course. Covers why JS exists, how it runs, and the async programming model that makes JS unique and powerful for web development. 1. Why Programming Languages? [SOURCE — COURSE MATERIAL] Computers understand only binary (0s and 1s). Languages exist so humans can write readable instructions that compilers/interpreters then convert to binary. Human-written code → Compiler → 01010101 → CPU executes The flow: Developer writes high-level code (JS, Python, C++) A compiler/runtime converts it to machine code CPU executes machine code from RAM SSD holds the program at rest; RAM holds it while running 2. Compiled vs Interpreted (Scripting) Languages [SOURCE — COURSE MATERIAL] ...
02 : Node.js, HTTP Servers, Express & Git
Blog Summary: Moves from JS fundamentals to building real backend servers. Covers the Node.js runtime, the HTTP protocol, creating servers with Express, testing with Postman, and version control with Git. 1. JavaScript Runtimes [SOURCE — COURSE MATERIAL] ECMAScript — The Spec ECMAScript defines the core language: var, const, let, function, Date, setTimeout, etc. It’s the specification, not the implementation. Browser JS = ECMAScript + Browser APIs Browser JS: ├── ECMAScript (core language) ├── setTimeout / setInterval ├── fetch (HTTP requests) ├── document (DOM access) └── localStorage Node.js = ECMAScript + Backend APIs Node.js: ├── ECMAScript (core language) ├── setTimeout ├── fs (file system) ├── http (create HTTP servers) └── path, crypto, os... How Node.js Was Born [ADDED — IMPORTANT BACKGROUND] ...
03 : Middlewares, Authentication, Zod & MongoDB
Blog Summary: Adds production patterns to the Express server: middleware chains, JWT-based auth, schema validation with Zod, and persistent storage with MongoDB via Mongoose. 1. Middlewares [SOURCE — COURSE MATERIAL] The Problem Every route needs auth checks, input validation, logging. Repeating these in every handler is messy. // BAD — repeated logic in every route app.get("/kidney", (req, res) => { // auth check here // input validation here // actual logic here }); app.put("/kidney", (req, res) => { // auth check here (copied!) // input validation here (copied!) // actual logic here }); What Is Middleware? A function that runs between the request and the route handler. Has access to req, res, and next. ...
04 : DOM, Why Frontend Frameworks & MongoDB Deep Dive
Blog Summary: Transitions from backend to frontend. Explores raw DOM manipulation, its limitations, and why React exists. Also covers MongoDB/Mongoose in depth with a complete full-stack data model. 1. Browser JavaScript & the DOM [SOURCE — COURSE MATERIAL] What Is the DOM? Document Object Model — the browser’s in-memory representation of a web page as a tree of objects. HTML File: DOM Tree: <html> document <body> └── html <div id="app"> └── body <h1>Hello</h1> └── div#app <button>Click</button> ├── h1 ("Hello") </div> └── button ("Click") </body> </html> JavaScript can read and modify this tree in real-time → dynamic web pages. ...
05 : React Deep Dive
Blog Summary: Mastering React’s core mental model — state, components, JSX, and re-rendering. Understanding how to structure apps and why React re-renders when and how it does. 1. The React Mental Model [SOURCE — COURSE MATERIAL] Every frontend app has two things: State Components ───── ────────── The data The view function (what changes) state → rendered HTML Key insight: You never manipulate the DOM directly. You update state. React figures out the DOM. ...
06 : React Hooks: useEffect, useMemo, useCallback, useRef
Blog Summary: Deep dive into React’s hook system. Covers when and why each hook exists, common pitfalls, reconciliation internals, and performance optimization patterns. 1. Reconciliation — How React Updates the DOM [SOURCE — COURSE MATERIAL] The CA Analogy You = developer (provide state/data) CA (Chartered Accountant) = React reconciler Bank statements = state Tax filing = DOM update React receives your updated state and calculates what changed in the DOM — it doesn’t re-create everything. ...
07 : Routing, Prop Drilling, Context API & Recoil
Blog Summary: Covers client-side routing for SPAs, solves the prop drilling problem with Context API, and introduces Recoil as a production-grade state management solution. 1. Routing in React [SOURCE — COURSE MATERIAL] Jargon First Single Page Application (SPA): Browser downloads ONE HTML file React controls what to show based on URL No full page reloads when navigating Client-Side Bundle: All your React code compiled into JS files Browser downloads once, runs locally Client-Side Routing: ...
08 : Mastering Redux Toolkit
Welcome to the big leagues. If you’ve been following along, we’ve solved the prop-drilling problem using the Context API, and we even looked at Recoil to prevent unnecessary re-renders. So right now, a very valid question is probably popping up in your head: “If Recoil and Context API solve my problems, why on earth am I learning Redux?” Let’s clear that up before we write a single line of code. ...
09 : Custom Hooks - Write Once, Use Everywhere
Blog Summary: React’s built-in hooks are great, but the real superpower is building your own. This covers custom hooks from scratch - data fetching, browser APIs, performance patterns, and the SWR library. By the end you will have a solid collection of hooks you can drop into any project. So we have been through useState, useEffect, useMemo, useCallback, useRef. Those are all hooks React ships with. And honestly, they cover a lot. ...
10 : TypeScript - JavaScript But It Yells at You First
Blog Summary: JavaScript is great until your app crashes at 2am because someone passed a string where a number was expected. TypeScript fixes that. This post covers TypeScript from the ground up - types, interfaces, generics, enums, tsconfig, and how to actually use all of this in real code. By the end you will build a fully typed REST API with Express. So I have been writing JavaScript for a while now. And at some point the codebase grew big enough that I started getting these bugs that should never exist. Like calling .toUpperCase() on something that turned out to be undefined at runtime. Or a function expecting an object with a name field but someone passing in just a string. These are not logic bugs. They are type bugs. And TypeScript is specifically designed to catch them before your code even runs. ...