Code is text that tells a computer what to do. That's it. Every app, website, and game is just text files with instructions.

When you write console.log("Hello"), you're saying: "Computer, display the word Hello on screen."

The computer reads your instructions top to bottom, one line at a time, like reading a recipe step by step.

Why JavaScript?

JavaScript runs in every web browser. It's what makes websites interactive. Your apps (Centsable, Adulting Academy, ATLAS) are all built with it. It's the language of the web.

A variable stores data so you can use it later. Instead of typing the same value everywhere, you store it once and reference it by name.

Three ways to create variables:

let age = 30; — Can be changed later (most common)

const name = "Jamal"; — Cannot be changed (use for things that stay the same)

var old = true; — The old way, avoid this

In Your Apps

In auth.js: const token = jwt.sign({userId}, SECRET) — the token is stored in a variable so it can be returned to the browser.

Every value in JavaScript has a type. The type determines what you can do with it.

"Hello" — String (text, always in quotes)

42 — Number (integers and decimals)

true / false — Boolean (yes/no, on/off)

null — Null (intentionally empty)

undefined — Undefined (exists but no value assigned yet)

Math Operators

+ - * / % (remainder) ** (power)

Comparison Operators (return true/false)

=== equal, !== not equal, > < >= <=

Logical Operators

&& AND (both must be true), || OR (at least one true), ! NOT (flips true/false)

Conditionals let your code make decisions. The code checks if something is true, then runs different code based on the answer.

This is how auth.js works: if (passwordMatches) { return token } else { return error }

for loops run a fixed number of times. while loops run until a condition is false.

Every time BLOOM's brain cycles through 35 agents — that's a loop. Every time Centsable renders 16 domain cards — that's a loop.

A function is a reusable block of code. You define it once, then call it whenever you need it.

Functions can take inputs (parameters) and return an output (return value).

Every Netlify Function (auth.js, data.js, penny.js) IS a function — it takes a request as input and returns a response as output.

An array is an ordered list of values. Arrays use square brackets [] and items are separated by commas.

Index starts at 0, not 1. The first item is array[0].

An object stores data as key-value pairs inside curly braces {}.

Access values with object.key (dot notation) or object["key"] (bracket notation).

Array methods are functions that operate on every item in an array. They're the most powerful tools in JavaScript.

HTML = the structure of a webpage. Tags like <div>, <p>, <button> define elements.

DOM (Document Object Model) = the browser's live representation of the HTML. It's a tree of objects you can manipulate with JavaScript.

Your entire Centsable app is one HTML file. Every view, every quiz, every animation — all created by JavaScript manipulating the DOM.

CSS (Cascading Style Sheets) controls how elements look. Colors, sizes, spacing, layout, animations.

CSS Variables (var(--name)) are how this guide's dark mode works — one toggle changes every color at once.

Events fire when something happens: clicks, key presses, form submits, page loads, scrolls.

You listen for events with element.addEventListener("click", handler).

Every button in your apps uses events. The "Run" button on this page? onclick="runCode('m13')" — that's an event handler.

DOM manipulation is how single-page apps work. Instead of loading new pages, you create, modify, and remove elements with JavaScript.

This is how Centsable's showView() works — it doesn't load a new page, it hides one div and shows another.

JavaScript is single-threaded — it does one thing at a time. But it can START tasks and come back to them later. This is called asynchronous code.

A Promise is a placeholder for a future value. It's either pending, resolved (success), or rejected (error).

async/await makes Promises readable. await pauses until the Promise resolves.

An API (Application Programming Interface) is a URL that accepts requests and returns data.

fetch() is JavaScript's built-in way to call APIs. It returns a Promise.

Every interaction between your frontend and backend is a fetch call. Browser fetches /.netlify/functions/auth, server responds with JSON.

try { risky code } catch (error) { handle it } — wraps code that might fail.

Without error handling, one bad API call crashes everything. With it, you show a friendly message instead.

Your Actual Stack

Frontend = HTML/CSS/JS in the browser (your PWA files)

Backend = Netlify Functions OR DigitalOcean Express.js

Database = Neon PostgreSQL (stores everything)

APIs = OpenAI, Stripe, Twilio, Coinbase, etc.

Request Flow: User Signs Into Centsable

That's it. Every app in your empire follows this exact same pattern.

Git tracks changes to your files. Every save point is a commit. Every separate line of work is a branch.

