Skip to content
Anderson Rocha

work / 03Singular Apps

Catalog Platform Rebuild for 27 Countries

Role
Frontend Engineer
Company
Singular Apps
Period
2023–2025
Stack
Next.js · React · TypeScript · React Query · 2D/3D visualization
Impact
Shipped across 27 countries; bulk import supporting 100k+ technical catalogs; onboarding rework contributed to a 35% increase in customer acquisition.

Context

At Singular Apps, I worked on a large-scale engineering catalog platform serving enterprise clients across 27 countries. In 2023, a global product rebrand set the terms for a full rebuild: the legacy platform could not carry the new identity, and its architecture was not suited to the SEO and international distribution requirements the rebrand introduced. I led development of the replacement — a high-performance Next.js platform built from scratch — covering the rendering architecture, the data-fetching layer, bulk import workflows for enterprise catalog data, and a rework of the onboarding funnel alongside product and design. The platform's core job is technical: users navigate deep catalog hierarchies and visualize parts through a 2D/3D navigation system, so the frontend had to handle both content-heavy public pages and dense interactive tooling.

Decisions

Rebuild from scratch rather than migrate incrementally. An incremental migration preserves working behavior but drags legacy constraints into every new decision. The rebrand invalidated much of the existing surface anyway, and international SEO is difficult to retrofit — it has to be architectural. Next.js gave us server-rendered, indexable catalog pages suitable for distribution across 27 countries. The cost of starting over is losing accumulated edge-case handling, which we offset with frontend standards and structured code reviews.

Background upload with polling for bulk import. Enterprise users import catalogs at a scale of 100k+ technical catalogs. Tying that to a synchronous request lifecycle blocked the UI and failed on timeouts. I designed the import as a background upload and processing system: the client submits the job, the server processes it independently, and the UI polls for status. Polling is less elegant than a push channel, but it keeps the client stateless, survives dropped connections, and requires no persistent connection infrastructure — the right trade for operations that run long and must never lock the interface.

React Query as a deliberate caching layer, not a convenience. With heavy API traffic across catalog views, the risk runs in both directions: redundant refetching inflates latency, and careless caching serves stale data in a system where bulk imports mutate large portions of the catalog. I structured the data layer around explicit cache keys, query invalidation tied to mutations, and background synchronization — minimizing redundant API calls while keeping views consistent after imports landed.

Iterate on onboarding instead of redesigning it once. The multi-step onboarding was reworked in collaboration with product and design as a series of simplifications and measured UI improvements rather than a single big-bang redesign. Shipping iteratively let each change be evaluated on its own, and the cumulative rework contributed to a 35% increase in customer acquisition.

rollout diffusion — 27 locales, one platform

the rebuild shipped SEO-ready pages per locale from one codebase

Impact

The rebuilt platform shipped across 27 countries with SEO-optimized rendering for international distribution. The bulk import system supported 100k+ technical catalogs without blocking the UI, a significant operational efficiency gain for the enterprise teams who run those imports. The data-fetching optimization minimized redundant API calls and significantly reduced interface latency across catalog navigation. The onboarding rework contributed to a 35% increase in customer acquisition. The frontend standards and review practices I established improved maintainability and delivery consistency for the team beyond my own work.

Stack notes

Next.js carried the rendering architecture — the from-scratch build was organized around SEO-friendly server rendering for catalog pages. React and TypeScript underpinned the interactive tooling, including the 2D/3D navigation system for multi-level technical exploration and part visualization. React Query owned client-side data: caching, query invalidation, and background synchronization. The bulk import pipeline was an async design problem more than a library choice — background processing plus a polling mechanism, kept intentionally simple so long-running operations stayed observable and recoverable.