perf: add debounce to search inputs to prevent excessive re-renders

index.html

@@ -243,7 +243,7 @@
 
     .timeline-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
     .timeline-grid span { font-size: 0.75rem; font-weight: 500; color: #666; background: #fff; border: 1px solid #eee; padding: 0.3rem 0.7rem; border-radius: 0.5rem; }
     .timeline-grid span.current-year { background: #fffbeb; color: #d97706; border-color: #fef3c7; font-weight: 700; }
 
     .modal-footer { padding: 2rem 3rem 3rem; background: #f9f9f9; display: flex; gap: 1rem; border-top: 1px solid #eee; flex-shrink: 0; }
     .modal-cta { flex: 1; padding: 1rem; border-radius: 1rem; font-size: 0.8rem; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.2s; }
@@ -938,7 +938,7 @@
 </header>
 
 <!-- Mobile Menu Overlay -->
 <div id="mobileMenu" class="fixed inset-0 z-40 hidden md:hidden" role="dialog" aria-modal="true" aria-label="Navigation menu">
   <!-- Backdrop -->
   <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="toggleMenu()" onkeydown="if(event.key==='Enter'||event.key===' ')toggleMenu()" tabindex="0" role="button" aria-label="Close menu"></div>
 
@@ -1847,7 +1847,7 @@
     updateThemeIcon();
   })();
 
   window.toggleTheme = function(){
     const isDark = document.documentElement.classList.toggle('dark');
     localStorage.setItem('theme', isDark ? 'dark' : 'light');
     updateThemeIcon();
@@ -1868,7 +1868,7 @@
   // ══════════════════════════════════════════════
   // MOBILE MENU
   // ══════════════════════════════════════════════
   const desktopNavMediaQuery = window.matchMedia('(min-width: 768px)');
 
   function openMobileMenu(){
     const menu = document.getElementById('mobileMenu');
@@ -2281,7 +2281,7 @@
     container.innerHTML = badges + clearAll;
   }
 
   window.unselectLanguage = function(lang) {
     selectedLanguages.delete(lang);
     const pillBtn = document.querySelector(`.pill[data-lang="${lang}"]`);
     if (pillBtn) {
@@ -2292,7 +2292,7 @@
     applyFilters();
   }
 
   window.clearAllLanguages = function() {
     selectedLanguages.clear();
     document.querySelectorAll('.pill.active').forEach(p => {
       p.classList.remove('active');
@@ -2305,7 +2305,7 @@
   // NOTE: toggleLanguageMode removed — the matchAllLanguagesToggle checkbox
   // uses a direct event listener (line ~1538) and does not use onclick=.
 
   window.togglePill = function(el) {
     const langDisplay = el.dataset.lang || '';
     const langKey = langDisplay.trim().toLowerCase();
     if (!langKey) return;
@@ -2782,7 +2782,7 @@
       container.innerHTML = MILESTONES.map((m, i) => {
         const isActive = i === activeIdx;
         const isLast = i === MILESTONES.length - 1;
         const connector = !isLast ? `<div class="w-0.5 h-10 bg-zinc-200"></div>` : '';
         let dateStr;
         try {
           dateStr = m.date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).toUpperCase();
@@ -2850,7 +2850,7 @@
   }
 
   // Organizational Logo Fallbacks
   window.handleImgError = function(img, orgName) {
     if (!img.dataset.triedClearbit) {
       img.dataset.triedClearbit = 'true';
       const domain = orgName.toLowerCase().replace(/[^a-z0-9]/g, '') + '.org';
@@ -3199,7 +3199,7 @@
   // ══════════════════════════════════════════════
   let prevFocusBeforeAnalytics = null;
 
   window.openAnalytics = function() {
     // Save current focus
     prevFocusBeforeAnalytics = document.activeElement;
 
@@ -3219,7 +3219,7 @@
     }, 100);
   };
 
   window.closeAn = function() {
     document.getElementById('anBg')?.classList.remove('open');
     document.body.style.overflow = 'auto';
 
@@ -3230,7 +3230,7 @@
     prevFocusBeforeAnalytics = null;
   };
 
   window.closeAnEvent = function(e) {
     if (e.target.id === 'anBg') {
       closeAn();
     }
@@ -3323,7 +3323,7 @@
   // WATCHLIST — centralised bookmark sync helper
   // ══════════════════════════════════════════════
   function refreshVisibleBookmarkButtons() {
-    document.querySelectorAll('#orgGrid .bookmark-btn[data-bookmark-org]').forEach(btn => {
+    document.querySelectorAll('.bookmark-btn[data-bookmark-org]').forEach(btn => {
       const isBookmarked = bookmarkedSet.has(btn.dataset.bookmarkOrg);
       btn.classList.toggle('active', isBookmarked);
       btn.classList.toggle('text-zinc-300', !isBookmarked);
@@ -3879,7 +3879,7 @@
     return a.name.localeCompare(b.name);
   }
 
   window.clearAllFilters = function() {
     document.getElementById('searchInput').value = '';
     document.getElementById('categoryFilter').value = 'all';
     document.getElementById('complexityFilter').value = 'all';
@@ -4617,7 +4617,7 @@
 
   });
 
   window.closeHelpModal = closeHelpModal;
 
 });
 </script>

src/js/app.js

@@ -35,6 +35,17 @@ globalThis.matchAllLanguages = matchAllLanguages;
 globalThis.compareList = compareList;
 globalThis.bookmarkedSet = bookmarkedSet;
 
+// ══════════════════════════════════════════════
+// DEBOUNCE UTILITY FOR SEARCH OPTIMIZATION
+// ══════════════════════════════════════════════
+function debounce(fn, delay) {
+  let timeoutId;
+  return function debounced(...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn(...args), delay);
+  };
+}
+
 const CATEGORY_META = {
   science: { className: 'bg-blue-100 text-blue-700', label: 'Science' },
   programming: { className: 'bg-violet-100 text-violet-700', label: 'Programming' },
@@ -2431,11 +2442,14 @@ document.addEventListener('DOMContentLoaded', () => {
   renderGoodFirstIssues();
 
   // Wire up filter event listeners
-  document.getElementById('searchInput')?.addEventListener('input', applyFilters);
+  const debouncedApplyFilters = debounce(applyFilters, 250);
+  const debouncedRenderMentorFinder = debounce(renderMentorFinder, 250);
+
+  document.getElementById('searchInput')?.addEventListener('input', debouncedApplyFilters);
   document.getElementById('categoryFilter')?.addEventListener('change', applyFilters);
   document.getElementById('complexityFilter')?.addEventListener('change', applyFilters);
   document.getElementById('sortSelect')?.addEventListener('change', applyFilters);
-  document.getElementById('mentorSearchInput')?.addEventListener('input', renderMentorFinder);
+  document.getElementById('mentorSearchInput')?.addEventListener('input', debouncedRenderMentorFinder);
   document.getElementById('mentorChannelFilter')?.addEventListener('change', renderMentorFinder);
   document.getElementById('matchAllLanguagesToggle')?.addEventListener('change', (e) => {
     matchAllLanguages = e.target.checked;
@@ -2486,7 +2500,7 @@ document.addEventListener('DOMContentLoaded', () => {
         searchInput.value = e.target.value;
         const orgsSec = document.getElementById('orgs');
         if (orgsSec) orgsSec.scrollIntoView({ behavior: 'smooth' });
-        applyFilters();
+        debouncedApplyFilters();
       }
     });
   }

src/js/githubAnalyzer.js

@@ -35,17 +35,90 @@
   }
 }
 
+/**
+ * Directly queries the public GitHub REST API from the client browser.
+ * Used as a fallback when the edge proxy is unavailable or unauthenticated.
+ * Subject to GitHub's unauthenticated rate limit (60 req/hr per IP).
+ *
+ * @param {string} normalizedUsername - Lowercase GitHub username
+ * @returns {Promise<Object>} - Profile data in the same shape as the edge proxy response
+ */
+async function fetchUserProfileDirect(normalizedUsername) {
+  const response = await fetch(
+    // Fetch up to 100 most recently updated repos (GitHub API max per_page).
+    // Note: Users with >100 repos will have incomplete profile data.
+    `https://api.github.com/users/${encodeURIComponent(normalizedUsername)}/repos?per_page=100&sort=updated`,
+    {
+      headers: {
+        Accept: 'application/vnd.github+json',
+        'X-GitHub-Api-Version': '2022-11-28',
+        'User-Agent': 'gsoc-org-finder',
+      },
+    }
+  );
+
+  if (!response.ok) {
+    throw new Error(`GitHub ${response.status}`);
+  }
+
+  const repos = await response.json();
+
+  if (!Array.isArray(repos)) {
+    throw new Error('GitHub API returned invalid response format');
+  }
+
+  let totalStars = 0;
+  const languageCounts = {};
+  const topicCounts = {};
+  let activeDays = 9999;
+
+  repos.forEach(r => {
+    if (r.fork) return;
+    totalStars += r.stargazers_count || 0;
+    if (r.language) {
+      languageCounts[r.language] = (languageCounts[r.language] || 0) + 1;
+    }
+    if (Array.isArray(r.topics)) {
+      r.topics.forEach(t => { topicCounts[t] = (topicCounts[t] || 0) + 1; });
+    }
+    if (r.pushed_at) {
+      const days = Math.floor((Date.now() - new Date(r.pushed_at)) / 86400000);
+      if (days < activeDays) activeDays = days;
+    }
+  });
+
+  const languages = Object.entries(languageCounts).sort((a, b) => b[1] - a[1]).map(x => x[0]);
+  const topics = Object.entries(topicCounts).sort((a, b) => b[1] - a[1]).map(x => x[0]);
+
+  let activity = 'low';
+  if (activeDays < 30) activity = 'high';
+  else if (activeDays < 90) activity = 'medium';
+
+  return { languages, topics, stars: totalStars, activity };
+}
+
 async function fetchUserProfileFromAPI(normalizedUsername, signal) {
-  const response = await fetch(`${USER_API_ENDPOINT}?user=${encodeURIComponent(normalizedUsername)}`, { signal });
+  let response;
   let data;
+
   try {
-    data = await response.json();
-  } catch {
-    // Handle case where response is not valid JSON
+    response = await fetch(`${USER_API_ENDPOINT}?user=${encodeURIComponent(normalizedUsername)}`, { signal });
+    try {
+      data = await response.json();
+    } catch {
+      // Response body is not valid JSON
+    }
+  } catch (err) {
+    if (err.name === 'AbortError') throw err;
+    // Edge proxy is unreachable (network error, no GITHUB_TOKEN configured, etc.)
+    // Fall back to the public GitHub API directly from the browser.
+    return await fetchUserProfileDirect(normalizedUsername);
   }
 
   if (!response.ok) {
-    throw new Error(data?.error || `Failed to fetch user data: ${response.status}`);
+    // Edge proxy returned an error status. Fall back to the public GitHub API
+    // so the recommender remains usable in local forks and unauthenticated deploys.
+    return await fetchUserProfileDirect(normalizedUsername);
   }
 
   if (!data) {
@@ -131,7 +204,3 @@
 
 // Export for global usage
 globalThis.analyzeGitHubUser = analyzeGitHubUser;
-
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = { analyzeGitHubUser };
-}