Seerama Redesign – Rebuilding a Streaming Directory on Hugo

Seerama is an Arabic movies and TV series streaming directory built for audiences across the Middle East and North Africa. The original site worked, but it came with the usual weight of a dynamic build: slower loads, more moving parts, and ongoing maintenance. I took the same product and rebuilt it on Hugo, keeping everything users loved and fixing the things that held it back.

This post walks through what I changed and exactly how the old site compares to the new one.

Why redesign at all?

The first version of Seerama delivered a solid Arabic RTL experience with TMDB-powered content. But the underlying architecture was the bottleneck. Every page relied on client-side API calls and dynamic rendering, which meant more JavaScript, more waiting, and more to keep patched and updated.

I wanted the same rich catalogue and RTL design, but with the speed and simplicity of a static site. That is the kind of rebuild Hugo is built for.

What I changed

From dynamic to static

The biggest shift was moving the site from a dynamic, API-on-every-load model to a Hugo build that pre-renders content into plain HTML. Posters, ratings, and metadata are still sourced from TMDB, but they are baked into the pages at build time rather than fetched in the browser on every visit. The result is pages that open almost instantly and stay fast under heavy traffic.

Right-to-left, done properly

The new build keeps the full RTL-first layout, now using logical CSS properties so the interface mirrors cleanly across navigation, grids, and typography. Arabic readers get a native experience, not a translated afterthought.

Leaner front-end

I cut the heavy client-side search and pagination scripts in favour of a lighter, faster interaction layer. Less JavaScript means faster first paint, fewer failure points, and a smoother experience on the low-bandwidth mobile connections common across the region.

Hardened SEO and meta

The redesign adds structured data, cleaner URLs, sitemaps, and proper Arabic Open Graph tags so titles share correctly on social platforms and index properly in search.

Security by default

With no database and no server-side runtime, the attack surface that comes with a dynamic site is gone. There is nothing for an attacker to log into and nothing to patch every week.

Old site vs new site

Highlights of the rebuild

• Sub-second loads — catalogue pages open instantly because the HTML is already built
• TMDB catalogue preserved — thousands of Arabic movies and series with posters, ratings, and metadata
• Lighter, faster UI — less JavaScript, smoother browsing on mobile
• Stronger SEO foundation — structured data and sitemaps for better indexing
• Lower running cost — static hosting replaces a dynamic server
• Near-zero maintenance — no database or runtime to keep updated

Tech Stack

• Hugo — static site generator for speed, security, and simplicity
• TMDB API — content metadata and posters, fetched and baked in at build time
• RTL CSS — logical properties for native right-to-left layout
• HTML/CSS — clean, semantic, responsive
• Vanilla JavaScript — minimal enhancements only, no framework overhead

My Role

• Redesign strategy — deciding what to keep, what to cut, and how to re-architect for static delivery
• UI/UX design — preserving the dark cinematic RTL theme with refined layout and typography
• Front-end rebuild — full Hugo migration, TMDB build-time integration, RTL CSS, responsive grids
• Performance & SEO — Lighthouse optimisation, schema markup, sitemaps, and meta tags
• Deployment — static hosting with global CDN delivery

Live Site

Visit: https://www.seerama.com/