Glossary

A comprehensive A-Z reference of technical terms you'll encounter while working on K12worX.

How to Use This Glossary

• Alphabetical listing - Find terms quickly
• Use Cmd/Ctrl+F to search
• Cross-references - Related terms linked with →
• Practical examples - See how terms are used

---

A

API (Application Programming Interface)

A way for programs to communicate with each other. In web development, usually refers to server endpoints that provide data.

Example:

// Calling an API
const response = await fetch('/api/contact');
const data = await response.json();

See also: → REST API, → Endpoint

App Router

Next.js 15's routing system based on file structure. Folders in app/ become URL routes.

Example:

app/about/page.tsx → /about
app/blog/[slug]/page.tsx → /blog/any-post

See also: → Dynamic Route, → File-based Routing

Argument

A value passed to a function when calling it.

Example:

function greet(name) { // 'name' is a parameter
  return `Hello, ${name}`;
}

greet('Alice'); // 'Alice' is an argument

See also: → Parameter, → Function

Array

A list of values stored in a single variable.

Example:

const colors = ['red', 'green', 'blue'];
console.log(colors[0]); // 'red'

See also: → Map, → Filter

Async/Await

A way to write asynchronous code that looks synchronous.

Example:

async function fetchData() {
  const response = await fetch('/api/data');
  const data = await response.json();
  return data;
}

See also: → Promise, → API

---

B

Boolean

A true/false value.

Example:

const isLoggedIn = true;
const hasError = false;

if (isLoggedIn) {
  // Do something
}

Branch (Git)

An independent line of development in Git. Lets you work on features without affecting the main code.

Example:

git checkout -b feature/new-button
# Work on new feature
git checkout main # Switch back

See also: → Commit, → Pull Request

Breakpoint

A marker in code that pauses execution for debugging.

Example: In browser DevTools, click line number to add breakpoint. Code pauses when that line runs.

See also: → Debugging, → DevTools

Build

The process of converting your code into optimized files for production.

Example:

npm run build
# Creates optimized .next/ folder

See also: → Production, → Development

---

C

Callback

A function passed as an argument to another function.

Example:

items.map((item) => {
  return <div>{item.name}</div>;
}); // Arrow function is the callback

See also: → Arrow Function, → Map

camelCase

Naming style where first word is lowercase, subsequent words capitalized.

Example:

const userName = 'Alice';
const isLoggedIn = true;
function getUserProfile() {}

See also: → kebab-case, → PascalCase

Client Component

A React component that runs in the browser. Needed for interactivity.

Example:

"use client";

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

See also: → Server Component, → useState

Clone

Creating a local copy of a Git repository.

Example:

git clone https://github.com/username/repo.git
cd repo

See also: → Repository, → Git

Commit

Saving changes to Git with a descriptive message.

Example:

git add .
git commit -m "Add contact form to homepage"

See also: → Branch, → Push

Component

A reusable piece of UI in React. Can be a function that returns JSX.

Example:

export default function Button({ text }) {
  return <button>{text}</button>;
}

// Use it:
<Button text="Click Me" />

See also: → Props, → JSX

Console

Browser tool for viewing logs, errors, and running JavaScript.

Example:

console.log('Debug info:', variable);
console.error('Something went wrong');

See also: → DevTools, → Debugging

CSS (Cascading Style Sheets)

Language for styling HTML elements.

Example:

.button {
  background-color: blue;
  color: white;
  padding: 10px;
}

See also: → Tailwind CSS, → Styling

---

D

Debugging

The process of finding and fixing bugs (errors) in code.

See also: → Console, → DevTools, → Breakpoint

Dependency

A package or library your project needs to work.

Example:

// package.json
"dependencies": {
  "react": "^18.2.0",
  "next": "15.0.0"
}

See also: → npm, → Package

Deployment

Publishing your website so it's live on the internet.

Example:

# Deploy to Vercel
vercel deploy

