Topito — Front v4 — Case study

← Back to portfolio

Topito is a high-traffic French media site specialising in top lists and rankings: humour, oddities, discovery, pop culture and useful content. Beyond classic articles, the site offers a wide variety of editorial formats: interactive quizzes, videos, battles, shopping (« Topitruc »), podcasts… Front v4 is the complete redesign of the topito.com presentation layer. It is a Symfony application that does not consume WordPress at runtime, but relies on data indexed in Elasticsearch, fed by an Indexer microservice from the legacy CMS. The architecture is designed for very high traffic: Varnish edge cache with ESI fragments, assets served via CDN (S3), on-the-fly image resizing (Imagor), and Kubernetes deployment with autoscaling. v4 coexists with the legacy v3: Varnish routes requests to the right backend based on version headers, enabling a progressive migration without service interruption.

My role

Symfony developer in collaboration with the Ziofix team. Contribution across the full application lifecycle: feature development, performance, SEO, code quality and deployment.

Key highlights

Full topito.com front-end redesign (Front v4) in production
Cache-first architecture (Varnish 12 GB RAM, ESI, CDN) to handle millions of page views
Progressive v3 → v4 migration without service interruption
7+ editorial content types on a single Symfony codebase
PageSpeed Insights mobile score ≥ 70 enforced in CI

Tech stack

PHP 8.1+, Symfony 6.4, Twig
Elasticsearch 9 (Elastica), multi-type indexes
Varnish 7, ESI (Edge Side Includes)
Gulp, Sass, Browserify, Babel, JavaScript
Imagor, Nginx S3 Gateway, CDN (a.topi.to)
Spatie Schema.org, AMP pages, PWA manifest
PHPStan (level 9), PHPMD, PHP_CodeSniffer (PSR-12), TwigCS, PHPUnit
Docker, Kubernetes (Helm), HPA, Nginx
GitLab CI (build, quality, PSI, preprod/prod deployment)

Third-party integrations

Elasticsearch — indexed content reads (posts, quizzes, videos, battles, shopping, podcasts, pages, menus, partners)
Indexer — preview API and synchronisation from WordPress
oEmbed — third-party content integration microservice (videos, tweets, etc.)
Imagor — image resizing and optimisation service (i.topito.com)
WordPress — source CMS (legacy Varnish v3 backend)
Pubstack / Smart AdServer — advertising monetisation (header bidding)
Google PageSpeed Insights — automated performance checks in CI (mobile threshold 70)

Front-office (enterprises)

Articles (tops) — paginated lists, responsive images (srcset), editorial highlights
Interactive quizzes — true/false, multiple choice, personality quizzes, AJAX submission and server-side scoring
Videos — dedicated pages with oEmbed integration
Battles — thematic face-offs between two options
Shopping (Topitruc) — affiliate content with dynamic ESI blocks
Podcasts — integration in the multi-index search engine
Static pages — editorial content outside the « top » format
Homepage — featured content, pagination
Listings by category, tag, author (topiteur), partner — sort by date or popularity (Facebook likes)
Archives — navigation by year, month and day
Full-text search — titles, content, tags and categories, with French stop word filtering
Smart routing — a single slug can match an article, page or listing depending on context
Varnish cache + ESI — edge assembly of fragments (footer, burger nav, prev/next, shopping blocks)
Advanced SEO — JSON-LD Schema.org (Article, Organization, WebSite), Open Graph, configurable meta robots, AMP pages
PWA — web manifest for mobile installation
Advertising — brand safe management, per-content ad disabling, header bidding integration (Pubstack, Smart AdServer)
Editorial preview — unpublished content preview via the Indexer API

Back-office (administration)

WordPress — legacy editorial CMS
Indexer — WordPress → Elasticsearch synchronisation microservice
Varnish command — automatic routing rule generation from indexed slugs

Major contributions

Multi-format architecture — dedicated models, repositories and adapters for each content type (Post, Quiz, Video, Battle, Shopping, Podcast, Page)
Elasticsearch search engine — multi-index queries, nested filters (tags, categories), full-text search with FR stop words, pagination and sorting
Interactive quizzes — Symfony forms per type (true/false, choice, personality), AJAX endpoint, Twig result rendering
ESI fragments — footer, burger navigation, prev/next navigation, shopping blocks assembled by Varnish
SEO Schema.org — JSON-LD generation (Article, Organization, Person, ImageObject) via Spatie
Editorial preview v4 — Indexer API integration for draft preview
Listings and archives — category, tag, author, partner pages, date archives with pagination
AMP pages — lightweight content versions for mobile SEO
Dynamic routing — RouteMatcher to distinguish articles, pages and listings on the same URL pattern
Gulp pipeline — SCSS/JS build, critical CSS, CSS purge, icon fonts, asset versioning (rev), BrowserSync
Varnish cache — VCL configuration, backend route generation from Elasticsearch
Responsive images — ImageResizer service with srcset generation and Imagor integration

Quality & infrastructure

Code quality — PHPStan level 9, PHPMD, PHPCS PSR-12, TwigCS in CI
Kubernetes deployment — Helm charts (PHP, Nginx, Varnish, Imagor, nginx-s3-cache), HPA, automated preprod/prod deployment via Kompaas
GitLab CI — build pipeline (Composer + Yarn), quality checks, PageSpeed Insights audit
HTML minification — automatic transformation of include tags into esi:include

Challenges

High availability and traffic — cache-first architecture with Varnish (12 GB RAM in prod), ESI and CDN to handle millions of page views
CMS / front decoupling — progressive migration from WordPress to Elasticsearch reads, with v3/v4 coexistence
Multi-format editorial — single codebase managing 7+ content types with distinct behaviours and templates
High-stakes SEO — Schema.org, AMP, meta robots, brand safety and per-content noindex on a heavily referenced media site
Web performance — PageSpeed Insights mobile target ≥ 70, critical CSS, minification, on-the-fly optimised images
Index consistency — Elasticsearch queries shared with the Indexer microservice (synchronised constants and mappings)