Khairat: Udhiyah, Aqiqah and charity projects, commissioned online in Arabic and English.

The problem

Khairat is a charity working in Africa. It carries out Udhiyah, Aqiqah and vows for its donors according to Islamic rulings, and runs projects such as building mosques, digging wells and bringing water. Its donors live in other countries and pay in their own currencies. A booking makes Khairat the donor's agent, so each rite has to be carried out with the intention the donor states and in the names they give, and the donor wants proof that it was done.

What we built

A site where a donor chooses a rite or a project, states the intention and pays, and a dashboard where the team runs it all: in Arabic and English, laid out right to left in Arabic.

• One catalogue for rites and projects. Sheep, goats, calves and cows for Udhiyah and Aqiqah sit beside mosques, wells, water connections and copies of the Qur'an to distribute, in categories with a search. Each animal shows how many people it feeds, and every service shows its photos and videos in the order the team sets.
• Prices in the donor's currency. The donor picks a region at the top of the page and every price follows in its currency. The team sets each service's price in each currency rather than converting one.
• A whole animal or a share. A service can be sold whole or in shares, each with its own price and details, and the team chooses which of the two its card shows.
• The intention and the names. Before paying, the donor states the intention, whether a sacrifice, a sadaqah, a vow or another, the names it is made for, and whether they are male or female, living or deceased. A short prayer and a photo can be added, and the team sees all of it with the order.
• An Aqiqah calculator. The donor enters their sons and daughters and picks an animal, and the page works out how many are needed, following the hadith it quotes, then leads to the services.
• Voice reviews. Recorded reviews play on a service's page, with a transcript in Arabic and English. The team uploads them and sets their order.
• Accounts and orders. Donors sign in with an email or a WhatsApp number and reset a password with a code sent by email. Each order shows its status, and one still waiting for payment can be paid from the account.
• Where each order came from. Every visit is recorded with its campaign and source, and each order keeps the visit that brought it. The dashboard ranks sources, campaigns, referrers and countries, and Meta Pixel events follow a donor from a service to payment.
• The site, run from the dashboard. Services, categories, orders and users. Coloured marks on services, and a mark can stop orders while the page stays open. The home page's slides, video and news ticker in both languages, the WhatsApp numbers for sales and support, and a record of every change an admin makes.

How

The website is Next.js with React and Tailwind CSS, in Arabic and English through next-intl, laid out right to left in Arabic. Each service has its own address, title and preview for sharing, and the sitemap lists every service in both languages. The dashboard is a second Next.js app, with charts in Recharts and drag and drop to order services, categories and media. The API is NestJS on PostgreSQL through TypeORM, in separate domain, application and infrastructure layers. Payments go through one port: the API picks a gateway by the order's currency and the donor's region, with adapters for Paymob, EasyKash and Polar, so adding a gateway takes only an adapter and a setting.

The result

Khairat's donors choose a sacrifice or a charity project and pay online, in Arabic or English, and each order reaches the team with the intention and the names it is made for.

Our role

Before the studio, our team led it: the website, the dashboard and the API.