DEV Community: Christopher S. Aondona

We opened TekBreed early access, and the first milestone of our refactoring sprint is free right now

Christopher S. Aondona — Thu, 09 Apr 2026 11:00:29 +0000

We have opened TekBreed for early access.

Right now, you can explore the platform, use TekChat, and access the first milestone of every premium sprint for free until April 13, 2026.

One of the best places to start is our sprint:

Refactoring Mastery: Thinking & Building Like a Senior Engineer

That sprint is a good example of what we are trying to build with TekBreed, and why we think software engineering education needs a different shape.

Why we built TekBreed

A lot of learning resources are good at helping people follow along.

Fewer are good at helping people think like engineers when things get messy.

Behind the scenes, that difference matters a lot.

It is one thing to understand syntax.
It is another thing to enter a real codebase, evaluate tradeoffs, deal with unclear structure, preserve behavior, and decide what to change and what to leave alone.

That gap is one of the main reasons we built TekBreed.

We wanted to create a platform that does more than deliver explanations.
We wanted to build a learning environment that helps people practice engineering judgment.

That means the platform is designed around:

structured learning paths
realistic software engineering concepts
guided explanation, not just information dumps
AI support through TekChat
interactive learning that helps learners work through confusion instead of just reading past it

What early access includes

From now until April 13, 2026:

you can explore TekBreed
you can use TekChat freely
you can access the first milestone of every premium sprint for free
you can leave feedback directly from the platform

Then from April 13 to April 30, 2026, subscribers get 30% off.

This early access window is for feedback.

We do not want people to just skim the platform.
We want them to actually use it.

Use TekChat.
Push the learning flow.
Test edge cases.
Try unusual prompts.
Try to break things.
Then tell us what happened.

That kind of pressure is useful, because behind the scenes, real product truth appears when real users interact with the system without protection around it.

Why start with the refactoring sprint

The sprint we are especially excited for people to try is:

Refactoring Mastery: Thinking & Building Like a Senior Engineer

Because refactoring is one of those topics where many developers know the surface but not yet the deeper discipline.

A lot of people learn refactoring as isolated techniques:

extract method
rename variable
split logic
move code around

But real refactoring is not just a list of moves.

It is judgment.

It is knowing how to improve structure without breaking behavior.
It is knowing when a system is safe to touch.
It is knowing how to read risk, pressure, coupling, and clarity.

That is the kind of thinking we want to train on TekBreed.

So the refactoring sprint is not just “here are some tips.”
It is designed to help learners think more clearly about what good engineering looks like in practice.

And right now, the first milestone is open, so people can experience that direction without needing full premium access first.

Where TekChat fits in

One thing we care about deeply is what happens at the exact moment a learner gets stuck.

That is where TekChat matters.

Behind the scenes, AI is most useful in learning when it is not replacing the learner’s effort, but supporting it inside the moment of friction.

That can look like:

clarifying a concept
unpacking why a pattern matters
helping a learner reason through a confusing section
answering follow-up questions without breaking flow
making the learning process feel less isolating

That is the role we want TekChat to play.

Not gimmick.
Not shortcut.
Support.

And during early access, we want people to use it heavily and tell us where it helps and where it still needs work.

What we want feedback on

We want to know things like:

does the platform feel clear?
does the sprint structure make sense?
is the refactoring material useful?
does TekChat help in a meaningful way?
where does the experience feel strong?
where does it feel rough?
what should improve next?

There is a feedback button at the bottom right of the platform, and we want people to use it.

Try TekBreed

If you want to see what we are building, this is a good time to jump in.

Start with the refactoring sprint.
Use TekChat freely.
Push the experience.
Try the first milestone.
Tell us what works and what needs improvement.

TekBreed

Refactoring mastery

About TekBreed

Early access announcement

Build a Full-Stack Todo App with React & Node.js - The Complete Walkthrough

Christopher S. Aondona — Sat, 24 Jan 2026 18:40:36 +0000

You've probably built a todo app before. Maybe five times.

But have you ever really understood every line you wrote?

Today we're building one more. But differently.

At every step, I'll ask you questions. Try to answer them before scrolling. This is how you actually learn—active recall beats passive reading every time.

What We're Building

A full-stack todo app with:

React frontend with hooks
Express.js REST API
In-memory storage (for simplicity)
Full CRUD operations

By the end, you'll understand:

How useState and useEffect really work
REST API design patterns
Frontend-backend communication
Error handling strategies

Step 1: Project Setup

mkdir fullstack-todo && cd fullstack-todo
mkdir client server

🤔 Before we continue...

Question 1: Why are we separating client and server into different folders? What's the alternative, and when would you use it?

Think about it for 30 seconds before continuing.

The answer: Separation of concerns. We could use a monolithic approach (like Next.js), but separate folders give us deployment flexibility and clearer mental models.

Step 2: Backend Setup

cd server
npm init -y
npm pkg set type="module"
npm install express cors

