A computer program or device that provides services, resources, or data to other programs (called clients) over a network. In web development, servers deliver things like files or data to your browser when you ask for them—like a waiter bringing food at a restaurant.
A way to run JavaScript on your computer (not just in the browser). It lets you build the “backend” or server side of websites.
📺 Learn More: Node.js Ultimate Beginner’s Guide in 7 Easy Steps
The “ask.” When your browser talks to a server, it sends a request (like asking for a webpage or some data).
The “answer.” After the server gets the request, it sends back a response (like the HTML, CSS, or data you asked for).
A style of programming where the server waits for events (like a request) and then reacts to them, just like addEventListener in the browser.
📺 Learn More: JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue
Short for Node Package Manager. A tool that helps you add extra code “packages” (like apps or helpers) into your project.
📺 Learn More: What is NPM, and why do we need it? - Tutorial for beginners
In programming, modules are self-contained units of code that can be imported and used in other parts of a program. They help organize code into logical, reusable pieces and enable better code organization, testing, and maintenance.
In JavaScript specifically, modules are chunks of code you can bring into your project. Example: Express is a module that helps you make a server.
Two ways to import/export modules in JavaScript:
1. CommonJS (Node.js style):
// File: util/helpers.js
const helloWorld = () => console.log('Hello World!');
const API_URL = 'https://api.example.com';
module.exports = { helloWorld, API_URL };
// File: main.js
const { helloWorld, API_URL } = require('./util/helpers');
2. ES6 Modules (Modern JavaScript):
// File: util/helpers.js
const helloWorld = () => console.log('Hello World!');
const API_URL = 'https://api.example.com';
const myMainFunction = () => console.log('Main function');
export { helloWorld, API_URL };
export default myMainFunction;
// File: main.js
import { helloWorld, API_URL } from './util/helpers.js';
import myMainFunction from './util/helpers.js';
📺 Learn More: JavaScript Modules in 100 Seconds
🔗 Learn More: Module Cheatsheet
A word game where players fill in blanks in a story with random words (like nouns, verbs, adjectives) without knowing the context. The result is usually a funny and nonsensical story! In our course, you’ll build a web application that creates Mad Libs stories using forms.
📖 Learn More: Mad Libs Format - Wikipedia
📺 Learn More: Mad Libs Gameplay Video
A popular module for Node.js that makes building servers and handling requests/responses much easier.
A “door number” on your computer where your server listens for requests. Example: http://localhost:3000.
📺 Learn More: What is a Port?
A shorter way to write functions in JavaScript. Example:
(req, res) => {
res.send("Hello!");
}
📺 Learn More: Arrow Functions - Beau teaches JavaScript
The address you type after the main website, like /about or /login. It tells the server what part you want.
📺 Learn More: Understanding Paths and Routes
A coding pattern where you use a variable to keep track of counts (like adding 1 in a loop). It’s often the first loop pattern students learn.
📺 Learn More: Understanding Counter Pattern
A way to put variables into strings using backticks (`). Example:
`Hello, ${name}!`
📺 Learn More: Understanding Template Literals
Special addresses (localhost or 127.0.0.1) that let you test a server running on your own computer.
📺 Learn More: Understanding Loopback URLs
📺 Learn More: What is an IP Address?
In programming, an event listener is a function or piece of code that waits for a specific event to occur and then executes a response. Event-driven programming allows programs to respond to user actions, system events, or other triggers as they happen.
In web development specifically, an event listener is code that waits for something to happen (like a button click or a request) and then runs a function in response.
Rules that decide where variables can be used. Example: let and const fix problems that older var variables had.
A shorthand if/else written in one line. Example:
let result = score > 10 ? "Win" : "Lose";
📺 Learn More: ? in NaN Seconds
A way to access object properties using square brackets. Example:
myDog["age"];
📺 Learn More: Understanding Bracket Notation
A piece of text inside quotes. Example: "Hello world".
The hidden “server side” of a website or app where data and logic live. Users don’t see this part.
A specific path on the server you can ask for. Example:
app.get("/cats", (req, res) => { ... });
The part of Chrome (and Node.js) that runs JavaScript by turning code into actions on the screen or server.
The syntax to create an array, using square brackets. Example:
let colors = ["red", "green", "blue"];
The number that tells you an item’s position in a list. Indexes start at 0. Example: in ["a", "b", "c"], "a" is index 0.
A coding pattern that uses the counter to move up or down a list, like scrolling through items in an app.
Ways to add new things to a list. Insert puts it at a chosen index, append puts it at the end. Example:
myList.push("new item"); // append
myList.splice(0, 0, "first"); // insert at top
🎵 Song: React Components Song
In programming, components are reusable pieces of code that encapsulate specific functionality and can be combined to build larger applications. They promote modularity, reusability, and maintainability by breaking complex systems into smaller, manageable parts.
In React specifically, components are the building blocks of React applications. Everything in React is made from components. They help organize code and keep programs from becoming too complicated by allowing you to break down complex UIs into smaller, reusable pieces.
A framework created by Facebook in 2013. It’s built on the idea of components and is one of the most popular tools for making modern websites.
A special syntax used in React. It looks like HTML but isn’t exactly the same. JSX must be used inside React components.
A tool to quickly start a React project. By default, it runs on port 5173 (which matches the letters V-I-T-E as a memory trick – “V” is “5” in Roman Numerals).
Called the “essence of programming.” In React, using components is a way to control complexity by breaking big problems into smaller, reusable pieces.
📖 Learn More: Brian Kernighan Quote on Controlling Complexity
Attributes you can give to components to make them more powerful. Props are like HTML attributes but for your own custom components.
In programming, return ends a function and sends a value back to wherever it was called. In JavaScript functions, you use return to pass data back to the code that called the function.
In a React component function, the return statement sends back the JSX that should be shown on the screen.
🔗 Learn More: Return Statements in JavaScript
Putting one component inside another. Example: placing <Skills /> inside your main <App />.
Empty angle brackets (<>...</>) used in React components. They allow you to return multiple JSX elements without needing an extra wrapper element.
A tool that comes installed when you set up a React project with Vite. It checks your code and warns about errors or bad practices.
The folder that appears after installing dependencies. It contains all the extra code React needs to run.
In computer science, state refers to the current condition or data of a program at any given moment. It’s the information that a program remembers and can change over time, like variables that hold values, user preferences, or the current step in a process.
In React specifically, state is component-local data that React preserves between renders so a component can remember information and update the UI (e.g., a click counter). React state allows components to be interactive and respond to user actions by maintaining and updating their internal data.
🔗 Learn More: State: A Component’s Memory
Special React function whose name starts with use (e.g., useState, useEffect). Must follow the Rules of Hooks.
🔗 Learn More: Using Hooks
Hook that returns a state value and a setter:
const [count, setCount] = useState(0);
Initializes component state and triggers re-render when the setter is called.
🔗 Learn More: Adding Interactivity: useState
setCount)The function from useState used to update state (e.g., setCount(prev + 1)). Schedules an update; React re-renders with the new state.
🔗 Learn More: State Setter Functions
Conventional camelCase name for a click event handler:
function handleClick() {
setScore(s + 1);
}
🔗 Learn More: Responding to Events
Showing different UI based on a condition using JS expressions in JSX (e.g., {isOn ? 'On' : 'Off'}).
🔗 Learn More: Conditional Rendering
condition ? exprIfTrue : exprIfFalse; commonly used inside JSX for conditional rendering.
🔗 Learn More: Conditional Rendering (ternary)
Core JS structure often paired with loops or array methods (map, filter) to render repeated UI.
Common approaches for working with lists, such as Random List Access and List Scrolling Pattern.
📺 Learn More: Code.org Unit 5 Lesson 11.6 - Reduce and Filter | Traversals Practice
🔗 Learn More: List Filter Pattern
🔗 Learn More: List Reduce Pattern
🔗 Learn More: List Scrolling Pattern
🔗 Learn More: Code.org Unit 6 Lesson 11.6
Iterating from index 0 to list.length - 1 (e.g., for loop or array.map) to process or render each item.
Selecting an item by index (often random):
let randomIndex = Math.floor(Math.random() * list.length);
let item = list[randomIndex];
🔗 Learn More: Rendering Lists
Array destructuring syntax, especially used with hooks:
const [value, setValue] = useState(0);
const [first, second] = arr;
🔗 Learn More: Destructuring Arrays
Wrapper for multiple JSX nodes without adding a DOM element:
<>...</>
or
<React.Fragment>...</React.Fragment>
Special prop containing nested JSX between a component’s opening and closing tags:
<MyCard>
<p>Hello!</p>
</MyCard>
🔗 Learn More: Passing JSX as Children
🔗 Learn More: React Props Children - W3Schools
Read-only inputs to a component, similar to HTML attributes. Can model variants (e.g., <Button variant="primary" />) or pass classes via className.
🔗 Learn More: Passing Props to a Component
Two different programming styles:
Declarative (HTML / React): You describe what you want the UI to look like, and React updates it. Example:
<button disabled={isLoading}>Submit</button>
You declare the desired outcome, React handles the details.
Imperative (Vanilla JS): You write instructions for how to change the DOM step by step. Example:
const btn = document.querySelector("button");
if (isLoading) {
btn.setAttribute("disabled", true);
} else {
btn.removeAttribute("disabled");
}
React emphasizes declarative code because it’s easier to read, maintain, and reason about.
🔗 Learn More: Declarative Programming
An organized collection of data that can be stored, accessed, and managed efficiently. In web development, databases provide a structured place to store and organize data so applications can save, read, update, and delete information.
🔗 Learn More: Introduction to SQL & Databases
When data stays saved even after refreshing the page or restarting the app/server — unlike variables in JavaScript which disappear on reload.
📺 Learn More: Understanding Data Persistence
📺 Learn More: Data Persistence Explained
A backend-as-a-service that gives you a PostgreSQL database, authentication, storage, and APIs. Works like an open-source Firebase.
📺 Learn More: Supabase in 100 Seconds
🔗 Learn More: https://supabase.com
Google’s backend service for real-time databases, authentication, hosting, and storage. Uses NoSQL (document-style) data.
📺 Learn More: Firebase in 100 Seconds
🔗 Learn More: https://firebase.google.com
Structured Query Language — used to communicate with relational databases like PostgreSQL and MySQL.
📺 Learn More: SQL Explained in 100 Seconds
🔗 Learn More: Intro to SQL
A collection of related data in the database, organized into rows and columns — similar to a spreadsheet.
📺 Learn More: MySQL - The Basics // Learn SQL in 23 Easy Steps
🔗 Learn More: Intro to SELECT Queries
A labeled field in a table (e.g., email, price, user_id) that defines one type of data.
🔗 Learn More: Columns & Rows
One entry in a table — like one user, one product, or one message.
🔗 Learn More: Rows in Tables
SQL command that reads data from a database.
SELECT * FROM users;
📺 Learn More: MySQL - The Basics // Learn SQL in 23 Easy Steps
🔗 Learn More: SELECT Basics
SQL command that adds a new row into a table.
INSERT INTO users (name, age) VALUES ('Alex', 23);
📺 Learn More: MySQL - The Basics // Learn SQL in 23 Easy Steps
🔗 Learn More: Inserting Rows
Rules in Supabase/PostgreSQL that control which users are allowed to read or write specific rows in a table (helps protect user data).
📺 Learn More: RLS Policy Short
🔗 Learn More: Supabase RLS
.env)Hidden configuration values like API keys, database URLs, or secrets that you don’t want hardcoded in your JavaScript. Stored in a .env file.
📺 Learn More:
🔗 Learn More: Environment Variables – Supabase Docs
Naming style using lowercase letters and underscores:
first_name, user_id, total_price
The structure or organization of data, determining how information is stored, transmitted, and interpreted. Common data formats include CSV, JSON, XML, and others. Different formats are suited for different purposes — some are human-readable, others are optimized for machines.
📺 Learn More: CSV Data Formats Explained
A simple text format for storing tabular data where each line represents a row, and values are separated by commas. Commonly used for spreadsheets and data exchange.
Example:
name,age,email
Alice,25,alice@example.com
Bob,30,bob@example.com
📺 Learn More: CSV Files Explained
🔗 Learn More: MDN – CSV
A lightweight data format that uses JavaScript-like syntax to represent structured data. It’s the most common format for APIs and data exchange in web development. JSON is human-readable and easy for both humans and machines to parse.
Example:
{
"name": "Alice",
"age": 25,
"email": "alice@example.com"
}
📺 Learn More: Understanding JSON
Explore these terms in context throughout the Vitest Project Guide.
Packages listed under devDependencies in package.json are only needed during development. Vitest is installed here because it’s used to run tests locally rather than in production builds.
📺 Learn More: DevDependencies vs Dependencies
The percentage of your source code that runs when automated tests execute. Higher coverage can reveal which files or branches lack tests, helping you decide where to add new specs. 🔗 Learn More: Vitest Coverage Guide
Setting "type": "module" in package.json enables ES module syntax (import / export) across the project so test files and helpers can use modern JavaScript features.
📺 Learn More: JavaScript ES Modules Crash Course
Custom commands defined in the "scripts" section of package.json. Running npm run test executes the configured Vitest command.
📺 Learn More: npm Scripts Crash Course
A command-line tool that comes with npm, used to execute packages without installing them globally. npx runs packages from the npm registry temporarily, making it perfect for one-time commands or trying out tools without cluttering your system.
📺 Learn More: What is NPX?
Vitest’s structure for organizing tests. describe groups related specs, while each it defines a single behavior being asserted.
The matcher API used to express outcomes (expect(value).toBe(…), toEqual(…), etc.). Expect-style syntax keeps tests readable and declarative.
📺 Learn More: JavaScript Unit Testing Tutorial for Beginners
A matcher for comparing floating-point numbers with precision tolerance—useful when testing calculations like 0.1 + 0.2.
🔗 Learn More: Vitest expect.toBeCloseTo
🔍 Read More: Floating-point arithmetic – all you need to know
Running vitest --watch or npm run test -- --watch re-runs tests whenever files change, supporting rapid feedback during development. Press q to exit the watch runner.
🔗 Learn More: Vitest Watch Mode
Test-Driven Development cycle highlighted in the guide: write a failing test (red), implement just enough code to pass (green), then clean up the implementation (refactor) while keeping tests green. 📺 Learn More: Test-Driven Development (Red Green Refactor)
Patterns like /[!?,]/ or \W used to match groups of characters during string refactoring exercises (e.g., replacing punctuation in toSnakeCase).
🔗 Learn More: Regex101 Reference
A modern string method that replaces every occurrence of a substring or regex match, used throughout the string utility levels to keep helper functions pure. 🔗 Learn More: MDN – String.prototype.replaceAll()
React’s useEffect cannot accept an async callback. Instead, an inner async function (or IIFE) handles awaiting logic, ensuring the effect itself returns either nothing or a cleanup function.
🔗 Learn More: MDN – String.prototype.replaceAll()
🔗 Read More: Promises, async/await, and useEffect in React
A focused test that exercises a single function or module in isolation to verify correct behavior across expected and edge-case inputs. Vitest’s it blocks typically represent unit tests.
📺 Learn More: JavaScript Unit Testing Tutorial for Beginners
The IEEE 754 standard describes how computers represent real numbers using binary fractions, leading to rounding quirks like 0.1 + 0.2 !== 0.3. Understanding floating-point precision helps explain why matchers such as toBeCloseTo exist.
🔍 Read More: Floating-point arithmetic – all you need to know
🎵 Song “Function Flow”: https://suno.com/s/eY8iez0gM4n1f3ZB
A keyword that makes a function return a Promise and allows use of await inside it.
📺 Learn More: The Async Await Episode I Promised
Pauses inside an async function until a Promise is done.
const data = await fetch('/api/items');
🔗 Learn More: MDN – await
Built-in browser function that makes HTTP requests to APIs. Returns a Promise.
🔗 Learn More: MDN – fetch
🎵 Song: https://suno.com/s/fbOIwkbe1StSb6hY
📺 Learn More: Learn JavaScript LOGICAL OPERATORS in 5 minutes ❗
&&)Returns the first falsy value or the last value if all are truthy. Often used in conditions.
🔗 Learn More: MDN – Logical AND
||)Returns the first truthy value or the last value if none are truthy.
🔗 Learn More: MDN – Logical OR
!) / BangFlips a boolean value.
Example: !true // false
🔗 Learn More: MDN – Logical NOT
===)Strict comparison — checks both value and type.
5 === '5'; // false
📺 Learn More: Learn JavaScript STRICT EQUALITY in 3 minutes! 🟰
🔗 Learn More: MDN – Strict Equality
Values that count as true or false in an if statement.
Falsy values: 0, "", null, undefined, NaN, false
🔗 Learn More: MDN – Truthy
Where a variable exists in your code (block, function, or global).
🔗 Learn More: MDN – Scope
A shortcut to pull values from objects or arrays.
const { name } = user;
const [first, second] = items;
🔗 Learn More: MDN – Destructuring
In programming, functions are reusable blocks of code that perform a specific task. They help organize code, avoid repetition, and make programs easier to understand and maintain. Functions can accept inputs (parameters) and return outputs.
Web programming examples:
// Function to validate email
function validateEmail(email) {
return email.includes('@');
}
// Function to format user data
function formatUserData(user) {
return {
name: user.firstName + ' ' + user.lastName,
email: user.email.toLowerCase()
};
}
🔗 Learn More: MDN – Functions
An anonymous function is a function that has no name and is often used as a callback or in event handlers. They’re commonly used in web development for handling user interactions and API responses.
Web programming examples:
// Event handler (anonymous function)
button.addEventListener('click', function() {
console.log('Button clicked!');
});
// Array method callback (arrow function - also anonymous)
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(num) {
return num * 2;
});
// Arrow function version (also anonymous)
const tripled = numbers.map(num => num * 3);
🔗 Learn More: MDN – Functions
The actual value passed to a function when calling it.
Ends a function and sends a value back to wherever it was called.
Adds a value to the end of an array.
🎵 Song: https://suno.com/s/7xLQemRspSLltEYS
🔗 Learn More: MDN – push
Removes the last value from an array and returns it.
🔗 Learn More: MDN – pop
A coding exercise where you practice implementing a specific feature or pattern repeatedly to build muscle memory and fluency. In our course, you’ll work through React Katas to master component creation, state management, and event handling.
📺 Learn More: What is a Coding Kata?
🔗 Learn More: React Katas
📺 Learn More: JavaScript Modules in 100 Seconds
🔗 Learn More: Module Cheatsheet