health_and_safety Healthcare Platform

BHC: Centralized CMS Architecture

Architecting a centralized CMS and reverse-proxy distribution network to serve localized health data to 3.5M users in English, Bengali, and Sylheti.

Role

Senior Front-End Lead

Timeline

8 Weeks

Client

Bangla Health Connect

Stack

Next.js, Strapi, AWS

Bangla Health Connect dashboard interface displaying healthcare data charts, analytics graphs, and multilingual content management system

speed Performance

99/100

Google PageSpeed

The Fragmentation Challenge

Healthcare data in the region was historically siloed across four disparate legacy CMS platforms. This fragmentation made it impossible to serve consistent, localized content to users in English, Bengali, and Sylheti.

Our goal was to unify this into a single source of truth, ensuring that critical health updates could be distributed instantaneously across all language variants without manual duplication.

database

Data Silos

Patient data and content lived in 4 different legacy platforms with no synchronization.

translate

Localization Gaps

Manual translation workflows caused 2-week delays for critical health updates.

speed

Performance Issues

Client-side fetching resulted in poor Core Web Vitals and low SEO rankings.

Solution

Centralized CMS Architecture

We implemented a "Hub-and-Spoke" model using a Headless CMS as the single source of truth. Content is authored once and distributed via API to a Next.js frontend, which handles localization routing and static generation.

architecture

wysiwyg

Headless CMS

Strapi (Source of Truth)

REST API / Webhooks

settings_ethernet

Middleware Layer

Normalization & Locales

JSON Cache

devices

Next.js Client

SSG + ISR Delivery

Infrastructure: Vercel Edge Network + AWS S3 Media Storage

Data Flow & Scalability

To handle traffic spikes during health emergencies, we decoupled the content fetching from user requests.

sync_alt

Reverse Proxy Distribution

Implemented a reverse proxy to route traffic based on geolocation headers, automatically serving the nearest regional edge cache.

language

i18n Routing Engine

Custom middleware intercepts requests to inject localized JSON payloads, enabling instant language switching without full page reloads.

Performance & SEO Strategy

We moved from client-side fetching to Incremental Static Regeneration (ISR). This ensures pages are pre-rendered at build time but updated in the background as content changes.

check_circle Zero Layout Shift (0.0 CLS)
check_circle First Contentful Paint under 0.8s
check_circle 100/100 Lighthouse Accessibility Score

// next.config.js optimization


                                module.exports = {

                                  i18n: {

                                    locales: ['en', 'bn', 'syl'],

                                    defaultLocale: 'en',

                                  },

                                  images: {

                                    formats: ['image/avif', 'image/webp'],

                                  },

                                  swcMinify: true,

                                }

code