project-contact-manager.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact Manager: Project</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400..800&display=swap">
  <link rel="stylesheet" href="styles.css">
  <meta name="theme-color" content="#a3e635">
  <link rel="icon" href="/images/favicon.ico" sizes="32x32">
  <link rel="icon" type="image/png" href="/images/favicon-192.png" sizes="192x192">
  <link rel="apple-touch-icon" href="/images/favicon-180.png">
  <script>/* Set the colour mode before first paint, or the page flashes.
     A saved choice wins; otherwise the browser's own preference decides, and
     light is the default when the browser states no preference either way. */
  (function(){try{var m=localStorage.getItem('mode')||
  (matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');
  document.documentElement.dataset.mode=m;}catch(e){}})();</script>
  <script src="main.js" defer></script>
</head>

<body class="theme-lime">

  <nav class="navbar" aria-label="Primary">
      <a class="navbar-item navbar-home" href="index.html">
        <img class="mark-dark" src="images/DGsqarecircle.png" alt="" aria-hidden="true"
             width="1181" height="1181" decoding="async">
        <img class="mark-light" src="images/DGsquarecirclelightmode.png" alt="" aria-hidden="true"
             width="1181" height="1181" decoding="async">
        <span class="navbar-label">David Gusmao</span>
      </a>
    <div class="navbar-scroll">
      <a class="navbar-item" href="#overview">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.2 2.4h7L18.6 7.6v12.2a1.8 1.8 0 0 1-1.8 1.8H6.2a1.8 1.8 0 0 1-1.8-1.8V4.2a1.8 1.8 0 0 1 1.8-1.8Z"/><path d="M12.9 2.6v5.2h5.5"/><path d="M7.6 12.4h7.8M7.6 15.4h7.8M7.6 18.4h4.8"/></svg>
        <span class="navbar-label">Overview</span>
      </a>
      <a class="navbar-item" href="#role">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3.4" width="18" height="17.2" rx="2.6"/><circle cx="12" cy="10" r="2.8"/><path d="M7.6 17.6a4.7 4.7 0 0 1 8.8 0"/></svg>
        <span class="navbar-label">My Role</span>
      </a>
      <a class="navbar-item" href="#features">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 2.6 2.9 5.88 6.5.95-4.7 4.58 1.11 6.47L12 17.42l-5.81 3.06 1.11-6.47-4.7-4.58 6.5-.95L12 2.6Z"/></svg>
        <span class="navbar-label">Features</span>
      </a>
      <a class="navbar-item" href="#architecture">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 2.8 9 4.6-9 4.6-9-4.6 9-4.6Z"/><path d="m3 12.4 9 4.6 9-4.6"/><path d="m3 17 9 4.6 9-4.6"/></svg>
        <span class="navbar-label">Architecture</span>
      </a>
      <a class="navbar-item" href="#contributions">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6.4" cy="5.2" r="2.3"/><circle cx="6.4" cy="18.8" r="2.3"/><circle cx="17.6" cy="9.6" r="2.3"/><path d="M6.4 7.5v9"/><path d="M15.3 9.6h-3.2a5.7 5.7 0 0 0-5.7 5.7v1.2"/></svg>
        <span class="navbar-label">Contributions</span>
      </a>
      <a class="navbar-item" href="#lessons">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8.6 15.4A6.6 6.6 0 1 1 15.4 15.4c-.9.8-1.4 1.6-1.5 2.6h-3.8c-.1-1-.6-1.8-1.5-2.6Z"/><path d="M10.1 20.4h3.8M10.8 22.6h2.4"/></svg>
        <span class="navbar-label">Lessons</span>
      </a>
      <a class="navbar-item" href="#skills">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="3.4" r="1.9"/><circle cx="3.7" cy="7.4" r="1.9"/><circle cx="20.3" cy="7.4" r="1.9"/><path d="M12 5.3v3.3M5.4 8.5l3.3 1.9M18.6 8.5l-3.3 1.9"/><circle cx="12" cy="12.4" r="2.9"/><path d="M7.2 20a4.9 4.9 0 0 1 9.6 0"/></svg>
        <span class="navbar-label">Skills</span>
      </a>
      <a class="navbar-item" href="#links">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13.6a4.2 4.2 0 0 0 6.3.46l2.5-2.5a4.2 4.2 0 0 0-5.94-5.94l-1.43 1.42"/><path d="M14 10.4a4.2 4.2 0 0 0-6.3-.46l-2.5 2.5a4.2 4.2 0 0 0 5.94 5.94l1.42-1.42"/></svg>
        <span class="navbar-label">Links</span>
      </a>
    </div>
    <button class="navbar-item navbar-toggle" type="button" aria-pressed="false"
            aria-label="Switch to light mode">
      <span class="icon-light"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4.3"/><path d="M12 1.8v2.6M12 19.6v2.6M22.2 12h-2.6M4.4 12H1.8M19.2 4.8l-1.85 1.85M6.65 17.35 4.8 19.2M19.2 19.2l-1.85-1.85M6.65 6.65 4.8 4.8"/></svg></span>
      <span class="icon-dark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.6 14.4A8.6 8.6 0 0 1 9.6 3.4 8.6 8.6 0 1 0 20.6 14.4Z"/></svg></span>
      <span class="navbar-label">Light</span>
    </button>
  </nav>

<header class="simple glass">
    <h1 class="neon">Contact Manager</h1>
    <p class="subtitle">
      Completed Jun 2025 · Team of 4 · LAMP stack (Linux, Apache, MySQL, PHP), FileZilla, GoDaddy, DigitalOcean, PuTTY
    </p>
    <p class="subtitle">
      Repository:
      <a href="https://github.com/jm19pa/COP4331-Group16-Small-Project" target="_blank" rel="noopener">
        github.com/jm19pa/COP4331-Group16-Small-Project ↗
      </a>
    </p>
  </header>

  <main>
    <article>
      <figure>
        <img src="images/gorilla-home-page.webp" alt="CS Majors vs Gorilla, main home page"
             width="1595" height="705" decoding="async">
        <figcaption>Main Home Page is all that is accessable due to website being down.</figcaption>
      </figure>

      <h2 id="overview">Overview</h2>
      <p>
        A clean, semantic, and responsive contact manager built as a small-group project.
        The interface supports searching, adding, editing, and deleting contacts. The front end uses
        vanilla JavaScript (<code>XMLHttpRequest</code>) to communicate with a lightweight PHP backend
        and updates the page without reloads.
      </p>

      <h2 id="role">My Role: Project Manager</h2>
      <ul>
        <li><strong>Planning & scope:</strong> defined functional requirements, split milestones (search → add/edit → delete → polish), tracked progress using a Gantt chart.</li>
        <li><strong>Coordination:</strong> scheduled group meetings, tracked members, assigned issues/pull requests (PRs), and enforced code-review checklists.</li>
        <li><strong>Architecture & handoffs:</strong> finalized endpoint contracts (<code>search.php</code>, <code>add.php</code>, <code>update.php</code>, <code>delete.php</code>) and payload shapes.</li>
        <li><strong>Quality:</strong> validated forms (HTML constraints + JS), accessibility passes covering labels, focus order, and ARIA (Accessible Rich Internet Applications) attributes, and browser checks.</li>
        <li><strong>DevOps:</strong> coordinated hosting and transfers (GoDaddy/DigitalOcean), secure file transfer protocol (SFTP)/secure shell (SSH) (FileZilla, PuTTY), and environment setup documentation.</li>
      </ul>

      <h2 id="features">Features</h2>
      <ul>
        <li><strong>Live search:</strong> debounced input calls <code>search.php</code> and renders results dynamically.</li>
        <li><strong>CRUD (create, read, update, delete):</strong> create/update/delete via PHP endpoints with optimistic user interface (UI) and error fallback.</li>
        <li><strong>Validation:</strong> native HTML constraints (<code>required</code>, <code>type="email"</code>, <code>pattern</code>) plus JS error messaging.</li>
        <li><strong>Responsive design:</strong> form/table layouts adapt cleanly from mobile to desktop.</li>
        <li><strong>Accessible UI:</strong> proper labels/ids, descriptive buttons, visible focus states, logical tab order.</li>
      </ul>

      <h2 id="architecture">Architecture</h2>
      <ul>
        <li><strong>Front-end:</strong> Semantic HTML sections, CSS (flex/grid), unobtrusive JS for Document Object Model (DOM) updates.</li>
        <li><strong>Transport:</strong> <code>XMLHttpRequest</code> with JavaScript Object Notation (JSON) payloads/responses; centralized request helpers.</li>
        <li><strong>Backend:</strong> PHP scripts returning JSON (<code>search.php</code>, <code>add.php</code>, <code>update.php</code>, <code>delete.php</code>).</li>
        <li><strong>Data:</strong> MySQL schema for contacts (name, email, phone, etc.), parameterized queries.</li>
      </ul>

      <h2 id="contributions">Technical Contributions</h2>
      <ul>
        <li>Implemented the delete flow and fixed a null-DOM reference bug by guarding queries and deferring lookups until content mount.</li>
        <li>Wrote XMLHttpRequest (XHR) utilities for GET/POST, standardized success/error handling, and added status toasts.</li>
        <li>Authored the form accessibility pattern (labels, error regions, focus management) and responsive form grid.</li>
      </ul>

      <h2 id="lessons">Challenges & Lessons</h2>
      <ul>
        <li><strong>Race conditions:</strong> solved null element references with safe selectors and render timing.</li>
        <li><strong>Validation user experience (UX):</strong> combined native constraints with concise custom messages for clarity and screen-reader compatibility.</li>
        <li><strong>Separation of concerns:</strong> kept HTML semantic, CSS for layout/visuals, and JS for behavior to simplify maintenance.</li>
        <li><strong>Collaboration:</strong> Learned to manage a team, delegate tasks, and enforce quality through reviews and checklists.</li>
      </ul>

      <h2 id="skills">Skills Demonstrated</h2>
      <ul>
        <li>Project management (scope, milestones, issue/PR workflow, stand-ups)</li>
        <li>Semantic HTML & accessible forms (labels, aria-live, focus order)</li>
        <li>Asynchronous JavaScript and XML (AJAX) with <code>XMLHttpRequest</code> to PHP endpoints</li>
        <li>Responsive CSS with flex/grid</li>
        <li>Basic DevOps (GoDaddy/DigitalOcean, FileZilla, PuTTY)</li>
      </ul>

      <h2 id="links">Links</h2>
      <ul>
        <li>Source Code:
          <a href="https://github.com/jm19pa/COP4331-Group16-Small-Project" target="_blank" rel="noopener">
            github.com/jm19pa/COP4331-Group16-Small-Project
          </a>
        </li>
        <li>No public demo is hosted at this time.</li>
      </ul>

      <p>
        Also see my other projects on the <a href="index.html#work">Projects</a> section,
        connect on <a href="https://www.linkedin.com/in/david-e-gusmao/" target="_blank" rel="noopener">LinkedIn</a>,
        or visit my <a href="https://github.com/D4DavidG" target="_blank" rel="noopener">GitHub profile</a>.
      </p>
    </article>
  </main>

  <footer>
    <p><span id="year"></span> David Gusmao ·
      <a href="https://d4davidg.github.io/" target="_blank" rel="noopener">Portfolio</a> ·
      <a href="https://github.com/D4DavidG" target="_blank" rel="noopener">GitHub</a> ·
      <a href="https://www.linkedin.com/in/david-e-gusmao/" target="_blank" rel="noopener">LinkedIn</a>
    </p>
  </footer>
</body>
</html>