Create server/index.js:

import express from 'express';
import cors from 'cors';

const app = express();
app.use(cors());
app.use(express.json());

let todos = [];
let nextId = 1;

// GET all todos
app.get('/api/todos', (req, res) => {
  res.json(todos);
});

// POST new todo
app.post('/api/todos', (req, res) => {
  const { title } = req.body;
  const todo = { id: nextId++, title, completed: false };
  todos.push(todo);
  res.status(201).json(todo);
});

// PATCH toggle completion
app.patch('/api/todos/:id', (req, res) => {
  const todo = todos.find(t => t.id === parseInt(req.params.id));
  if (!todo) return res.status(404).json({ error: 'Todo not found' });
  todo.completed = !todo.completed;
  res.json(todo);
});

// DELETE todo
app.delete('/api/todos/:id', (req, res) => {
  const index = todos.findIndex(t => t.id === parseInt(req.params.id));
  if (index === -1) return res.status(404).json({ error: 'Todo not found' });
  todos.splice(index, 1);
  res.status(204).send();
});

app.listen(3001, () => console.log('Server running on port 3001'));

🤔 Stop and think...

Question 2: Why did we use 201 for POST and 204 for DELETE? What's the difference, and why does it matter?

Question 3: There's a bug in this code that would break in production. Can you spot it?

Hints:

What happens when the server restarts?
What happens if two users add todos simultaneously?

Step 3: Frontend Setup

cd ../client
npm create vite@latest . -- --template react
npm install

Replace src/App.jsx:

import { useState, useEffect } from 'react';
import './App.css';

const API_URL = 'http://localhost:3001/api/todos';

function App() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchTodos();
  }, []);

  async function fetchTodos() {
    try {
      setLoading(true);
      const res = await fetch(API_URL);
      if (!res.ok) throw new Error('Failed to fetch');
      const data = await res.json();
      setTodos(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  async function addTodo(e) {
    e.preventDefault();
    if (!newTodo.trim()) return;

    try {
      const res = await fetch(API_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: newTodo }),
      });
      const todo = await res.json();
      setTodos([...todos, todo]);
      setNewTodo('');
    } catch (err) {
      setError('Failed to add todo');
    }
  }

  async function toggleTodo(id) {
    try {
      const res = await fetch(`${API_URL}/${id}`, { method: 'PATCH' });
      const updated = await res.json();
      setTodos(todos.map(t => t.id === id ? updated : t));
    } catch (err) {
      setError('Failed to update todo');
    }
  }

  async function deleteTodo(id) {
    try {
      await fetch(`${API_URL}/${id}`, { method: 'DELETE' });
      setTodos(todos.filter(t => t.id !== id));
    } catch (err) {
      setError('Failed to delete todo');
    }
  }

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div className="app">
      <h1>My Todos</h1>

      <form onSubmit={addTodo}>
        <input
          value={newTodo}
          onChange={e => setNewTodo(e.target.value)}
          placeholder="Add a new todo..."
        />
        <button type="submit">Add</button>
      </form>

      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <span 
              onClick={() => toggleTodo(todo.id)}
              style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
            >
              {todo.title}
            </span>
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

🤔 Understanding check...

Question 4: Why do we spread [...todos, todo] instead of todos.push(todo)? What would happen if we used push?

Question 5: The useEffect has an empty dependency array []. What does this mean? What would happen if we removed it entirely?

Step 4: Run It

Terminal 1:

cd server && node index.js

Terminal 2:

cd client && npm run dev

Visit http://localhost:5173 and test your app!

Challenges For You

If you really want to learn, try these without looking up the answers:

Add persistence - Save todos to a JSON file
Add validation - Prevent empty titles, limit title length
Add optimistic updates - Update UI before server confirms
Add filters - Show all/active/completed todos

What We Just Learned

REST API design patterns
React state management with hooks
Async/await with error handling
Frontend-backend separation

But here's the thing...

Did those questions help?

That active recall approach—stopping to think before seeing the answer—is proven to improve retention by 50% compared to passive reading.

Now imagine if you had an AI companion that could:

Ask you these questions in real-time
Adapt to YOUR specific confusion points
Review YOUR actual code, not generic examples
Remember what you've learned across projects

That's exactly what we're building at TekBreed.

Interactive tutorials and courses with AI that makes learning stick.

👉 Join the waitlist at tekbreed.com

What concept from this tutorial did you find most challenging? Drop a comment below!

Mastering JavaScript's URL() and URLSearchParams: A Complete Guide

Christopher S. Aondona — Tue, 28 Oct 2025 01:14:42 +0000

Introduction

Working with URLs in JavaScript used to be a messy affair involving string manipulation, regular expressions, and brittle parsing logic. The modern URL() and URLSearchParams APIs changed everything, providing robust, standardized interfaces for URL manipulation that solve countless headaches developers face daily.

In this comprehensive guide, we'll explore these APIs in depth, understanding not just how they work, but why they exist and the specific problems they solve.

