Construction Inventory
Management System

The app has three inventory types — Materials, Equipment, and Workers — each with different table columns, different row data, and different register buttons. Instead of writing three separate render functions, I built one function getInventoryRenderConfig(type) that returns a configuration object (headers, row template, button text) depending on the type passed in. The render function then uses that config without knowing which type it's working with.

function getInventoryRenderConfig(type) {
  switch (type) {
    case 'materials':
      return {
        headers: `<th>NAME</th><th>UNIT COST</th>...`,
        renderRow: (obj, sn) => `<tr><td>${obj.name}</td>...</tr>`,
        buttonText: 'Register Material'
      };
    case 'equipment':
      return { /* different config */ };
    case 'workers':
      return { /* different config */ };
  }
}

When a user loads their dashboard, I need to do two things in order: first fetch their profile (to get their name), then fetch their projects. Using async/await makes this sequential and readable — each line waits for the previous one to complete before moving on. If the token is missing or expired, I redirect to login immediately without making unnecessary API calls.

async function loadProjects() {
  const token = localStorage.getItem("authToken");
  if (!token) {
    window.location.href = "/login.html"; // Guard clause — stop early
    return;
  }

  // First API call — fetch profile
  const profileResponse = await fetch("api/profile/me", {
    headers: { "Authorization": `Bearer ${token}` }
  });
  const profile = await profileResponse.json();

  // Second API call — fetch projects (runs after profile is done)
  const response = await fetch('/api/projects', {
    headers: { 'Authorization': `Bearer ${token}` }
  });
  const projects = await response.json();
}

When a user clicks on a project card, the app fetches that project's details from the API. If the user clicks the same card twice quickly — or clicks two cards in a row before the first response arrives — two requests fire at the same time and the UI can end up in a broken state. I solved this with a simple boolean flag: isFetchingProjectPage. If a fetch is already running, any new click is ignored until it completes.

let isFetchingProjectPage = false; // Lock flag

wrapper.addEventListener('click', async () => {
  if (isFetchingProjectPage) return; // Ignore click if already loading

  isFetchingProjectPage = true; // Acquire lock
  try {
    await fetchAndDisplayProjectPage(project.id);
  } catch (err) {
    console.error("Error displaying project page:", err);
  } finally {
    isFetchingProjectPage = false; // Always release lock, even on error
  }
});

The project page rendering is split into small, focused functions — each one doing exactly one job. renderProjectPage coordinates but doesn't do the work itself. renderProjectHeader builds only the header. setupCreateInventoryButton handles only that button's logic. setupCloseProjectPageButton handles only the close. This means if the header breaks, I know exactly where to look — and I can change one part without touching the others.

// Coordinator — calls others but does no work itself
function renderProjectPage({ id, name, type, address }) {
  ensureProjectPageContainer();       // Sets up the DOM container
  renderProjectHeader(id, name, address); // Builds the header HTML
  setupCreateInventoryButton(id, type);   // Wires up the create button
  setupCloseProjectPageButton();          // Wires up the close button
}

Project cards are created dynamically — they don't exist in the HTML when the page loads. Because of this, I can't attach event listeners to them directly on page load. Instead, I attach one listener to the document and check whether the clicked element is the one I care about. This also means I only need one listener no matter how many cards exist — cleaner and more memory-efficient.

// One listener on document handles clicks from many dynamic elements
document.addEventListener('mousedown', function (event) {
  if (event.target.classList.contains('show-history')) {
    // This fires for any .show-history element, even ones added later
    projectIdForModal = event.target.getAttribute('project-id');
    fetchUpdateDetails(projectIdForModal);
  }
});

When a user adds a project, I check whether a project with the same name and address already exists. But instead of just blocking the submission with a generic error, I flag each field independently — if the name matches, the name field border turns red. If the address matches, the address field border turns red. Only if both match is the submission blocked. This gives the user precise feedback about exactly what the problem is.

function checkForDuplicateProjectInputs(title, address) {
  let nameMatch = false;
  let addressMatch = false;

  for (let i = 0; i < projectListTitles.length; i++) {
    if (existingTitle === enteredTitle) nameMatch = true;
    if (existingAddress === enteredAddress) addressMatch = true;
  }

  // Flag each field independently — red border on the offending input
  if (nameMatch) addProjectTitle.style.border = '2px solid red';
  if (addressMatch) addProjectAddress.style.border = '2px solid red';

  // Only block submission if BOTH match — a duplicate project
  if (nameMatch && addressMatch) {
    toggleNotification(`Project already exists.`, '#f44336', true);
    return false;
  }
  return true;
}