Case Study: Erie, PA - Center of the Universe Website & Custom Architecture

The Erie, PA - Center of the Universe platform (erie-pa-centeroftheuniverse.com) required more than just a standard template layout—it demanded a high-performance, interactive local directory combined with engaging, community-driven storytelling.

Welcome to Erie, PA - Center of the Universe Homepage

As the lead designer and developer on this project, I engineered custom front-end components and serverless data integrations tailored to showcase Erie’s local businesses while keeping content updates effortless.

Code Spotlight 1: Dynamic Directory & Vercel API Integration#

One of the core features of the platform is the interactive local establishments directory. Instead of hard-coding dozens of individual business cards, I built a custom vanilla JavaScript integration that fetches live CMS data from a Vercel backend endpoint (https://erie-backend.vercel.app/api/local) and dynamically constructs a responsive, filterable CSS grid.

Full Directory Grid View#

Erie Local Establishments Directory Grid

Active Category Filtering (“Shopping”) & Floating Scroll-to-Top Button#

When a user clicks any category pill—such as Shopping—the script dynamically toggles the active button state and filters the DOM cards instantaneously without a page reload, while a custom keyframe-animated ↑ Top button floats in the bottom corner once the user scrolls down:

Filtered Directory View Showing Shopping Category

Core Implementation: Vercel Data Ingestion & Dynamic Grid Building#

Instead of maintaining a static frontend markup file, this script parses raw server text data on the fly and maps it cleanly into responsive grid cards:

1
// 1. Fetch Live CMS Data from Vercel Backend
2
async function loadDirectoryData() {
3
  const grid = document.getElementById('directoryGrid');
4
  const endpoint = 'https://erie-backend.vercel.app/api/local';
5

6
  try {
7
    const response = await fetch(endpoint);
8
    const data = await response.text();
9
    buildGrid(data, grid);
10
  } catch (error) {
11
    grid.innerHTML = '<p class="loading-text">Error loading directory data. Please try again later.</p>';
12
    console.error('Error fetching Vercel CMS data:', error);
13
  }
14
}
15

16
// 2. Parse Rows and Build Grid Elements
17
function buildGrid(data, grid) {
18
  const rows = data.split('\n');
19
  let htmlContent = '';
20

21
  for (let i = 1; i < rows.length; i++) {
22
    const row = rows[i].trim();
23
    if (!row) continue;
24

25
    const cols = row.split('\t');
26
    if (cols.length >= 5) {
27
      const [name, desc, img, link, category] = [cols[0], cols[1], cols[2], cols[3], cols[4].trim().toLowerCase()];
28

29
      htmlContent += `
30
        <a href="${link}" class="grid-card ${category}">
31
          <div class="image-wrapper"><img src="${img}" alt="${name}"></div>
32
          <div class="card-content">
33
            <h3>${name}</h3>
34
            <p>${desc}</p>
35
          </div>
36
        </a>
37
      `;
38
    }
39
  }
40
  grid.innerHTML = htmlContent;
41
}
42

43
loadDirectoryData();

Instant DOM Category Filtering Logic#

This lightweight filter handler manages active button styling and class toggling instantly across the card grid with zero external library overhead:

1
function filterCategory(category, btnElement) {
2
  const cards = document.getElementsByClassName("grid-card");
3
  const btns = document.getElementsByClassName("filter-btn");
4

5
  // Reset active button states
6
  for (let j = 0; j < btns.length; j++) {
7
    btns[j].classList.remove("active");
8
  }
9
  btnElement.classList.add("active");
10

11
  // Toggle visibility classes on cards
12
  for (let i = 0; i < cards.length; i++) {
13
    cards[i].classList.remove("hide-item");
14
    if (category !== 'all' && !cards[i].classList.contains(category)) {
15
      cards[i].classList.add("hide-item");
16
    }
17
  }
18
}

To enhance the user experience on individual establishment spotlight pages (such as E. Lane Boutique) and keep visitors within the site ecosystem, I engineered a context-aware ← Back button.

Instead of a static link that could trap users who arrived directly from Google Search, this vanilla JavaScript snippet checks document.referrer. If the visitor navigated from inside erie-pa-centeroftheuniverse.com, it returns them to their exact previous scroll and filter state via window.history.back(). If they arrived from an external link, it routes them cleanly to the homepage.

1
function smartBack() {
2
  // Check if the user came from an internal page on the domain
3
  if (document.referrer.includes("erie-pa-centeroftheuniverse.com")) {
4
    window.history.back();
5
  } else {
6
    // Fallback to homepage if arrived via direct search/external link
7
    window.location.href = "https://www.erie-pa-centeroftheuniverse.com/";
8
  }
9
}

Results & Impact#

By combining custom front-end engineering with clean brand positioning, the platform delivers fast directory filtering, intuitive navigation, and an easily maintainable data pipeline that scales alongside community growth.

Have a custom web development or engineering project that needs a high-performance solution? Get in touch with Kat Noodle Designs.

Client Reviews & Feedback

Leave a review below using GitHub, or submit directly via our quick client form!

✍️ Submit a Review (No Login Needed)

Baldwin Wallace University Esports: Content Management, Photography & Brand Growth

Esports Ohio: Social Media Management, Information Design & Player Highlights

Project Overview#