Rebuilding My JavaScript Fundamentals, One Module at a Time

Why I went back to fundamentals

Most of my work is building and shipping full products — TrackPulse, MediaKing, InfoSysCS, ApexDv and the rest all involve React/Next.js, APIs, and production infrastructure. It's easy, at that altitude, to lean on framework conventions without ever re-examining the JavaScript underneath them. So I set aside time to work through a dedicated JavaScript curriculum end-to-end — no framework, no build tool doing the thinking for me — and committed every module to git as I finished it.

The repo isn't a product. It's 30-plus numbered modules, each a small, runnable exercise, tracked with commits like Day 1 Module 1, Day 3 Module 8, Day 6 Module 28 — a paper trail of exactly what I covered and when. The commit dates show the full pass happened over about three weeks (Oct 23 – Nov 11), and I later did a second, lighter pass (02. Javascript) revisiting the early modules — DOM, control flow, ES6 — as a refresher rather than first-time learning.

What the curriculum actually covers

The module list reads like a map of the JavaScript features that separate "I can write React components" from "I understand the language React is built on":

A concrete example: the same app, done unsafely and then safely

Modules 24 and 28 (Share_My_Place and Security) are the same small geolocation-sharing app, built twice. The first pass renders a place name straight from the URL query string into the page title:

// 24. Share_My_Place/src/MyPlace.js
const headerTitleEl = document.querySelector('header h1');
headerTitleEl.textContent = address;

textContent happens to be safe here — but the Security module rebuilds the same feature using innerHTML, the way a less careful implementation (or one that needs to render formatted HTML, not just text) might:

// 28. Security/src/MyPlace.js
import sanitizeHtml from 'sanitize-html';

const headerTitleEl = document.querySelector('header h1');
headerTitleEl.innerHTML = sanitizeHtml(address);

The point of rebuilding it wasn't to prove innerHTML is bad in the abstract — it's to internalize the specific moment where user-controlled input (a query parameter, in this case) crosses into the DOM, and to make sanitization a reflex rather than a code-review afterthought. That's the kind of lesson that's easy to nod along to in an article and much stickier when you've written the vulnerable version yourself.

Metaprogramming: understanding the tools before reaching for a library

Module 26 walks through Symbol, Reflect, and Proxy directly, without a library wrapping them:

const courseHandler = {
  get(obj, propertyName) {
    if (propertyName === 'length') return 0;
    return obj[propertyName] || 'NOT FOUND';
  },
  set(obj, propertyName, newValue) {
    if (propertyName === 'rating') return; // silently reject writes
    obj[propertyName] = newValue;
  }
};

const pCourse = new Proxy(course, courseHandler);
pCourse.rating = 5; // no-op, blocked by the trap

This is the exact mechanism behind Vue 3's reactivity system and behind ORMs that intercept property access to lazily load relations. Having built a get/set trap by hand makes reading (and debugging) that kind of library code dramatically faster, because "magic" behavior is no longer magic — it's a Proxy handler I can mentally trace.

Why this belongs in a portfolio

I don't present this repo as a product, and I'm not claiming to have invented these exercises — they follow Maximilian Schwarzmüller's JavaScript – The Complete Guide curriculum. What I think is worth showing is:

• Deliberate identification of gaps. Rather than assuming framework fluency implies language fluency, I went and checked, module by module.
• A traceable process. Every module is its own commit, so the progression is auditable rather than asserted.
• Security as a first-class module, not an afterthought. Rebuilding the same feature vulnerable-then-fixed is a more durable way to internalize XSS mitigation than reading about it once.
• Depth on primitives that most tutorials skip — Proxy, Reflect, generators, prototype chains — which are exactly the primitives that explain how the frameworks I use in client work actually behave under the hood.

Takeaway

Shipping products teaches you how to compose tools. Working through a language curriculum like this, commit by commit, is how I keep the layer underneath those tools from turning into a black box — which is what lets me debug the framework, not just the app built on top of it, when something goes wrong in a client's codebase.