Skip to content
All projects
ReplatformDesign systemBilingual bn/en

As Sunnah Foundation

As Sunnah Foundation is a non-political, government-registered non-profit in Bangladesh, founded in 2017 and working across education, dawah, and social welfare. Its platform is both the organization's public face and its primary donation channel. This is a replatform: the new site now runs as the primary one while the legacy site is scheduled for archival, with a route back for anyone still mid-transition. I joined the frontend team in 2023 and now lead it.

2023 — PresentFrontend LeadLead of a 4-member frontend team
As Sunnah Foundation cover

Problem

For a charity the website is the cash register, and this one has to carry an unusually wide set of giving models: one-off gifts to any of a dozen-plus funds, zakat with its own religious rules, seasonal appeals like iftar and qurbani, recurring donor membership, and lifetime membership. Around that sits everything a registered non-profit must publish to stay trusted — program reporting, a newsletter archive, registration and ISO certificates, income and expenditure policy. All of it in both Bengali and English, and all of it migrating off a legacy site without losing donors mid-transition.

Approach

A shared component library on MUI, tokenized so fund pages, program pages, membership flows, and the editorial sections compose from the same primitives instead of each re-implementing them. Server state consolidated onto RTK Query, so fund and program content is fetched and cached in one place rather than per screen, behind typed API contracts in TypeScript. Bengali treated as a first-class locale rather than a translation layer bolted on afterwards. And because four of us maintain this surface, code review and pairing to keep everyone converging on shared patterns instead of diverging into personal ones.

Outcome

One component layer now backs a dozen-plus donation funds, 14 program sections, membership and volunteer paths, the blog, notices, gallery, and newsletter archive — in two languages. The rebuild is live as the primary site, with the legacy platform scheduled for archival.

Highlights

  • 01Bilingual Bengali/English across the entire surface, switched from the navbar
  • 02A dozen-plus dedicated funds — zakat, sadaqah jariyah, emergency disaster relief, regular giving, mosque complex, skill institute — each with its own page and donation flow
  • 03Quick-donate on the landing page: fund, contact, and amount in a single row
  • 04Recurring donor, lifetime member, and volunteer paths alongside one-off giving
  • 0514 program sections — disaster relief, iftar, qurbani, tree plantation, imam training, safe drinking water, skill development and more — each with a detail page
  • 06The transparency surface a registered non-profit needs: registration and ISO certificates, income and expenditure policy, and a downloadable monthly newsletter archive
  • 07Tax-rebate guidance placed beside the donation form, where the decision actually gets made
  • 08Runs as the primary site through the migration, with a route back to the legacy site until it is archived

Stack

  • React
  • Next.js
  • TypeScript
  • Redux Toolkit
  • RTK Query
  • MUI
  • Tailwind CSS

Links

Screens

Walk through the build

7 images

Next up

Want to see more work?

View all projects