
Arabic-first brand website and product catalogue with a 35-permission admin CMS, MinIO media library, contact inbox and hardened security for Saudi Arabia's first olive factory
Alreef is the first olive factory in Saudi Arabia, with two product lines, Atlas and Alisa, sold through distributors and retail chains.
Its online presence was a generic storefront template that looked like every competitor, spoke Arabic as an afterthought, and could not tell the brand's story: the family, the groves, the Saudi-made certifications.
Every product photo, description and hero banner change went through a developer.
There was no media library, so images were scattered across chat threads and USB sticks.
Enquiries from distributors arrived by WhatsApp and phone with no record.
The admin login was shared, so nobody could say who changed what.
The brand wanted a site it owned outright: Arabic first with a full English mode, fast enough to rank, safe enough to leave running for years, and editable by the marketing team without a developer in the loop.
Home page hero (Arabic)
We built a .NET 9 Clean Architecture API and an Angular 20 client with Angular Material, Signals and OnPush rendering.
The public site has a hero slider, USP strip, featured products, category showcase, about teaser and certifications on the home page, a product catalogue with category and brand filters, search and pagination, product pages with gallery, lightbox, specifications and related products, an editorial About page and a validated bilingual contact form.
Home, About and Contact are prerendered with Angular SSR for speed and search engines.
Every catalogue entity stores Arabic and English together through a MultiLangEntry type, with 736 translation keys per language and key parity enforced in CI.
The admin CMS at /admin is gated at both the route and the API by 35 permissions across products, categories, brands, home content, certifications, the About page, contact messages, media, site settings, users and roles.
Marketing uploads images into a MinIO media library with folders, drag-and-drop and a background upload queue, and reorders hero slides and USPs without touching code.
Contact messages land in an inbox with search, read and unread filters and reply links.
Security is built in rather than bolted on: ASP.NET Identity with JWT and refresh tokens, cookie sessions that are only honoured on XHR requests, a hash-based Content Security Policy owned by the web container, a rate-limit policy on every mapped route verified by a test, soft-delete lifecycles for catalogue data and a seed that refuses weak admin passwords in production.
The whole stack ships as Docker images behind Nginx with a Let's Encrypt certificate and is covered by Playwright end-to-end tests.
Bilingual Arabic-first brand site: hero slider, USPs, featured products, category showcase, certifications, About and Contact, all editable from the CMS
Product catalogue with category and brand filters, search, pagination, galleries, lightbox, specifications and related products
Home, About and Contact prerendered with Angular SSR for speed and search visibility
16 domain entities and 83 CQRS handlers on .NET 9 Clean Architecture with a NSwag-generated Angular client
35 granular permissions across 11 admin modules, enforced at both the route and the API
MinIO media library with folder tree, drag-and-drop, background upload queue and per-product image ordering
Contact inbox with search, read and unread filters and reply links replacing untracked WhatsApp enquiries
736 translation keys per language with parity enforced in CI, RTL and LTR layouts on every surface
Hash-based Content Security Policy, XHR-only cookie sessions, JWT with refresh tokens and a rate-limit policy on every route verified by tests
Soft-delete lifecycle for catalogue data, audit timestamps and a production seed that refuses weak admin passwords
Playwright end-to-end suite and Docker delivery behind Nginx with Let's Encrypt on alreef.org
Want to help build the next one? See open engineering, design, and sales roles →