← JavaScript Design Patterns Advanced Interview Questions →

Advanced JavaScript Projects

Project-Based Learning: Build these projects to solidify your JavaScript skills

Project 1: State Management System

Build a simple state management system similar to Redux.

JavaScript Editor

// Simple State Management System
class Store {
  constructor(reducer, initialState) {
    this.reducer = reducer;
    this.state = initialState;
    this.listeners = [];
    this.isDispatching = false;
  }

getState() {
    if (this.isDispatching) {
      throw new Error('Cannot get state while dispatching');
    }
    return this.state;
  }

dispatch(action) {
    if (this.isDispatching) {
      throw new Error('Cannot dispatch while dispatching');
    }

try {
      this.isDispatching = true;
      this.state = this.reducer(this.state, action);
    } finally {
      this.isDispatching = false;
    }

this.listeners.forEach(listener => listener());
    return action;
  }

subscribe(listener) {
    this.listeners.push(listener);
    
    return () => {
      const index = this.listeners.indexOf(listener);
      this.listeners.splice(index, 1);
    };
  }
}

// Reducer function
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'RESET':
      return { ...state, count: 0 };
    default:
      return state;
  }
}

// Create store
const store = new Store(counterReducer, { count: 0 });

// Subscribe to state changes
const unsubscribe = store.subscribe(() => {
  console.log('State changed:', store.getState());
});

// Dispatch actions
console.log('Initial state:', store.getState());

store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });
store.dispatch({ type: 'RESET' });

// Unsubscribe
unsubscribe();

Project 2: Promise-based HTTP Client

Create a simple HTTP client with retry logic and timeout.

JavaScript Editor

// Advanced HTTP Client
class HttpClient {
  constructor(baseURL = '', config = {}) {
    this.baseURL = baseURL;
    this.defaultHeaders = config.headers || {};
    this.timeout = config.timeout || 5000;
    this.maxRetries = config.maxRetries || 3;
  }

async request(method, endpoint, data = null, options = {}) {
    const url = `${this.baseURL}${endpoint}`;
    const headers = { ...this.defaultHeaders, ...options.headers };
    const timeout = options.timeout || this.timeout;
    const maxRetries = options.maxRetries || this.maxRetries;

const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeout);

let lastError;
    let attempt = 0;

while (attempt < maxRetries) {
      attempt++;
      try {
        const config = {
          method,
          headers,
          signal: controller.signal,
          ...(data && { body: JSON.stringify(data) })
        };

console.log(`Attempt ${attempt}: ${method} ${url}`);
        const response = await fetch(url, config);
        
        clearTimeout(timeoutId);
        
        if (!response.ok) {
          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        
        const contentType = response.headers.get('content-type');
        if (contentType && contentType.includes('application/json')) {
          return await response.json();
        }
        
        return await response.text();
      } catch (error) {
        lastError = error;
        console.log(`Attempt ${attempt} failed: `, error.message);
        
        if (attempt < maxRetries) {
          // Exponential backoff
          const delay = Math.min(1000 * Math.pow(2, attempt - 1), 10000);
          console.log(`Retrying in ${delay}ms...`);
          await this.sleep(delay);
        }
      }
    }
    
    throw lastError || new Error('Request failed after all retries');
  }

sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

get(endpoint, options = {}) {
    return this.request('GET', endpoint, null, options);
  }

post(endpoint, data, options = {}) {
    return this.request('POST', endpoint, data, options);
  }

put(endpoint, data, options = {}) {
    return this.request('PUT', endpoint, data, options);
  }

delete(endpoint, options = {}) {
    return this.request('DELETE', endpoint, null, options);
  }
}

// Usage example (note: will fail without actual API)
async function exampleUsage() {
  const client = new HttpClient('https://jsonplaceholder.typicode.com', {
    timeout: 3000,
    maxRetries: 2,
    headers: {
      'Content-Type': 'application/json'
    }
  });

try {
    // This will work - actual API call
    const posts = await client.get('/posts/1');
    console.log('Success:', posts);
    
    // This will fail - non-existent endpoint
    await client.get('/nonexistent');
  } catch (error) {
    console.log('Error caught:', error.message);
  }
}

exampleUsage();

Project 3: Data Structures Implementation

Implement Linked List and Binary Search Tree.

JavaScript Editor

// Linked List Implementation
class ListNode {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

class LinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
    this.length = 0;
  }

append(value) {
    const newNode = new ListNode(value);
    
    if (!this.head) {
      this.head = newNode;
      this.tail = newNode;
    } else {
      this.tail.next = newNode;
      this.tail = newNode;
    }
    
    this.length++;
    return this;
  }

prepend(value) {
    const newNode = new ListNode(value);
    
    if (!this.head) {
      this.head = newNode;
      this.tail = newNode;
    } else {
      newNode.next = this.head;
      this.head = newNode;
    }
    
    this.length++;
    return this;
  }