The URL() Constructor: Understanding Web Addresses

What is URL()?

The URL() constructor creates URL objects that represent and parse Uniform Resource Locators. It takes a URL string (and optionally a base URL) and returns an object with properties representing each component of the URL.

Basic Syntax

new URL(url)
new URL(url, base)

Parameters:

url (required): An absolute or relative URL string
base (optional): A base URL string to resolve relative URLs against

Anatomy of a URL Object

When you create a URL object, it automatically parses the URL into its constituent parts:

const url = new URL('https://john:secret@example.com:8080/path/to/page?name=John&age=30#section');

console.log(url.href);       // "https://john:secret@example.com:8080/path/to/page?name=John&age=30#section"
console.log(url.protocol);   // "https:"
console.log(url.username);   // "john"
console.log(url.password);   // "secret"
console.log(url.host);       // "example.com:8080"
console.log(url.hostname);   // "example.com"
console.log(url.port);       // "8080"
console.log(url.pathname);   // "/path/to/page"
console.log(url.search);     // "?name=John&age=30"
console.log(url.hash);       // "#section"
console.log(url.origin);     // "https://example.com:8080"

Key Properties Explained

1. href - The complete URL string. This is both readable and writable:

const url = new URL('https://example.com/page');
url.href = 'https://newsite.com/newpage';
console.log(url.hostname); // "newsite.com"

2. protocol - The scheme of the URL (always includes the colon):

const url = new URL('https://example.com');
url.protocol = 'http:';
console.log(url.href); // "http://example.com"

3. username and password - Credentials in the URL (rarely used in modern web development due to security concerns):

const url = new URL('https://example.com');
url.username = 'admin';
url.password = 'pass123';
console.log(url.href); // "https://admin:pass123@example.com"

4. host vs hostname - A critical distinction:

host includes the port number
hostname is just the domain name

const url = new URL('https://example.com:3000');
console.log(url.host);     // "example.com:3000"
console.log(url.hostname); // "example.com"

5. port - The port number as a string (empty string if using default port):

const url = new URL('https://example.com:8080');
console.log(url.port); // "8080"

const url2 = new URL('https://example.com');
console.log(url2.port); // "" (empty string, not "443")

6. pathname - The path section, always starting with /:

const url = new URL('https://example.com/users/123/profile');
console.log(url.pathname); // "/users/123/profile"

url.pathname = '/posts/456';
console.log(url.href); // "https://example.com/posts/456"

7. search - The query string including the ?:

const url = new URL('https://example.com?foo=bar&baz=qux');
console.log(url.search); // "?foo=bar&baz=qux"

8. hash - The fragment identifier including the #:

const url = new URL('https://example.com/page#section-2');
console.log(url.hash); // "#section-2"

9. origin - Read-only property combining protocol, hostname, and port:

const url = new URL('https://example.com:8080/path?query');
console.log(url.origin); // "https://example.com:8080"

Working with Relative URLs

One of the most powerful features of URL() is resolving relative URLs against a base:

// Resolving relative paths
const base = 'https://example.com/users/123/profile';

const url1 = new URL('edit', base);
console.log(url1.href); // "https://example.com/users/123/edit"

const url2 = new URL('../456/posts', base);
console.log(url2.href); // "https://example.com/users/456/posts"

const url3 = new URL('/api/data', base);
console.log(url3.href); // "https://example.com/api/data"

const url4 = new URL('?page=2', base);
console.log(url4.href); // "https://example.com/users/123/profile?page=2"

Key Methods of URL

1. toString() - Returns the complete URL as a string (equivalent to href):

const url = new URL('https://example.com/page');
console.log(url.toString()); // "https://example.com/page"
console.log(String(url));    // "https://example.com/page"

2. toJSON() - Returns the URL string for JSON serialization:

const url = new URL('https://example.com/api');
console.log(JSON.stringify({ endpoint: url })); 
// {"endpoint":"https://example.com/api"}

Static Methods

URL.canParse(url, base) - Check if a URL is valid without throwing an error (modern browsers):

console.log(URL.canParse('https://example.com')); // true
console.log(URL.canParse('not a url'));           // false
console.log(URL.canParse('/relative', 'https://example.com')); // true

URL.createObjectURL(blob) - Creates a temporary URL for Blob or File objects:

const blob = new Blob(['Hello'], { type: 'text/plain' });
const blobUrl = URL.createObjectURL(blob);
console.log(blobUrl); // "blob:https://example.com/550e8400-e29b-41d4-a716-446655440000"

// Don't forget to revoke when done
URL.revokeObjectURL(blobUrl);

URLSearchParams: The Query String Swiss Army Knife

What is URLSearchParams?

URLSearchParams is an interface for working with query strings. It provides methods to read, add, modify, and delete query parameters without manual string manipulation.

Creating URLSearchParams

There are multiple ways to create a URLSearchParams object:

1. From a query string:

const params = new URLSearchParams('name=John&age=30&age=31');

2. From an object (modern approach):

const params = new URLSearchParams({
  name: 'John',
  age: 30,
  city: 'New York'
});

3. From an array of key-value pairs:

const params = new URLSearchParams([
  ['name', 'John'],
  ['age', '30'],
  ['hobby', 'coding'],
  ['hobby', 'reading']
]);

4. From a URL object's searchParams property:

const url = new URL('https://example.com?name=John&age=30');
const params = url.searchParams; // Direct reference, not a copy!

Core Methods: Reading Parameters

1. get(name) - Retrieves the first value for a parameter:

const params = new URLSearchParams('name=John&age=30&age=31');
console.log(params.get('name')); // "John"
console.log(params.get('age'));  // "30" (first value only)
console.log(params.get('city')); // null (doesn't exist)

2. getAll(name) - Retrieves all values for a parameter as an array:

const params = new URLSearchParams('tag=js&tag=web&tag=api');
console.log(params.getAll('tag')); // ["js", "web", "api"]
console.log(params.getAll('missing')); // [] (empty array)

3. has(name) - Checks if a parameter exists:

const params = new URLSearchParams('name=John&age=30');
console.log(params.has('name')); // true
console.log(params.has('city')); // false

4. keys() - Returns an iterator of all parameter names:

const params = new URLSearchParams('name=John&age=30&city=NYC');
for (const key of params.keys()) {
  console.log(key); // "name", "age", "city"
}

// Convert to array
console.log([...params.keys()]); // ["name", "age", "city"]

5. values() - Returns an iterator of all parameter values:

const params = new URLSearchParams('name=John&age=30');
for (const value of params.values()) {
  console.log(value); // "John", "30"
}

6. entries() - Returns an iterator of [key, value] pairs:

const params = new URLSearchParams('name=John&age=30');
for (const [key, value] of params.entries()) {
  console.log(`${key}: ${value}`);
  // "name: John"
  // "age: 30"
}

// URLSearchParams is directly iterable
for (const [key, value] of params) {
  console.log(`${key}: ${value}`);
}

7. forEach(callback) - Executes a callback for each parameter:

const params = new URLSearchParams('name=John&age=30');
params.forEach((value, key) => {
  console.log(`${key} = ${value}`);
});

Core Methods: Modifying Parameters

1. set(name, value) - Sets a parameter, replacing all existing values:

const params = new URLSearchParams('name=John&age=30&age=31');
params.set('age', '25');
console.log(params.toString()); // "name=John&age=25"

params.set('city', 'NYC');
console.log(params.toString()); // "name=John&age=25&city=NYC"

2. append(name, value) - Adds a parameter without removing existing ones:

const params = new URLSearchParams('tag=js');
params.append('tag', 'web');
params.append('tag', 'api');
console.log(params.toString()); // "tag=js&tag=web&tag=api"

3. delete(name) - Removes a parameter:

const params = new URLSearchParams('name=John&age=30&city=NYC');
params.delete('age');
console.log(params.toString()); // "name=John&city=NYC"

Modern delete() with value parameter:

const params = new URLSearchParams('tag=js&tag=web&tag=js');
params.delete('tag', 'js'); // Remove only 'tag=js' entries
console.log(params.toString()); // "tag=web"

4. sort() - Sorts parameters alphabetically by key:

const params = new URLSearchParams('zebra=1&apple=2&mango=3');
params.sort();
console.log(params.toString()); // "apple=2&mango=3&zebra=1"

5. toString() - Converts to query string (without leading ?):

const params = new URLSearchParams({ name: 'John', age: 30 });
console.log(params.toString()); // "name=John&age=30"
console.log('?' + params.toString()); // "?name=John&age=30"

Integration with URL

The real power emerges when combining URL and URLSearchParams:

const url = new URL('https://api.example.com/users');

// url.searchParams is a live URLSearchParams object
url.searchParams.set('page', '2');
url.searchParams.set('limit', '10');
url.searchParams.append('sort', 'name');

console.log(url.href); 
// "https://api.example.com/users?page=2&limit=10&sort=name"

// Modifications to searchParams immediately affect the URL
url.searchParams.delete('limit');
console.log(url.href); 
// "https://api.example.com/users?page=2&sort=name"

Real-World Problems They Solve

Problem 1: Safe Query String Parsing

Before URL APIs:

// Fragile and error-prone
function getQueryParam(url, param) {
  const regex = new RegExp('[?&]' + param + '=([^&#]*)');
  const results = regex.exec(url);
  return results ? decodeURIComponent(results[1]) : null;
}

// Doesn't handle multiple values, encoding issues, etc.

With URLSearchParams:

const url = new URL(window.location.href);
const paramValue = url.searchParams.get('param');
// Handles encoding, multiple values, and edge cases automatically

Problem 2: Building Dynamic API URLs

Before URL APIs:

// Manual string concatenation - prone to bugs
let apiUrl = 'https://api.example.com/search?';
if (query) apiUrl += 'q=' + encodeURIComponent(query) + '&';
if (page) apiUrl += 'page=' + page + '&';
if (filters) {
  filters.forEach(f => {
    apiUrl += 'filter=' + encodeURIComponent(f) + '&';
  });
}
apiUrl = apiUrl.slice(0, -1); // Remove trailing &

With URL APIs:

const apiUrl = new URL('https://api.example.com/search');
if (query) apiUrl.searchParams.set('q', query);
if (page) apiUrl.searchParams.set('page', page);
if (filters) {
  filters.forEach(f => apiUrl.searchParams.append('filter', f));
}
// Clean, readable, no encoding worries

Problem 3: URL Modification Without Reloading

Updating browser URL state:

// Update URL without page reload (for SPAs)
function updateFilters(filters) {
  const url = new URL(window.location);
  url.searchParams.delete('filter'); // Clear existing
  filters.forEach(f => url.searchParams.append('filter', f));

  window.history.pushState({}, '', url);
}

Problem 4: Handling Complex Query Strings

Working with arrays and multiple values:

// Building a search URL with multiple filters
const searchUrl = new URL('https://shop.example.com/products');
searchUrl.searchParams.set('category', 'electronics');
searchUrl.searchParams.append('color', 'black');
searchUrl.searchParams.append('color', 'silver');
searchUrl.searchParams.set('minPrice', '100');
searchUrl.searchParams.set('maxPrice', '500');

console.log(searchUrl.href);
// "https://shop.example.com/products?category=electronics&color=black&color=silver&minPrice=100&maxPrice=500"

// Reading multiple values on the backend/client
const colors = searchUrl.searchParams.getAll('color');
console.log(colors); // ["black", "silver"]

Problem 5: Form Data to URL Query

Converting form data to URL query string:

const formData = new FormData(document.querySelector('form'));
const searchParams = new URLSearchParams(formData);

const apiUrl = new URL('https://api.example.com/submit');
apiUrl.search = searchParams.toString();

fetch(apiUrl)
  .then(response => response.json())
  .then(data => console.log(data));

Problem 6: URL Validation and Sanitization

Safely validating URLs:

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (err) {
    return false;
  }
}

console.log(isValidUrl('https://example.com')); // true
console.log(isValidUrl('not a url')); // false

// Or with modern browsers:
console.log(URL.canParse('https://example.com')); // true

Practical Examples

Example 1: Pagination Helper

class PaginationHelper {
  constructor(baseUrl) {
    this.url = new URL(baseUrl);
  }

  setPage(page) {
    this.url.searchParams.set('page', page);
    return this;
  }

  setLimit(limit) {
    this.url.searchParams.set('limit', limit);
    return this;
  }

  setSort(field, order = 'asc') {
    this.url.searchParams.set('sort', field);
    this.url.searchParams.set('order', order);
    return this;
  }

  getUrl() {
    return this.url.href;
  }
}

const pagination = new PaginationHelper('https://api.example.com/users');
const url = pagination
  .setPage(2)
  .setLimit(20)
  .setSort('name', 'desc')
  .getUrl();

console.log(url);
// "https://api.example.com/users?page=2&limit=20&sort=name&order=desc"

Example 2: Search Filter Manager

class SearchFilters {
  constructor(currentUrl = window.location.href) {
    this.url = new URL(currentUrl);
  }

  addFilter(key, value) {
    this.url.searchParams.append(key, value);
    return this;
  }

  removeFilter(key, value = null) {
    if (value === null) {
      this.url.searchParams.delete(key);
    } else {
      // Remove specific value
      const values = this.url.searchParams.getAll(key);
      this.url.searchParams.delete(key);
      values.filter(v => v !== value).forEach(v => {
        this.url.searchParams.append(key, v);
      });
    }
    return this;
  }

  getFilters(key) {
    return this.url.searchParams.getAll(key);
  }

  clearAll() {
    // Keep only specific params like page
    const page = this.url.searchParams.get('page');
    this.url.search = '';
    if (page) this.url.searchParams.set('page', page);
    return this;
  }

  apply() {
    window.history.pushState({}, '', this.url);
    // Trigger filter update event
    window.dispatchEvent(new CustomEvent('filtersChanged'));
  }

  toString() {
    return this.url.href;
  }
}

// Usage
const filters = new SearchFilters();
filters
  .addFilter('category', 'electronics')
  .addFilter('brand', 'apple')
  .addFilter('brand', 'samsung')
  .apply();

Example 3: API Client with Query Builder

class ApiClient {
  constructor(baseUrl) {
    this.baseUrl = baseUrl;
  }

  buildUrl(endpoint, params = {}) {
    const url = new URL(endpoint, this.baseUrl);

    Object.entries(params).forEach(([key, value]) => {
      if (Array.isArray(value)) {
        value.forEach(v => url.searchParams.append(key, v));
      } else if (value !== null && value !== undefined) {
        url.searchParams.set(key, value);
      }
    });

    return url.href;
  }

