Contact Manager — Project

CS Majors vs Gorilla — main home page — Main Home Page is all that is accessable due to website being down.

Overview

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 (XMLHttpRequest) to communicate with a lightweight PHP backend and updates the page without reloads.

My Role — Project Manager

Planning & scope: defined functional requirements, split milestones (search → add/edit → delete → polish), tracked progress using a Gantt chart.
Coordination: scheduled group meetings, tracked members, assigned issues/PRs, and enforced code-review checklists.
Architecture & handoffs: finalized endpoint contracts (search.php, add.php, update.php, delete.php) and payload shapes.
Quality: validated forms (HTML constraints + JS), accessibility passes (labels, focus order, ARIA), and browser checks.
DevOps: coordinated hosting and transfers (GoDaddy/DigitalOcean), SFTP/SSH (FileZilla, PuTTY), and environment setup documentation.

Features

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

Architecture

Front-end: Semantic HTML sections, CSS (flex/grid), unobtrusive JS for DOM updates.
Transport: XMLHttpRequest with JSON payloads/responses; centralized request helpers.
Backend: PHP scripts returning JSON (search.php, add.php, update.php, delete.php).
Data: MySQL schema for contacts (name, email, phone, etc.), parameterized queries.

Technical Contributions

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

Challenges & Lessons

Race conditions: solved null element references with safe selectors and render timing.
Validation UX: combined native constraints with concise custom messages for clarity and screen-reader compatibility.
Separation of concerns: kept HTML semantic, CSS for layout/visuals, and JS for behavior to simplify maintenance.
Collaboration: Learned to manage a team, delegate tasks, and enforce quality through reviews and checklists.

Skills Demonstrated

Project management (scope, milestones, issue/PR workflow, stand-ups)
Semantic HTML & accessible forms (labels, aria-live, focus order)
AJAX with XMLHttpRequest to PHP endpoints
Responsive CSS with flex/grid
Basic DevOps (GoDaddy/DigitalOcean, FileZilla, PuTTY)