insert(index, value) {
    if (index < 0 || index > this.length) return false;
    if (index === 0) return this.prepend(value);
    if (index === this.length) return this.append(value);

const newNode = new ListNode(value);
    let currentNode = this.traverseToIndex(index - 1);
    
    newNode.next = currentNode.next;
    currentNode.next = newNode;
    
    this.length++;
    return this;
  }

remove(index) {
    if (index < 0 || index >= this.length) return null;
    if (index === 0) {
      const removedValue = this.head.value;
      this.head = this.head.next;
      this.length--;
      if (this.length === 0) this.tail = null;
      return removedValue;
    }

const previousNode = this.traverseToIndex(index - 1);
    const nodeToRemove = previousNode.next;
    previousNode.next = nodeToRemove.next;
    
    if (index === this.length - 1) {
      this.tail = previousNode;
    }
    
    this.length--;
    return nodeToRemove.value;
  }

traverseToIndex(index) {
    let counter = 0;
    let currentNode = this.head;
    
    while (counter !== index) {
      currentNode = currentNode.next;
      counter++;
    }
    
    return currentNode;
  }

reverse() {
    if (!this.head.next) return this;
    
    let first = this.head;
    this.tail = this.head;
    let second = first.next;
    
    while(second) {
      const temp = second.next;
      second.next = first;
      first = second;
      second = temp;
    }
    
    this.head.next = null;
    this.head = first;
    return this;
  }

toArray() {
    const array = [];
    let currentNode = this.head;
    
    while(currentNode) {
      array.push(currentNode.value);
      currentNode = currentNode.next;
    }
    
    return array;
  }

print() {
    console.log(this.toArray());
  }
}

// Usage
const list = new LinkedList();
list.append(10);
list.append(20);
list.append(30);
list.prepend(5);
list.insert(2, 15);

console.log('Linked List:');
list.print();

console.log('Reversed:');
list.reverse().print();

console.log('Remove index 2:', list.remove(2));
list.print();

Project 4: Debounce & Throttle with Options

Enhanced debounce and throttle with leading/trailing options.

JavaScript Editor

// Advanced Debounce with Options
function debounce(func, wait, options = {}) {
  const {
    leading = false,
    trailing = true,
    maxWait
  } = options;

let timeoutId;
  let lastCallTime = 0;
  let lastInvokeTime = 0;
  let result;
  let lastArgs;

function invokeFunc(time) {
    const args = lastArgs;
    lastArgs = undefined;
    lastInvokeTime = time;
    result = func.apply(this, args);
    return result;
  }

function startTimer(pendingFunc, wait) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(pendingFunc, wait);
  }

function leadingEdge(time) {
    lastInvokeTime = time;
    if (leading) {
      return invokeFunc(time);
    }
    return result;
  }

function remainingWait(time) {
    const timeSinceLastCall = time - lastCallTime;
    const timeSinceLastInvoke = time - lastInvokeTime;
    const timeWaiting = wait - timeSinceLastCall;
    
    return maxWait === undefined
      ? timeWaiting
      : Math.min(timeWaiting, maxWait - timeSinceLastInvoke);
  }

function shouldInvoke(time) {
    const timeSinceLastCall = time - lastCallTime;
    const timeSinceLastInvoke = time - lastInvokeTime;
    
    return (
      lastCallTime === 0 ||
      timeSinceLastCall >= wait ||
      timeSinceLastCall < 0 ||
      (maxWait !== undefined && timeSinceLastInvoke >= maxWait)
    );
  }

function timerExpired() {
    const time = Date.now();
    if (shouldInvoke(time)) {
      return trailingEdge(time);
    }
    startTimer(timerExpired, remainingWait(time));
  }

function trailingEdge(time) {
    timeoutId = undefined;
    
    if (trailing && lastArgs) {
      return invokeFunc(time);
    }
    lastArgs = undefined;
    return result;
  }

debounced.cancel = function() {
    clearTimeout(timeoutId);
    lastCallTime = 0;
    lastArgs = undefined;
    timeoutId = undefined;
  };

debounced.flush = function() {
    return timeoutId === undefined ? result : trailingEdge(Date.now());
  };

return debounced;
}

// Advanced Throttle with Options
function throttle(func, wait, options = {}) {
  const {
    leading = true,
    trailing = true
  } = options;

return debounce(func, wait, {
    leading,
    trailing,
    maxWait: wait
  });
}

// Usage
function handleScroll() {
  console.log('Scroll event fired at:', new Date().toLocaleTimeString());
}

// Create throttled function (fires at most once per second)
const throttledScroll = throttle(handleScroll, 1000, {
  leading: true,
  trailing: true
});