  async get(endpoint, params = {}) {
    const url = this.buildUrl(endpoint, params);
    const response = await fetch(url);
    return response.json();
  }
}

// Usage
const api = new ApiClient('https://api.example.com');

api.get('/products', {
  category: 'electronics',
  tags: ['new', 'featured'],
  minPrice: 100,
  maxPrice: 1000,
  page: 1
});
// Fetches: https://api.example.com/products?category=electronics&tags=new&tags=featured&minPrice=100&maxPrice=1000&page=1

Example 4: URL State Synchronizer

class UrlStateSync {
  constructor() {
    this.url = new URL(window.location);
    this.listeners = new Map();
  }

  setState(key, value) {
    if (value === null || value === undefined || value === '') {
      this.url.searchParams.delete(key);
    } else {
      this.url.searchParams.set(key, value);
    }

    this.updateUrl();
    this.notifyListeners(key, value);
  }

  getState(key) {
    return this.url.searchParams.get(key);
  }

  updateUrl() {
    window.history.replaceState({}, '', this.url);
  }

  onChange(key, callback) {
    if (!this.listeners.has(key)) {
      this.listeners.set(key, []);
    }
    this.listeners.get(key).push(callback);
  }

  notifyListeners(key, value) {
    if (this.listeners.has(key)) {
      this.listeners.get(key).forEach(callback => callback(value));
    }
  }
}

// Usage
const urlState = new UrlStateSync();

urlState.onChange('theme', (theme) => {
  document.body.className = theme;
});

urlState.setState('theme', 'dark'); // Updates URL and applies theme

Common Pitfalls and Best Practices

Pitfall 1: Forgetting URL Encoding

// ❌ Wrong - manual encoding issues
const url = 'https://api.example.com/search?q=' + query;

// ✅ Correct - automatic encoding
const url = new URL('https://api.example.com/search');
url.searchParams.set('q', query);

Pitfall 2: Modifying searchParams Reference

const url = new URL('https://example.com?name=John');

// url.searchParams is a live reference
const params = url.searchParams;
params.set('age', '30');

console.log(url.href); // Changed! "https://example.com?name=John&age=30"

// To get an independent copy:
const paramsCopy = new URLSearchParams(url.searchParams);

Pitfall 3: Using set() vs append()

const params = new URLSearchParams();

// set() replaces all values
params.set('tag', 'js');
params.set('tag', 'web');
console.log(params.toString()); // "tag=web" (only one)

// append() adds multiple values
params.append('tag', 'js');
params.append('tag', 'web');
console.log(params.toString()); // "tag=js&tag=web"

Best Practice 1: Always Validate URLs

function safeUrlParse(urlString, base) {
  try {
    return new URL(urlString, base);
  } catch (error) {
    console.error('Invalid URL:', urlString);
    return null;
  }
}

Best Practice 2: Use searchParams for Query Manipulation

// ❌ Avoid direct search manipulation
url.search = '?name=John&age=30';

// ✅ Use searchParams
url.searchParams.set('name', 'John');
url.searchParams.set('age', '30');

Best Practice 3: Clone URLs When Needed

function modifyUrlWithoutMutating(originalUrl, modifications) {
  const url = new URL(originalUrl.href); // Create new instance

  Object.entries(modifications).forEach(([key, value]) => {
    url.searchParams.set(key, value);
  });

  return url;
}

Browser Support and Polyfills

The URL() and URLSearchParams APIs have excellent browser support:

URL: Supported in all modern browsers (Chrome 32+, Firefox 26+, Safari 7+, Edge 12+)
URLSearchParams: Supported in all modern browsers (Chrome 49+, Firefox 44+, Safari 10.3+, Edge 17+)

For older browsers, you can use the url-polyfill package:

import 'url-polyfill';

// Now URL and URLSearchParams work in older browsers

Conclusion

The URL() and URLSearchParams APIs represent a massive improvement over manual URL string manipulation. They provide:

Type safety: Automatic encoding and validation
Simplicity: Intuitive methods for common operations
Reliability: Handle edge cases correctly
Maintainability: Self-documenting code
Standards compliance: Following web standards

Whether you're building SPAs, working with APIs, managing client-side routing, or handling form submissions, these APIs should be your go-to tools for URL manipulation.

Take Your JavaScript Skills Further

If you found this deep dive valuable, you'll love what we're building at TekBreed – a comprehensive learning platform designed specifically for software engineers who want to master modern web development.

At TekBreed, we create in-depth, practical courses that go beyond surface-level tutorials. We focus on the "why" behind the code, real-world applications, and the tiny details that separate good developers from great ones.

🚀 The waitlist is now live at tekbreed.com

We're currently in active development and planning to launch in Q1 2026. Join the waitlist to:

Get early access to our platform
Receive exclusive content and tutorials
Help shape the courses we create
Be part of a community of passionate engineers

