Engineering Vault | StackRepo

Jan 31, 2026

Serverless Webhooks: Syncing Form Data to Sheets

System Design

"Standard form submissions are boring. I wanted a system that triggers an instant email notification every time a student submits a query, using Google Apps Script as a microservice."

Apps Script Webhook

function doPost(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = e.parameter;
  sheet.appendRow([new Date(), data.name, data.email, data.msg]);
  MailApp.sendEmail(data.email, "StackRepo Confirmation", "We received your data.");
  return ContentService.createTextOutput("200 OK").setMimeType(ContentService.MimeType.TEXT);
}

Feb 01, 2026

Infinite Scroll & Dynamic Asset Loading

Performance

"Loading 100 projects at once kills the LCP score. I implemented a sentinel-based Intersection Observer to fetch data only when the user reaches the footer."

Intersection Logic

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    loadMoreContent(); // Custom fetch function
  }
}, { threshold: 1.0 });
observer.observe(document.querySelector('#sentinel'));

Feb 02, 2026

Building a Custom State Manager in Vanilla JS

Architecture

State Management Logic

const createStore = (initialState) => {
  let state = initialState;
  const listeners = [];
  return {
    getState: () => state,
    dispatch: (action) => { state = reducer(state, action); listeners.forEach(l => l()); },
    subscribe: (l) => listeners.push(l)
  };
};

Feb 03, 2026

Securing Routes with JWT & LocalStorage

Security

Auth Guard

const checkAuth = () => {
  const token = localStorage.getItem('token');
  if (!token) window.location.href = '/login';
  const payload = JSON.parse(atob(token.split('.')[1]));
  if (payload.exp < Date.now() / 1000) logout();
};

Feb 05, 2026

Optimizing Search with Debounce Logic

Algorithms

Prevent API spam by waiting for the user to stop typing before firing the request.

Debounce Function

function debounce(func, timeout = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}

Feb 07, 2026

Writing a Custom Fetch Wrapper for APIs

Clean Code

API Wrapper

const api = async (url, options = {}) => {
  const headers = { 'Content-Type': 'application/json' };
  const response = await fetch(url, { ...options, headers });
  if (!response.ok) throw new Error(response.statusText);
  return response.json();
};

Feb 10, 2026

Real-time Multi-tab State Sync

Advanced Browser APIs

Use the 'storage' event listener to sync data between two open browser tabs instantly.

Storage Listener

window.addEventListener('storage', (event) => {
  if (event.key === 'theme') {
    applyNewTheme(event.newValue);
  }
});

Feb 12, 2026

Beyond Media Queries: Container Queries

Modern CSS

Container Logic

.card-parent { container-type: inline-size; }
@container (min-width: 400px) {
  .card-child { display: grid; grid-template-columns: 1fr 1fr; }
}

Feb 15, 2026

Graceful Degradation: Global Error Catching

Reliability

Error Handler

window.onerror = function(msg, url, line) {
  console.error(`Error in ${url} at line ${line}: ${msg}`);
  showUserFriendlyError(); // Custom UI
  return true; // Prevents browser console log
};

Feb 18, 2026

Dynamic XML Sitemap Generation

SEO Engineering

Automatically generate a robots-friendly sitemap using Node.js or a Python script.