// Simulate scroll events
console.log('Simulating scroll events:');
throttledScroll();
setTimeout(throttledScroll, 300);
setTimeout(throttledScroll, 600);
setTimeout(throttledScroll, 900);
setTimeout(throttledScroll, 1200);
setTimeout(throttledScroll, 1500);

Project 5: Form Validation Library

Create a reusable form validation system.

JavaScript Editor

// Form Validation Library
class Validator {
  constructor() {
    this.rules = new Map();
    this.customValidators = new Map();
    this.errors = new Map();
  }

// Built-in validators
  static validators = {
    required: (value) => ({
      isValid: value != null && value.toString().trim().length > 0,
      message: 'This field is required'
    }),

email: (value) => ({
      isValid: /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
      message: 'Please enter a valid email address'
    }),

minLength: (value, min) => ({
      isValid: value && value.length >= min,
      message: `Minimum length is ${min} characters`
    }),

maxLength: (value, max) => ({
      isValid: !value || value.length <= max,
      message: `Maximum length is ${max} characters`
    }),

pattern: (value, pattern) => ({
      isValid: new RegExp(pattern).test(value),
      message: 'Please match the requested format'
    }),

min: (value, min) => ({
      isValid: !isNaN(value) && Number(value) >= min,
      message: `Minimum value is ${min}`
    }),

max: (value, max) => ({
      isValid: !isNaN(value) && Number(value) <= max,
      message: `Maximum value is ${max}`
    })
  };

// Add validation rules for a field
  addRule(fieldName, ruleName, ...args) {
    if (!this.rules.has(fieldName)) {
      this.rules.set(fieldName, []);
    }
    
    const rule = Validator.validators[ruleName];
    if (!rule) {
      throw new Error(`Unknown validator: ${ruleName}`);
    }
    
    this.rules.get(fieldName).push({
      validator: rule,
      args: args
    });
  }

// Add custom validator
  addCustomValidator(name, validatorFn) {
    this.customValidators.set(name, validatorFn);
  }

// Add custom rule
  addCustomRule(fieldName, validatorName, ...args) {
    if (!this.rules.has(fieldName)) {
      this.rules.set(fieldName, []);
    }
    
    const validator = this.customValidators.get(validatorName);
    if (!validator) {
      throw new Error(`Unknown custom validator: ${validatorName}`);
    }
    
    this.rules.get(fieldName).push({
      validator: validator,
      args: args
    });
  }

// Validate a single field
  validateField(fieldName, value) {
    const fieldRules = this.rules.get(fieldName) || [];
    this.errors.delete(fieldName);
    
    for (const rule of fieldRules) {
      const { isValid, message } = rule.validator(value, ...rule.args);
      
      if (!isValid) {
        this.errors.set(fieldName, message);
        return false;
      }
    }
    
    return true;
  }

// Validate all fields
  validate(formData) {
    this.errors.clear();
    let isValid = true;
    
    for (const [fieldName, rules] of this.rules.entries()) {
      const value = formData[fieldName];
      
      for (const rule of rules) {
        const { isValid: fieldValid, message } = rule.validator(value, ...rule.args);
        
        if (!fieldValid) {
          this.errors.set(fieldName, message);
          isValid = false;
          break;
        }
      }
    }
    
    return isValid;
  }

// Get all errors
  getErrors() {
    return Object.fromEntries(this.errors);
  }

// Get error for specific field
  getError(fieldName) {
    return this.errors.get(fieldName);
  }

// Clear all errors
  clear() {
    this.errors.clear();
  }
}

// Usage
const validator = new Validator();

// Add rules
validator.addRule('name', 'required');
validator.addRule('name', 'minLength', 3);
validator.addRule('name', 'maxLength', 50);

validator.addRule('email', 'required');
validator.addRule('email', 'email');

validator.addRule('age', 'min', 18);
validator.addRule('age', 'max', 100);

// Add custom validator
validator.addCustomValidator('passwordMatch', (value, confirmValue) => ({
  isValid: value === confirmValue,
  message: 'Passwords do not match'
}));

// Test validation
const formData = {
  name: 'Jo',
  email: 'invalid-email',
  age: '16',
  password: 'secret123',
  confirmPassword: 'different'
};

validator.addCustomRule('confirmPassword', 'passwordMatch', formData.password);

console.log('Form validation result:', validator.validate(formData));
console.log('Errors:', validator.getErrors());

More Project Ideas:

Virtual DOM implementation
WebSocket connection manager
Event emitter system
Middleware pipeline
Dependency injection container
Reactive programming library (like RxJS simplified)
Server-side rendering framework

← JavaScript Design Patterns Advanced Interview Questions →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

Advanced JavaScript Projects

Project 1: State Management System

Project 2: Promise-based HTTP Client

Project 3: Data Structures Implementation

Project 4: Debounce & Throttle with Options

Project 5: Form Validation Library

More Project Ideas:

Follow Us

Our Tools

Our Company

Special Tools