A Bilingual, CMS-Driven Community Platform Built for the Sudanese Diaspora

The Problem

SACSII — the Sudanese American Community Services INC of Iowa — had been doing real work for years: social services, cultural programming, education, and advocacy for the Sudanese and East African diaspora in Iowa. Their website wasn't keeping pace. It was outdated, visually disconnected from the mission, and functionally limited in ways that were starting to cost the organization.

The gaps were compounding. Arabic-speaking community members — a core constituency — had no usable experience on the site. There was no way to accept online donations, which meant fundraising was happening off-platform and leaving money on the table. Events couldn't be managed or listed without developer intervention. Community life — photo galleries, team members, ongoing programs — had no home.

The brief was clear: rebuild the site from the ground up. Make it genuinely bilingual in English and Arabic with proper RTL support. Give the team a CMS they can operate independently. And build a donation system that actually works — cause-based giving, real payment processing, and reliable capture for every transaction.

The Approach

The stack was chosen to serve the mission, not just the build. Next.js 16 with the App Router gave us a production-grade foundation with clean locale routing. Sanity CMS put content control in the hands of the SACSII team. Tailwind CSS v4 with CSS custom properties kept the design system maintainable. The architecture was designed for a non-profit to run independently — minimal developer dependency after handoff.

The bilingual system was the most technically demanding aspect of the build. next-intl v4 handles locale routing at the framework level — every route lives under /en or /ar, with middleware-level locale detection and clean redirect logic. But routing is the easy part. Real RTL support means the entire layout flips: flex direction, text alignment, padding and margin conventions, icon orientation, form fields, navigation — everything. Rather than maintaining two separate layouts, the solution uses a single layout layer with dir="rtl" applied at the html element, driven by the active locale. All copy lives in structured JSON translation files, meaning the SACSII team can update any text in either language without touching code.

Arabic typography required its own treatment. Noto Kufi Arabic was chosen for its legibility at display and body sizes, and loaded independently from the Latin font stack (Playfair Display for headings, Inter for body copy). Font weight, line height, and letter spacing values were calibrated separately for Arabic text — Latin type assumptions don't carry over, and the difference is visible.

The CMS architecture was built around Sanity Studio, hosted directly at /studio on the production domain. The content model covers everything the team manages on an ongoing basis: events (with slug-based detail pages, dates, descriptions, and Cloudinary photo albums per event), team members, and any content exposed to the donation system. A write client with webhook support keeps the frontend in sync — when content changes in Sanity, the site updates. No rebuild required, no developer in the loop.

The donation system was built for reliability, not just function. Cause-based giving lets donors designate their contribution to one of four program areas — Education, Health, Environment, or Emergency Relief — with live fundraising progress bars that show real campaign momentum. PayPal REST API runs in live production mode with full credential handling. The critical detail: a webhook listener verifies PayPal signature headers and handles missed payment captures — transactions that succeeded on PayPal's side but didn't fire the client-side success callback. Without the webhook, those donations disappear. With it, every successful payment is captured.

The rest of the surface area was built to serve community life. A member registration flow. A contact form with transactional email via Resend and in-memory rate limiting (3 submissions per IP per 10 minutes) to prevent abuse without a database dependency. A photo gallery browser pulling from Cloudinary. A countdown timer to the next upcoming event. Animated stats, a services carousel, and an FAQ band — all responsive, all bilingual.

SEO was built in from the start — not bolted on at the end. A dynamic sitemap.xml covers both static routes and event slug pages generated from Sanity. robots.txt, Open Graph image, and per-page metadata round out the foundation. Every route resolves cleanly in both locales.

The Results

SACSII launched with a production-grade website that reflects the depth of their work — bilingual, fully manageable by their own team, and equipped with the digital infrastructure a growing non-profit actually needs.

• Full bilingual site with production RTL support. English and Arabic live at /en and /ar, with a complete RTL layout flip for Arabic — not a cosmetic toggle, but a real bidirectional layout system. All copy managed in JSON translation files, no code changes needed to update content in either language.
• Live donation system with webhook-backed capture. Cause-based giving across four program areas with live progress bars and PayPal REST API in production mode. Webhook signature verification ensures every successful payment is recorded — including transactions where the client-side callback fires late or not at all.
• CMS the team can operate independently. Sanity Studio at /studio covers events (with photo galleries via Cloudinary), team members, and donation-linked content. Slug-based event detail pages generate automatically from Sanity content — no developer needed to publish, update, or archive.
• Arabic-first typography and design. Noto Kufi Arabic with calibrated weights, line heights, and spacing — handled independently from the Latin type stack. The design system was built to support both scripts without compromise on either side.
• Complete community platform at launch. Member registration, contact form with rate limiting and transactional email, Cloudinary photo gallery browser, event countdown, animated stats, and a services carousel — all bilingual, all production-ready.