← Back to Blog
Web Development· 5 min read

Building DOCFLiX: A Data-Driven Journalism Platform

The Problem

Most documentary journalism websites treat video as an afterthought — buried in generic layouts, slow to load, and hard to navigate. I wanted to build something different: a platform where investigative journalism feels as immersive as the documentaries themselves.

DOCFLiX.site publishes source-verified investigations across Business, Technology, and Crime Scene categories. The challenge was building a CMS-driven site that could handle bilingual content (English and Bengali), heavy video embeds, and complex editorial workflows — all while maintaining sub-second page loads.

Architecture Decisions

Next.js App Router

The entire frontend runs on Next.js 16 with the App Router. Server Components handle the initial render of article listings and category pages, keeping the client-side JavaScript minimal. Dynamic routes generate static pages at build time for article pages, with ISR (Incremental Static Regeneration) for new content.

Sanity as the CMS

I chose Sanity over Strapi and Contentful for three reasons:

  • Real-time collaboration — multiple editors can work on articles simultaneously without conflicts
  • GROQ queries — instead of wrestling with GraphQL resolvers, I can write precise queries that fetch exactly the fields each page needs
  • Portable Text — Sanity's rich text format means article content is structured data, not locked-in HTML blobs

    • Bilingual Routing

    The site uses subdomain-based routing for language detection. en.docflixsite.site serves English content; bn.docflixsite.site serves Bengali. This approach keeps SEO clean — each language gets its own canonical URLs — and avoids the query-parameter soup that many bilingual sites suffer from.

    The Cinematic UI

    The design language is intentionally dark — near-black backgrounds with warm gold accents. This isn't just aesthetic preference; it serves the content. Documentary journalism is visually rich, and a dark UI lets video thumbnails and photography breathe without competing with the interface.

    Key UI decisions:

  • Typography hierarchy — Inter for body text (high readability at small sizes), with monospace labels for metadata and timestamps
  • Minimal chrome — navigation auto-hides on scroll, article layouts use generous whitespace, and category indicators are subtle colored dots rather than heavy badges
  • Performance budgets — every page targets under 100KB of JavaScript. Lazy-loaded video embeds, intersection-observer-driven image loading, and route-level code splitting keep the initial payload lean

    • SEO Implementation

    For a journalism platform, SEO isn't optional — it's how readers find the work. Every article page includes:

  • JSON-LD structured data (NewsArticle schema with author, publisher, and datePublished)
  • Open Graph and Twitter Card meta tags with dynamically generated social images
  • Semantic HTML — proper heading hierarchy, article landmarks, and descriptive alt text
  • A sitemap.xml generated at build time with lastmod dates from Sanity

    • The result: article pages consistently rank in the top 5 results for long-tail investigative journalism queries within weeks of publication.

    Results

    DOCFLiX.site launched in 2026 and has been running in production since. The platform handles:

  • Consistent sub-2-second Largest Contentful Paint across all pages
  • 100 on Google Lighthouse performance (mobile and desktop)
  • Bilingual content management without developer intervention
  • Zero-downtime deploys via Vercel's edge network
    • ← Back to Blog