See also: → Build, → Production

Destructuring

Extracting values from objects or arrays into variables.

Example:

// Object destructuring
const { name, age } = user;

// Array destructuring
const [first, second] = items;

// Props destructuring
function Button({ text, onClick }) {
  // Instead of props.text and props.onClick
}

See also: → Props, → Component

DevTools (Developer Tools)

Browser tools for inspecting, debugging, and testing web pages.

Open with: Cmd+Option+I (Mac) or F12 (Windows)

See also: → Console, → Elements Tab, → Network Tab

Dynamic Route

A route with variable parts, defined with square brackets.

Example:

app/blog/[slug]/page.tsx → /blog/any-post-title

// Access the variable:
const { slug } = await params;

See also: → App Router, → Static Route

---

E

Element

An instance of a React component or HTML tag in JSX.

Example:

const element = <div>Hello</div>;
const component = <Button text="Click" />;

See also: → Component, → JSX

Endpoint

A specific URL on a server that performs an action or returns data.

Example:

GET /api/users → Returns list of users
POST /api/contact → Submits contact form

See also: → API, → HTTP Methods

Environment Variable

Configuration values stored outside code, often for secrets.

Example:

# .env.local
DATABASE_URL=postgresql://...
API_KEY=abc123

# Use in code:
const apiKey = process.env.API_KEY;

See also: → Configuration

Event Handler

A function that runs when something happens (click, submit, etc.).

Example:

function handleClick() {
  console.log('Clicked!');
}

<button onClick={handleClick}>Click Me</button>

See also: → onClick, → Callback

Export

Making a function, variable, or component available to other files.

Example:

// Default export (one per file)
export default function Button() {}

// Named export (multiple per file)
export const colors = ['red', 'blue'];
export function helper() {}

See also: → Import, → Module

---

F

File-based Routing

Next.js system where file/folder structure determines URLs.

Example:

app/page.tsx → /
app/about/page.tsx → /about

See also: → App Router, → Dynamic Route

Filter

Array method that creates a new array with items matching a condition.

Example:

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(n => n % 2 === 0);
// evens = [2, 4]

See also: → Map, → Array

Function

A reusable block of code that performs a task.

Example:

function add(a, b) {
  return a + b;
}

const sum = add(5, 3); // 8

See also: → Arrow Function, → Parameter, → Return

---

G

Git

Version control system for tracking code changes.

Example:

git init           # Start tracking
git add .          # Stage changes
git commit -m ""   # Save changes
git push           # Upload to remote

See also: → Branch, → Commit, → GitHub

GitHub

Website for hosting Git repositories and collaborating on code.

See also: → Git, → Repository, → Pull Request

---

H

Hook

Special React functions that let you use state and effects in components.

Common hooks:

useState()    // Manage state
useEffect()   // Run side effects
useRef()      // Reference DOM elements

See also: → useState, → useEffect

HTML (HyperText Markup Language)

The structure and content of web pages.

Example:

<div>
  <h1>Title</h1>
  <p>Paragraph</p>
</div>

See also: → JSX, → Elements

HTTP Methods

Types of requests sent to servers.

Common methods:

• GET - Retrieve data
• POST - Create data
• PUT - Update data
• DELETE - Delete data

See also: → API, → Endpoint

---

I

Import

Bringing code from other files into the current file.

Example:

import Header from '@/components/layout/Header';
import { useState } from 'react';
import type { User } from '@/types';

See also: → Export, → Module

Interface (TypeScript)

Defines the shape of an object or component props.

Example:

interface User {
  name: string;
  email: string;
  age?: number; // Optional
}

const user: User = {
  name: 'Alice',
  email: 'alice@example.com',
};

See also: → Type, → Props, → TypeScript

---

J

JavaScript (JS)

Programming language that runs in browsers and servers (Node.js).

See also: → TypeScript, → React

JSX

JavaScript syntax extension that looks like HTML, used in React.