We're building something special for developers who refuse to settle for shallow understanding. See you at TekBreed! 🎯

Inside TekBreed's Engineering: Why Monorepo Architecture with Turborepo Powers Our Platform

Christopher S. Aondona — Thu, 23 Oct 2025 10:34:17 +0000

Building a next-generation platform like TekBreed requires more than just great ideas—it demands architectural decisions that can support rapid iteration, maintain code quality, and scale with our vision. That's why we've embraced a monorepo architecture powered by Turborepo, a choice that fundamentally shapes how we build, deploy, and innovate.

🔧 The Foundation: Intelligent Monorepo Management

Unlike traditional multi-repo approaches where codebases fragment across dozens of repositories, our monorepo unifies our entire platform ecosystem in a single, coherent structure. Turborepo sits at the heart of this architecture, providing sophisticated build orchestration, intelligent caching, and dependency management that transforms how our engineering team operates.

The beauty of Turborepo lies in its understanding of task dependencies. It knows exactly what needs to rebuild when code changes, eliminating unnecessary work and dramatically accelerating our development velocity. Remote caching means that when one engineer builds a package, every team member benefits—no redundant computation, just pure efficiency.

📦 Shared Packages: Building Blocks of Consistency

At the core of our architecture are meticulously crafted shared packages that serve as the foundation for everything we build:

• UI Component Library: Reusable, accessible React components that ensure visual and functional consistency across every touchpoint of the TekBreed experience. From buttons to complex data visualizations, interactive code editors to chat interfaces, these components embody our design system and maintain brand integrity across all 12+ applications.

• Utility Functions: Battle-tested helpers for data validation, formatting, authentication logic, and business rule enforcement. These utilities eliminate duplication and ensure that critical operations behave identically whether they're running in our admin dashboard, job board, or collaborative learning environments.

• Database Access Layer: Type-safe database clients and query builders that provide a unified interface to our data infrastructure. This abstraction shields applications from schema changes and enables us to optimize queries centrally—whether we're fetching course content, user progress, job listings, or chat history.

• AI/ML Utilities: Shared interfaces for interacting with language models, prompt engineering templates, context management, and embedding generation. These ensure consistent AI behavior across our chatbot, coding challenges, and learning assistant features.

• Configuration & Constants: Environment-specific settings, API endpoints, feature flags, and business constants managed in one place, propagated consistently across all applications.

This shared foundation means our engineers spend time solving unique problems rather than reimplementing common functionality. It's the difference between innovation and iteration.

🎯 Independent Apps: A Comprehensive Learning Ecosystem

Our monorepo hosts twelve independent applications, each serving distinct user needs while sharing the common infrastructure. This creates a cohesive yet flexible learning platform:

User-Facing Applications:

• Waitlist System (tekbreed.com): A streamlined, conversion-optimized experience for early adopters to join our community and stay informed about launch milestones.

• Core Platform: The central hub of TekBreed, orchestrating user experiences, progress tracking, authentication, and navigation across all learning experiences.

• Chat (AI Learning Assistant): An intelligent chatbot powered by advanced language models, providing personalized tutoring, answering technical questions, debugging assistance, and adaptive learning support that meets learners where they are.

• Programs (Courses/Programs): Structured learning pathways featuring video content, interactive lessons, assessments, and progress tracking. Learners can enroll in comprehensive programs designed to build skills systematically from fundamentals to mastery.

• Coding Challenges: An interactive coding environment where learners practice skills through real-world problems, receive instant feedback, and compete on leaderboards. Features sandboxed code execution, automated testing, and difficulty progression.

• Teams (Collaborative Learning): Social learning spaces where users form study groups, collaborate on projects, share resources, and learn together. Includes discussion forums, shared workspaces, peer code reviews, and team challenges.

• Job Board: A curated marketplace connecting skilled learners with employment opportunities, featuring job listings, application tracking, skill matching, and career resources that bridge the gap between learning and earning.

• Store: E-commerce platform offering learning materials, merchandise, and our branded gadgets with secure payment processing.

• Docs: Comprehensive technical documentation, API references, integration guides, and learning resources built with modern documentation tooling for searchability and developer experience.

Backend & Infrastructure:

• Admin Dashboard: Sophisticated internal tooling empowering our team to manage content, moderate communities, analyze user metrics, support learners, configure AI behavior, and oversee platform operations with granular control and real-time insights.

• CMS (Content Management System): A headless CMS enabling content creators, instructors, and curriculum designers to author, organize, and publish learning materials without engineering intervention. Supports versioning, workflow approvals, and multi-format content.

• MCP Servers (Model Context Protocol): Specialized backend services implementing the Model Context Protocol, enabling our AI systems to access tools, retrieve contextual information, execute code safely, and interact with external systems while maintaining security and performance.

