Back to projects

Afrique Sports

Multilingual African sports news platform in 4 languages

Next.js 16 WordPress Tailwind CSS next-intl Redis PostHog SSR / ISR SEO Firebase
Role Solo Developer
Timeline 2023 - Present
Platform Web (afriquesports.net) + Android

Why I built it

African sports are massively underserved online. Millions of fans follow the Africa Cup of Nations, CAF Champions League, and local football leagues, but quality coverage in their language is hard to find. Most sports platforms focus on European leagues and publish exclusively in English. If you speak French, Spanish, or Arabic and want in-depth news about African athletics, basketball, or continental football, your options are thin.

I grew up following African football and saw the gap firsthand. I wanted to build a platform that treats African sports with the same editorial quality and technical polish that fans of the Premier League or La Liga take for granted. That meant building for four languages from day one, optimizing for search engines so people actually find the content, and making the site fast on the slower connections common across the continent.

How it's built

Next.js 16 with SSR and ISR

The frontend runs on Next.js 16 with server-side rendering on every article and category page. This is non-negotiable for a news site. When Google crawls a page, it gets fully rendered HTML with structured data, meta tags, and Open Graph images already baked in. Incremental Static Regeneration keeps popular pages cached while still reflecting fresh content within seconds of publication. The result is strong organic traffic from search, which is the primary growth channel.

WordPress headless CMS

The editorial team manages content through the WordPress dashboard. They create articles, upload images, and organize stories by category and sport. The Next.js frontend consumes WordPress via REST API and GraphQL endpoints, rendering everything server-side before it reaches the reader. This split lets editors work in a familiar tool while the frontend stays fast and modern.

Homepage with live scores

Multilingual architecture (next-intl, 4 languages)

The platform serves content in French, English, Spanish, and Arabic using next-intl for routing and translations. Each locale gets its own URL prefix, sitemap, hreflang tags, and independently indexed pages. Editors can publish an article in one language and add translations later. Readers switch languages seamlessly, and search engines treat each version as a standalone page with proper canonical URLs to prevent duplicate content.

Redis caching and performance

A Redis layer (ioredis) sits between the Next.js server and WordPress, caching API responses and reducing backend load. During high-traffic events like AFCON matches, the caching layer absorbs the bulk of requests while dynamic content (live scores, match events) streams through lightweight API calls. Page load times stay under two seconds even on slower mobile connections, which is critical for reader retention in African markets.

SEO at scale

Every page is optimized for search. Dynamic meta descriptions pull from article excerpts. JSON-LD structured data marks up articles with author, publish date, and category. Image optimization through Next.js handles responsive sizing and lazy loading. The sitemap regenerates automatically as new content is published via next-sitemap. Canonical URLs and hreflang tags prevent duplicate content across language versions. The site also generates a Google News-compatible news sitemap with its own XSL stylesheet.

Article reading experience

Analytics and push notifications

PostHog and Google Analytics track user behavior and content performance. Firebase powers web push notifications, letting the editorial team alert readers about breaking news and live match updates. The automation pipeline (a separate Node.js project) handles content scheduling, image processing, and cross-posting workflows.

Deployment and infrastructure

The site runs on DigitalOcean with LiteSpeed for high-throughput delivery. Tailwind CSS 4 powers the UI with a responsive, mobile-first design. Supabase (PostgreSQL) stores analytics data and content metadata alongside the WordPress database. Cloudflare handles DNS, CDN caching, and security headers.

Key technical decisions

  • Next.js 16 with SSR/ISR for SEO-first architecture on every page
  • WordPress as headless CMS via REST API and GraphQL
  • next-intl for multilingual routing with per-language sitemaps and hreflang tags
  • Redis caching layer to handle traffic spikes during major tournaments
  • PostHog + Google Analytics for content performance tracking
  • Firebase web push notifications for breaking news alerts
  • LiteSpeed on DigitalOcean with Cloudflare CDN for African market delivery
  • Automated content pipeline with Puppeteer and Node.js scripts

What's next

I'm working on a native Android app (already in development with Kotlin) to reach the large Android-first audience across Africa. On the web side, I'm expanding the AI-assisted editorial pipeline to help with article summarization, automated translations, and social media distribution. I also plan to add personalized push notifications based on reader preferences (favorite teams, leagues, and sports) and build a live match center with real-time commentary and stats.

Next project Design System