Example:

const element = (
  <div className="container">
    <h1>Hello</h1>
    <p>World</p>
  </div>
);

See also: → React, → Component

---

K

kebab-case

Naming style with lowercase words separated by hyphens.

Example:

file-name.tsx
user-profile-card
my-component

See also: → camelCase, → PascalCase

Key

Unique identifier for list items in React.

Example:

{items.map((item) => (
  <div key={item.id}>{item.name}</div>
))}

See also: → Map, → List

---

L

Layout

A component that wraps pages to provide consistent structure.

Example:

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

See also: → Component, → Children

Library

Pre-written code you can use in your project.

Examples: React, Tailwind CSS, react-markdown

See also: → Dependency, → Package

Localhost

Your own computer acting as a server for development.

Example:

http://localhost:3000

See also: → Development, → Dev Server

---

M

Map

Array method that transforms each item into something new.

Example:

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
// doubled = [2, 4, 6]

// In JSX:
{items.map((item) => (
  <div key={item.id}>{item.name}</div>
))}

See also: → Filter, → Array, → Key

Markdown

Simple text format for writing formatted documents.

Example:

# Heading
**bold** *italic*
- List item
[Link](url)

See also: → MDX

Merge

Combining changes from one Git branch into another.

Example:

git checkout main
git merge feature/new-button

See also: → Branch, → Pull Request

Metadata

Information about a page (title, description) used by browsers and search engines.

Example:

export const metadata = {
  title: 'About | K12worX',
  description: 'Learn about our mission',
};

See also: → SEO

Module

A file that exports code for use in other files.

See also: → Import, → Export

---

N

Next.js

React framework for building web applications with server rendering, routing, and more.

See also: → React, → App Router

Node.js

JavaScript runtime that lets you run JavaScript outside the browser.

See also: → npm, → Server

npm (Node Package Manager)

Tool for installing and managing JavaScript packages.

Common commands:

npm install      # Install dependencies
npm run dev      # Run dev server
npm run build    # Build for production

See also: → Package, → Dependency

Null

Represents "no value" intentionally.

Example:

const user = null; // No user logged in

if (user === null) {
  // Show login
}

See also: → Undefined, → Falsy

---

O

Object

Collection of key-value pairs.

Example:

const user = {
  name: 'Alice',
  age: 25,
  email: 'alice@example.com',
};

console.log(user.name); // 'Alice'

See also: → Interface, → Type

onClick

Event handler that runs when an element is clicked.

Example:

<button onClick={() => console.log('Clicked!')}>
  Click Me
</button>

See also: → Event Handler

---

P

Package

A collection of code (library) you can install and use.

See also: → npm, → Dependency

Parameter

A variable in a function definition that receives values when called.

Example:

function greet(name, age) { // Parameters
  return `Hello ${name}, you are ${age}`;
}

greet('Alice', 25); // Arguments

See also: → Argument, → Function

PascalCase

Naming style where every word starts with a capital letter.

Example:

function UserProfile() {}
const MyComponent = () => {};
interface UserData {}

Used for: Components, interfaces, types

See also: → camelCase, → Component

Path

Location of a file or folder.

Example:

// Absolute path
'/Users/name/project/app/page.tsx'

// Relative path
'./components/Header'
'../utils/helper'

// Alias path (Next.js)
'@/components/Header'

See also: → Import

Production

The live, public version of your website.

See also: → Build, → Deployment

Promise

Represents a value that will be available in the future (async operation).

Example:

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data));

// Or with async/await:
const response = await fetch('/api/data');
const data = await response.json();

See also: → Async/Await, → API

Props

Data passed from a parent component to a child component.

Example:

// Parent
<Button text="Click Me" color="blue" />

// Child
interface ButtonProps {
  text: string;
  color: string;
}

export default function Button({ text, color }: ButtonProps) {
  return <button className={`bg-${color}-600`}>{text}</button>;
}

