Abujad
A fragrance house online, written right to left, where every bottle carries its whole note pyramid with it.
- Role
- Sole engineer
- Year
- 2026
- Web
- Laravel · Inertia · React
- Mobile
- Flutter · FCM
- Type
- Thmanyah
- Source
- Private repository
Perfume is bought by how it unfolds, not by its SKU.
Abujad started from the commerce engine I built for Tibbuk. I stripped it back and rebuilt it for a very different customer. Luxury fragrance shoppers want to know the house, the concentration, the year, and how a scent changes on the skin over hours. So a product here is more than a name and a price. It records its house, fragrance family, concentration, release year, tagline and accent colour, and its notes are tagged with the tier where they usually appear: top, heart or base.
Designed in Arabic, then translated.
The store reads right to left by default and switches to English with one toggle, so the layout has to mirror cleanly in both directions. The typography is Thmanyah, bundled through Vite, and the admin includes a font picker. The whole theme is driven by CSS variables, so the brand can be re-skinned without touching the code.
A catalogue you can edit in a spreadsheet.
Fragrance catalogues are big and change constantly. A ProductCsv service round-trips the entire catalogue. Rows match on id or SKU and update in place, categories resolve by id, Arabic name or English name, and every column documents itself in the export. A separate bulk editor handles the quick changes.
| sku | name | house | fragrance_family | concentration | release_year | accent_color | category | stock_status |
|---|---|---|---|---|---|---|---|---|
| matches existing | required if new | e.g. Creed | e.g. Woody | e.g. Eau de Parfum | e.g. 2010 | #C4973A | id · AR · EN | in_stock |
WebP pipeline
Every upload is scaled down to 1200px and re-encoded as WebP at quality 82 before it's stored, so the storefront stays fast however large the photo.
Streamed hero video
Separate desktop and mobile hero films, served through a file controller that handles HTTP Range requests so playback can seek and start straight away.
Store + admin app
A Flutter app with the storefront, cart and order tracking, plus a full admin: products, orders, discounts, financials and settings. FCM push keeps both sides informed.