Key Commands

git status — What changed?

git add file.js — Stage changes for commit

git commit -m "message" — Save a snapshot

git push — Upload to remote (GitHub/Netlify/DO)

git pull — Download latest changes

git branch feat/new-thing — Create a parallel universe

Your Two Deployment Paths

Netlify (Centsable, AA, DQC, ATLAS, RCLL): git push triggers auto-deploy. Files in public/ become a website. Files in netlify/functions/ become serverless APIs.

DigitalOcean (MarketSapien): doctl apps create-deployment builds a Docker container and deploys it. Always-on server running Express.js.

The BLOOM Empire Architecture

Every Concept You Learned, In Action

Variables — Environment variables store API keys

Functions — Every Netlify Function IS a function

Objects — Every database row, every API response

Arrays — Lists of students, modules, agents

Async/Await — Every database query, every API call

Events — Every button click, every webhook

Error Handling — Every try/catch in your functions

The Full Stack — Frontend + Backend + Database + APIs

You built all of this. Now you understand HOW it works.

Before you can write code, you need to read code. Most of your time as a developer is reading, not writing. Here's how to decode any code you see.

The 4-Step Reading Method

1. Find the entry point — Where does execution start? In a Netlify Function it's exports.handler. In a browser it's the <script> tag or DOMContentLoaded.

2. Follow the data — What comes in? What goes out? Trace the input through each transformation.

3. Identify patterns — Is this a loop? A conditional? A function call? An API request?

4. Read the error — Error messages tell you exactly what's wrong and where. The line number is your GPS.

Common Error Types

The Process: Blank Screen to Working Code

1. Define the goal in plain English — "I need a function that takes a list of students and returns the ones below 50%"

2. Identify the inputs and outputs — Input: array of student objects. Output: filtered array.

3. Write the skeleton — Function signature, parameter names, return statement.

4. Fill in the logic — One line at a time. Run after each change.

5. Test edge cases — What if the array is empty? What if all students pass?

The Founder-Engineer Model

You are NOT just a coder. You are a technical founder who commands AI to build at 10x speed. Your job:

Writing Effective Commands

Bad prompt: "Fix the login" — too vague, AI guesses wrong

Good prompt: "In auth.js, the login function returns 500 when the user doesn't exist instead of 401. The issue is line 23 — user.passwordHash crashes when user is null. Add a null check before the password comparison."

The SPEC Framework for AI Commands

Situation — What file, what function, what's the current state

Problem — What's wrong or what's missing

Expectation — What the result should look like

Constraints — What NOT to change, performance limits, patterns to follow

Real Commands That Work

Agent Clusters: Parallel AI Teams

One AI agent is powerful. Multiple agents working in parallel on non-overlapping files is an army. This is how you built your entire empire:

What IS an AI Agent?

An agent is an AI with a specific job, tools to do it, and rules about when to act. It's not just a chatbot — it can read databases, call APIs, send emails, and make decisions.

BLOOM's 3-Tier Hierarchy

Agent Communication: The Bus Pattern

Agents don't talk to each other directly. They publish signals to a shared bus. Other agents subscribe to signals they care about.

agentBus.publish("venture_revenue", { app: "Centsable", amount: 500 })

agentBus.subscribe("venture_revenue", "BooksAgent", handler)

Building Your Own Agent

Every agent needs 4 things:

Your Actual AI Costs

The Cost Hierarchy: When to Use What

Your Infrastructure Math

Revenue vs. Cost: The Math That Matters

Your burn: ~$9,563/month (personal expenses). Your infrastructure: ~$35/month.

The infrastructure is NOT your problem. Getting to revenue is. One MarketSapien subscription at $14.99/mo pays for your entire cloud infrastructure.

The Technical Founder Stack

Your Daily Workflow

Morning: Check ATLAS World dashboard. What signals fired overnight? Any revenue events?

Build Session: Pick the highest-priority task. Write a SPEC command. Launch agent(s). Review output.

Revenue Focus: Every build session should move one app closer to money. If it doesn't generate or enable revenue, deprioritize it.

Evening: BLOOM runs autonomously. Check Telegram for overnight reports.

The Commands You'll Use Most

What You Learned (27 Modules)

Foundations (1-10): Variables, types, operators, conditionals, loops, functions, arrays, objects, array methods — the building blocks of all code.

Browser (11-14): HTML, CSS, DOM, events — how your PWAs work.