See also: → Component, → Interface

Pull

Getting latest changes from remote repository.

Example:

git pull origin main

See also: → Push, → Git

Pull Request (PR)

Request to merge your changes into the main codebase.

See also: → Branch, → Review, → GitHub

Push

Uploading local commits to remote repository.

Example:

git push origin feature-branch

See also: → Pull, → Commit

---

R

React

JavaScript library for building user interfaces with components.

See also: → Component, → JSX, → Props

Repository (Repo)

A project tracked by Git, stored locally and/or on GitHub.

See also: → Git, → GitHub

Return

Sending a value back from a function.

Example:

function add(a, b) {
  return a + b;
}

const sum = add(5, 3); // 8

See also: → Function

Responsive Design

Making websites work well on all screen sizes.

Example:

<div className="text-sm md:text-lg lg:text-xl">
  {/* Small on mobile, larger on tablet/desktop */}
</div>

See also: → Tailwind CSS, → Breakpoints

---

S

SEO (Search Engine Optimization)

Making your site discoverable by search engines.

Example:

export const metadata = {
  title: 'K12worX - Tutoring Network',
  description: 'Student-powered tutoring for K-8',
};

See also: → Metadata

Server Component

React component that renders on the server. Default in Next.js 15.

Example:

// No "use client" needed
export default function TeamPage() {
  return <div>Server-rendered content</div>;
}

See also: → Client Component

State

Data that changes over time in a component.

Example:

const [count, setCount] = useState(0);

<button onClick={() => setCount(count + 1)}>
  Count: {count}
</button>

See also: → useState, → Props

String

Text data enclosed in quotes.

Example:

const name = 'Alice';
const message = "Hello world";
const template = `Name: ${name}`; // Template literal

See also: → Template Literal

Styling

Making elements look good with CSS or Tailwind classes.

See also: → CSS, → Tailwind CSS

---

T

Tailwind CSS

Utility-first CSS framework using class names.

Example:

<div className="bg-blue-600 text-white p-4 rounded-lg">
  Styled with Tailwind
</div>

See also: → CSS, → Responsive Design

Template Literal

String with embedded variables using backticks.

Example:

const name = 'Alice';
const age = 25;
const message = `Hello ${name}, you are ${age} years old`;

See also: → String

Type (TypeScript)

Defines what kind of data a variable can hold.

Example:

type Status = 'idle' | 'loading' | 'success' | 'error';

const status: Status = 'loading';

See also: → Interface, → TypeScript

TypeScript

JavaScript with type checking for fewer bugs and better tooling.

See also: → Type, → Interface

---

U

Undefined

Value of a variable that hasn't been assigned.

Example:

let name; // undefined
console.log(name); // undefined

const user = { age: 25 };
console.log(user.name); // undefined (property doesn't exist)

See also: → Null

URL (Uniform Resource Locator)

Web address of a page or resource.

Example:

https://k12worx.org/about
  ^       ^         ^
protocol domain   path

See also: → Route, → Path

useState

React hook for managing component state.

Example:

import { useState } from 'react';

const [count, setCount] = useState(0);
//     ^       ^            ^
//   value  setter    initial value

setCount(count + 1); // Update state

See also: → State, → Hook

useEffect

React hook for side effects (running code after render).

Example:

import { useEffect } from 'react';

useEffect(() => {
  console.log('Component rendered');
}, []); // Empty array = run once

See also: → Hook, → Dependencies

---

V

Variable

A named container for storing data.

Example:

const name = 'Alice'; // Can't reassign
let age = 25;         // Can reassign
var old = 'avoid';    // Old style, avoid

See also: → const, → let

Version Control

Tracking changes to code over time.

See also: → Git, → Commit, → Branch

---

W

Workspace

Your local development environment and files.

See also: → Repository, → Development

---

Quick Links

• ← Chapter 10 Overview
• Useful Commands →