This modular architecture provides critical advantages: applications can evolve at different paces based on user needs, deploy independently without platform-wide risk, and be staffed by specialized teams with deep domain expertise. When the coding challenges need a new feature, we ship it without touching the job board. When the AI assistant requires enhanced capabilities, it happens in isolation. When the CMS needs workflow improvements, content creators benefit without any disruption to learners.

🛡️ Type Safety: The Invisible Shield

Running through every layer of our architecture is an unwavering commitment to type-safe development. Using TypeScript throughout our stack, we enforce contracts between packages, applications, and even frontend-backend boundaries.

This isn't academic—type safety catches entire categories of bugs before they reach production:
• API contract violations detected at compile time, not in production monitoring
• Database query results validated against schema definitions automatically
• Component props verified across all 12 applications, eliminating the "undefined is not a function" runtime errors
• Shared package interfaces enforced, ensuring the chat app and coding challenges consume utilities identically
• MCP server requests and responses type-checked, guaranteeing AI systems interact with tools correctly
• Refactoring performed with confidence, knowing the type system will flag every impacted location across the entire platform

When we update a shared authentication utility, TypeScript immediately reveals which of our 12 applications need adjustments. When we modify the database schema, every query across every app is validated automatically. This is architectural safety at scale.

⚡ The Turborepo Advantage: Measurable Impact

Managing 12+ applications and dozens of shared packages would be chaos without Turborepo. The benefits manifest in concrete, daily improvements:

✅ Build Performance: What once took 15+ minutes now completes in under 3 minutes thanks to Turborepo's intelligent caching. Only changed packages rebuild, and remote cache hits mean most builds are near-instantaneous. When we update the docs, the store doesn't rebuild. When we enhance the chat UI, the job board stays cached.

✅ Developer Experience: Consistent tooling, linting, testing, and deployment workflows across all packages eliminate cognitive overhead. Whether you're working on the AI learning assistant or the CMS, the development experience is identical. New engineers become productive in days, not weeks, because everything follows familiar patterns.

✅ Parallel Development: Multiple teams work simultaneously on different applications without conflicts. The chat team iterates on AI prompts while the programs team builds curriculum features while the store team implements payment processing—all in the same repository, all moving fast.

✅ Fearless Refactoring: Need to update a shared utility? Change it once, and the type system immediately shows every impacted usage site across all 12 apps. Refactor with confidence, knowing breaking changes are impossible to miss.

✅ Collaboration at Scale: The monorepo provides visibility into the entire codebase—no more "black box" dependencies. When the coding challenges team builds a new code editor component, the docs team can immediately adopt it. When the teams app creates a discussion forum component, it's available platform-wide.

✅ Code Reusability: Build once, use everywhere. A new chart component created for the admin dashboard? It's immediately available in the programs analytics, job board metrics, and team progress tracking with zero additional work.

✅ Simplified Dependency Management: One package.json to rule them all. Security updates, version bumps, and dependency audits happen centrally, ensuring all 12 applications stay current and secure simultaneously.

✅ Atomic Changes: Need to update how authentication works across the platform? Make the change in the shared auth package, update consuming applications in a single commit, and deploy atomically. No coordination across multiple repositories, no version mismatches, no deployment sequencing nightmares.

🚀 Built for Tomorrow, Not Just Today

Technology choices are bets on the future. Our monorepo architecture with Turborepo represents our commitment to:

• Scalability: As TekBreed grows from 12 applications to 20+ microservices, from 5 engineers to 50+, our architecture grows with us without collapsing under its own weight.

• Innovation: Less time fighting tools and repository boundaries means more time building features learners love—smarter AI tutoring, more engaging challenges, richer collaborative experiences.

• Quality: Type safety and shared components make excellence the default, not the exception. Every application benefits from the cumulative engineering investment in our shared packages.

• Speed: Ship features faster without sacrificing stability or introducing technical debt. When we optimize the code execution environment, both coding challenges and the AI assistant benefit immediately.

• Consistency: Learners experience a cohesive platform, not a patchwork of disconnected tools. Visual consistency, interaction patterns, and performance characteristics remain uniform whether they're browsing the store, chatting with the AI, or collaborating in teams.

In an industry where technical debt can sink promising platforms, we're building infrastructure designed to compound in value over time. Every shared component, every type-safe integration, and every cached build makes the next feature faster to deliver and more reliable to deploy. As we add new applications—perhaps a mobile app, a native desktop experience, or specialized tools for enterprise customers—our monorepo architecture makes these additions natural extensions rather than architectural pivots.

🎯 Join Us on the Journey

We're building TekBreed with the same rigor and thoughtfulness reflected in our architecture. This isn't just about choosing trendy tools—it's about creating a foundation that enables us to deliver exceptional value to learners, consistently and sustainably.

From AI-powered tutoring to collaborative learning spaces, from structured programs to real-world coding challenges, from career opportunities to premium content—we're architecting a comprehensive learning ecosystem that scales with your ambitions.

Want to experience what we're building? Join our waitlist at tekbreed.com and be among the first to access the platform when we launch.