The Canais Globo (formerly Globosat Play) project was built inside Globo.com with the ambitious goal of serving multiple TV channels — such as SporTV, Multishow, GNT, and others — through a single, whitelabel platform. Depending on the URL path (e.g. /sportv, /multishow), the site would dynamically render a fully branded experience for each channel, including live content, program pages, and on-demand videos.

📦 From monolith to modern stack

When I joined the team, the legacy application was a monolithic Ruby on Rails backend with some scattered jQuery components. We decided to rebuild the entire platform using React for the frontend and MobX for state management, which provided great reactivity with minimal boilerplate.

Since this was before tools like Next.js or Create React App existed, we architected our own setup using Webpack and a custom Node.js server to deliver server-side rendered (SSR) HTML — essential for SEO and for providing fast time-to-content for users, especially over slower connections.

We followed atomic design principles, building a system of composable components (atoms, molecules, organisms), which allowed us to scale the UI effortlessly across different brands.

⚙️ Backend powered by Elixir

All core APIs were developed using Elixir, chosen for its exceptional performance under high concurrency — a perfect fit for a media platform with millions of simultaneous users. Elixir’s lightweight processes and fault-tolerant design helped us support spikes in access during live events, like football matches or reality show episodes.

Endpoints provided everything from authentication via TV providers (TV Everywhere model) to fetching live stream metadata, VOD catalogs, EPG data, and personalized content for each user.

🧠 Frontend architecture

• Routing was handled client-side, but initial page rendering was server-side for better SEO.
• The app pulled JSON payloads via Elixir APIs and hydrated the React tree after load.
• Theming was isolated in configuration files, allowing each channel to apply its own brand without duplicating logic or markup.

The content structure was always the same:

• A full-screen live player (when active).
• Below, the VOD content of the channel.
• And a floating player minimized on scroll for uninterrupted viewing.

🧩 Scalability through atomic components

One of the strongest pillars of this platform was its design system. All components were structured with reusability in mind, forming the foundation for future projects at Globo.com.

This project was an important milestone in the transition from legacy stacks to modern SPAs and microservices at Globo, combining performance, scalability, and great user experience — and serving as a reference for many future products.

While working as a developer at Globo, I led the planning and development of a new version of the globo.com homepage, focusing on code modernization, visual clarity, and most importantly, frontend performance.

🧠 The challenge

The backend performance was already outstanding, with pages served via NGINX cache at blazing speeds. That meant the real challenge was improving browser-side performance, especially under poor network conditions like 3G connections.

🧱 Technical foundation

We started the project from scratch, building a new CSS architecture using the BEM (Block Element Modifier) methodology. We created an internal UI library called home-ui (hui) to consolidate reusable interface components.

From day one, we focused on:

• Maximum style reuse (with SCSS)
• Smallest bundle size possible
• Clean, semantic, and maintainable code

📉 Bundle size reduction

By rewriting everything with performance in mind, we managed to reduce the total size of CSS and JavaScript bundles by approximately 82% compared to the previous implementation.

⚡ RAIL model + optimized first paint

We followed the RAIL performance model (Response, Animation, Idle, Loading) to optimize each stage of the page lifecycle.

A major performance goal was to fully render the first scroll within the first HTTP response, enabling a nearly instant first paint.

🛠️ Techniques we used:

• Critical CSS inlined directly in the HTML
• Lazy-loading for non-critical images
• First bundle size kept minimal (~14–30KB)
• Subsequent assets loaded asynchronously
• Prioritized first paint and interactivity

🔬 Real-world testing and results

We deployed a dedicated WebPageTest instance to run continuous performance tests, simulating a 3G slow connection — mimicking real user scenarios.

The results were outstanding:

🎥 We also recorded a side-by-side video comparing the two versions in real time.

PS: This simulation is in 3g slow!

🌍 Global benchmarks

We benchmarked our new homepage against major international news sites like The New York Times, CNN, and The Guardian. In all scenarios, our new version consistently outperformed these competitors in load time and perceived speed.

⚠️ Note: With the advent of HTTP/2 and HTTP/3, these micro-optimization strategies are less impactful today, but at the time they were a major differentiator and benchmark for internal engineering excellence.

🚀 Impact

The new homepage:

• Delivered a massive performance improvement
• Reduced bundle size significantly
• Improved user experience for millions of daily visitors
• Established new internal standards for frontend performance at Globo

🎉 Little Extra

As a fun and interactive touch during the Olympic Games, I also implemented a small animation tied to the Globo.com logo. When users hovered over the logo, the iconic Olympic rings would animate into view with a smooth transition, adding a festive and dynamic layer to the homepage experience. It was a subtle detail, but one that brought delight and aligned perfectly with the global event.

OLX – Help Center Redesign and SEO-Driven Frontend Optimization

When I rejoined OLX, the Help Center was still powered by Salesforce. While functional, the platform made it difficult to run A/B tests or rapidly iterate on improvements. Additionally, the high cost of support operations motivated us to rethink the entire experience and move toward a fully custom solution.

💡 Rethinking the tech stack

We decided to rebuild the Help Center from scratch using React and styled-components for a more flexible and maintainable architecture.

To decouple content management from the frontend, we introduced a headless CMS (Strapi). Since Strapi stores content in a Postgres database, we developed a custom crawler to extract and structure legacy help content into markdown, which was later transformed into HTML on the frontend.

🧭 Structuring the experience

We redesigned the Help Center with:

• A hierarchical category structure
• Dynamically generated help articles from CMS content
• A feedback widget under each article:
  • “Was this helpful?” (Yes/No)
  • Optional text feedback field

These user insights were regularly reviewed by the Data team, generating actionable feedback loops that directly informed improvements to both self-service content and support workflows.

⚙️ SEO and discoverability

To maximize organic visibility, we implemented a series of SEO optimizations:

• Articles rendered with semantic HTML
• Rich metadata using <script type="application/ld+json"> annotations
• Clean URLs and route structures
• Fast loading, markdown-based content rendered server-side

These enhancements ensured that articles were easier to index and more relevant in search engine results.

📉 Measurable results

• Significant reduction in chat-based support requests
• Decreased complaint volume on platforms like ReclameAqui
• Improved help article discoverability via search engines
• Empowered the team to run continuous A/B tests and UX iterations

• 🔍 Full-text search powered by Elasticsearch
• 💰 Replaced Algolia to cut external API costs
• 📈 A/B tested version increased conversions by 20%
• ⚡ Smooth UX with live filtering and map integration

During my year at Loft, I led the complete redesign of the property search page. The original version suffered from frontend performance bottlenecks, excessive re-renders during scroll and resize, and a reliance on Algolia, a paid third-party search provider.

I began the project with a minimal MVP. We migrated from Redux to React Query to simplify data fetching, and replaced Algolia with a custom Elasticsearch setup — improving flexibility and significantly cutting costs.

The initial version included just a few core filters, but even with reduced features, an A/B test showed better performance and more conversions than the legacy version. That result validated our new foundation and justified further investment.

We then added dynamic filters that updated the results grid in real time as users selected options. We introduced product carousels that didn’t exist before, and ultimately implemented a map-based search interface. The map experience proved highly successful, offering smooth interactions with real-time updates.

Beyond infrastructure, the frontend saw massive improvements: the new implementation eliminated unnecessary re-renders, ensuring a seamless experience even during scroll and window resizing. This project became a reference point internally for scalable architecture, optimized UX, and measurable business impact.