Real World (15-21): Async, APIs, errors, full stack, git, deployment, your architecture.

Intensive (22-27): Debugging, writing from scratch, commanding AI, agent systems, economics, this playbook.

You are a technical founder who commands AI armies to build empires. Go make money.

A string is a sequence of characters. Template literals — backtick strings — let you embed a value with ${...} instead of gluing pieces with +, which is easier to read and much harder to get wrong.

Worked example

const name = "Ada";
console.log(name.length);              // 3
console.log(name.toUpperCase());       // "ADA"
console.log(`Hello, ${name}!`);        // "Hello, Ada!"

Scope is the region where a name is visible. An inner function can see its outer function's variables, and it keeps seeing them even after the outer function has finished. That surviving connection is a closure — it is how a function can remember something between calls.

Worked example

function makeCounter() {
  let count = 0;             // lives in makeCounter's scope
  return function () {
    count = count + 1;       // the inner function REMEMBERS count
    return count;
  };
}
const next = makeCounter();
console.log(next());         // 1
console.log(next());         // 2  — count survived

Read a field with element.value. Validate before you act. Call event.preventDefault() on submit so the browser does not reload the page and throw your work away.

Worked example

const value = "  ada@example.com  ";
const cleaned = value.trim();          // remove stray spaces first
if (cleaned === "") {
  console.log("Please enter an email.");
} else if (!cleaned.includes("@")) {
  console.log("That does not look like an email.");
} else {
  console.log("Thanks! We saved " + cleaned);
}

display:flex arranges children along one axis; justify-content positions them along it and align-items across it. display:grid defines explicit tracks with grid-template-columns. Centring, famously hard in old CSS, is two lines in either.

Worked example

/* one row, evenly spread, vertically centred */
.toolbar { display: flex; justify-content: space-between; align-items: center; }

/* three equal columns that wrap on small screens */
.cards   { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

JSON is text that describes objects and arrays. JSON.parse turns text into values you can use; JSON.stringify turns values back into text. Optional chaining (?.) reads a nested field without crashing when part of the path is missing.

Worked example

const text = '{"data":{"amount":"64821.37","currency":"USD"}}';
const obj  = JSON.parse(text);
console.log(obj.data.amount);        // "64821.37"
console.log(obj.data.symbol);        // undefined — missing, but no crash
console.log(obj.meta?.page);         // undefined — ?. stops the crash

localStorage.setItem(key, text) saves; getItem(key) reads and returns null when nothing is there. Because it stores text only, wrap objects with JSON.stringify and unwrap with JSON.parse.

Worked example

const progress = { module: "m33", done: true };
const asText = JSON.stringify(progress);   // '{"module":"m33","done":true}'
const back   = JSON.parse(asText);         // an object again
console.log(back.module);                  // "m33"
console.log(JSON.parse("null") === null);  // true — "nothing saved yet"

Debugging is narrowing. Reproduce it reliably, read the message and the stack, then bisect — check a value halfway through and decide which half holds the fault. Repeat until the space is one line. console.log is a real debugger; a breakpoint is a faster one.

Worked example

function averageOf(numbers) {
  let total = 0;
  for (const n of numbers) total = total + n;
  return total / numbers.length;
}
console.log(averageOf([2, 4, 6]));    // 4   — good
console.log(averageOf([]));           // NaN — a bug: 0 / 0
// Narrowing: total is 0, length is 0, so the fault is the empty case.

A test gives an input, states the expected output, and reports pass or fail. That is the whole idea — frameworks add convenience, not meaning. Test behaviour, not implementation, so the test survives a rewrite.

Worked example

function check(label, actual, expected) {
  const ok = actual === expected;
  console.log((ok ? "PASS " : "FAIL ") + label + "  got: " + actual);
  return ok;
}
check("2 + 2", 2 + 2, 4);          // PASS
check("empty average", 0, 0);      // PASS

Read a signature before an example: what goes in, what comes out, what is optional. Then check the edge notes — what happens with no arguments, or with the wrong type. Prefer the primary source: MDN and the official language docs over an aggregator.

Worked example

// A signature tells you the contract before you write a line:
//   arr.slice(start, end)  ->  a NEW array, from start up to but NOT including end
const letters = ["a", "b", "c", "d"];
console.log(letters.slice(1, 3));   // ["b","c"]  — end is excluded
console.log(letters);               // unchanged — slice does not modify