HeightComparison.com is a high-traffic web utility used by millions to generate and compare visual height profiles of people, objects, and fictional characters. Elementica executed a complete platform overhaul — migrating a legacy Django/Vue prototype to a unified NestJS/Next.js architecture, adding multi-provider authentication, and offloading heavy 6,000+ line SVG snapshot generation to backend queues to eliminate browser freezing.
Visualization/Comparison Tool/Interactive
Zero browser freezing — complex 6,000+ line SVG rendering offloaded from client DOM to backend queues
Low-cost static scale — architecture refactored for static edge hosting, drastically cutting server overhead
Client context
HeightComparison.com grew into a widely used internet utility, allowing users to visually compare scale figures side by side on an interactive canvas. Despite drawing millions of visits, the underlying technology suffered from severe architectural debt: the legacy Django/Vue setup lacked basic user authentication, ran with exposed secret keys, and mixed database logic directly into route handlers.
Furthermore, as users built complex charts containing dozens of customized figures, rendering the resulting 6,000+ line SVG objects in real time locked up browser DOM threads, causing severe scroll lag and screen freezes.
The challenge
Modernizing a viral, high-traffic web utility required addressing critical stability and performance issues:
- Client-Side Rendering Collapse: Generating high-resolution image downloads of complex SVGs inside the user's browser consumed massive client memory, crashing mobile browsers and freezing desktop UI sessions.
- Security & Monetization Gaps: The original tool operated entirely on unauthenticated guest access. To introduce paid membership tiers (ad-free browsing, saved custom charts), we had to implement account management without frustrating existing guest users.
Elementica's role
Elementica served as the strategic development partner with a dedicated three-person team. We led the architectural redesign, migrated the backend to NestJS, rebuilt the frontend in Next.js, engineered the asynchronous SVG rendering engine, and implemented Paddle payment billing.
The solution
Modular NestJS Backend & Multi-Provider Auth
We replaced the monolithic Django codebase with a clean, modular NestJS architecture split into distinct domains (Cluster, Shared Links, Avatars, Celebrities). We integrated secure authentication supporting Google, Apple, Facebook, Twitter, and email logins, enabling users to save comparison boards across devices.
Asynchronous Backend SVG Snapshot Queue
To resolve browser freezing, we removed client-side image generation entirely. When a user requests a PNG snapshot of a 6,000+ line SVG comparison chart, the task is dispatched to an asynchronous backend worker queue powered by Redis and Puppeteer. The backend renders the image in headless nodes and returns a fast S3 image URL.
Unified Next.js Frontend & Static CDN Deployment
We rebuilt the web canvas using Next.js and Material UI, unifying the stack around TypeScript. We deployed static frontend assets to AWS S3 fronted by CloudFront edge nodes, keeping page load speeds fast worldwide while keeping server infrastructure costs minimal.
Engineering decisions that mattered
Offloading heavy SVG rendering to backend queues over patching client DOM code
Attempting to optimize client-side Canvas rendering for 6,000-line SVGs was a dead end for low-end mobile devices. Moving snapshot generation entirely to a dedicated backend worker pool eliminated browser thread locks, providing smooth drag-and-drop interactions regardless of chart complexity.
Unifying under a single TypeScript stack (NestJS + Next.js)
Replacing the fragmented Django/Vue split with a unified TypeScript codebase allowed us to share data transfer objects (DTOs), validation schemas, and type definitions between client and server, accelerating development speed and cutting bug rates.
Results
HeightComparison.com successfully transitioned from a fragile, unauthenticated tool into an enterprise-ready web platform. The system operates with zero browser freezing, supports ad-free paid memberships via Paddle, and scales effortlessly on static infrastructure under heavy viral traffic spikes.
Product evolution
The platform continues to expand its celebrity and historical object databases while introducing advanced 3D visual comparison tools into its engineering roadmap.
