fix: patch security vulnerabilities, optimize Three.js lifecycle, and refactor architecture

[davishkar]

DevRealm — Fixes & Architecture Updates

This document provides a comprehensive summary of all the bugs fixed, security vulnerabilities patched, and architectural improvements made to the DevRealm project.

1. Security & Vulnerability Patches

• Critical XSS Mitigation: Eliminated Cross-Site Scripting (XSS) vulnerabilities in buildRepos() and buildAnalytics(). Previously, untrusted data from the GitHub API was injected directly into the DOM via innerHTML. This was completely refactored to use safe DOM API methods (document.createElement and textContent).
• Tab-napping Prevention: Hardened all window.open external link calls by appending noopener, noreferrer to prevent malicious pages from hijacking the origin tab.

2. Memory Leaks & Performance Optimization

• Three.js Garbage Collection: Fixed a severe memory leak occurring during consecutive searches. The destroyCity() function now actively traverses the Three.js scene to correctly .dispose() of all geometries, materials, and the renderer instance.
• Event Listener Cleanup: Stopped the persistent accumulation of resize event listeners by explicitly removing the handler when a user navigates back to the landing page.
• Render Loop Pausing: Fixed an issue where the heavy 3D rendering loop continued executing in the background even after the user clicked "NEW SEARCH", significantly improving battery and CPU performance.

3. UI/UX Resiliency

• Three.js Loading Guard: Added a safeguard that gracefully catches errors if the external Three.js CDN fails to load, preventing a total application crash.
• Image Fallbacks: Implemented robust image fallback logic for user avatars and the share card, ensuring broken image links are dynamically replaced with stylized UI avatars.
• Robust Selectors: Replaced fragile DOM queries that depended on exact element order with robust ID-based selectors.

4. Architecture Refactor (Monolith to Node.js)

• Separation of Concerns: Extracted the monolithic, single-file index.html into a modern application structure:
  • public/index.html (Markup)
  • public/css/style.css (Styling)
  • public/js/app.js (Logic)
• Node.js Environment: Initialized a package.json and established a lightweight Express backend (server.js) to serve the static frontend. This sets the foundation for a future backend proxy (to bypass GitHub API rate limits).

5. Internationalization (i18n) Engine

• Custom Translation Engine: Developed a lightweight, zero-dependency translation engine (public/js/i18n.js).
• Multi-Language Support: Fully integrated English (en) and Spanish (es) translations.
• Dynamic DOM Translation:
  • Refactored index.html to utilize data-i18n attributes for all static text.
  • Wrapped all dynamically injected JavaScript strings, alert messages, and tooltips in a t('key') function.
  • Implemented an onLanguageChange observer to instantly re-render active dashboard modules when the user toggles their language preference.