A multilingual football platform for news, live matches, and competitions.
My work
Architected the Next.js app with server rendering, live data caching, secure account flows, and five-language RTL/LTR support.
The problem
Sports information changes constantly. A desktop experience has to make news, fixtures, results, and competition details easy to navigate while staying consistent across languages.
IN DEPTH
My contribution
Application architecture
Structured the Next.js homepage, news timelines, match and competition pages, and account features around feature modules and shared access to the existing backend API. Built reusable components and centralized handling of data, errors, and media.
Server rendering and live data
Combined server-rendered page content with TanStack Query for live-data refresh, caching, and interactive updates. Kept server data separate from local UI state.
Secure account and community flows
Built server-side session handling with HttpOnly cookies, protected account flows, and consistent loading and error states. Implemented interactive comments, reactions, and follow features.
Multilingual routing and technical SEO
Implemented routing for Arabic, French, English, Spanish, and Italian, including RTL/LTR layouts, server-generated metadata, structured data, and crawler validation.
Shared analytics infrastructure
Developed a typed analytics layer shared across features, with centralized event contracts and handling for route and account states.
Technical decisions
The URL carries the language
Locale-aware links keep navigation and shared URLs consistent, while Arabic and other languages retain their correct reading direction.
Initial content and live updates have different jobs
Server-rendered content supports discovery and the first page load. Client queries handle information that needs to refresh.
Shared patterns make a large app coherent
Data access, errors, media URLs, and recurring UI elements are centralized so pages follow the same conventions.
Technology
Next.js
TypeScript
TanStack Query
Zustand
Live product
Explore the current product website. This case study describes my work during May–Sep 2026.