01 / Overview
Overview
An Arabic/English haircare storefront with a guided hair quiz, product discovery and checkout, backed by a separate admin application and an Express API. A coordinated build across the customer experience and the tools behind it.
02 / The Problem
The Problem
Translate a premium haircare identity into a usable bilingual store, while giving staff dedicated tools to manage the business.
03 / My Contribution
My Contribution
Design & full-stack development
Selected work from the engagement; the role above describes my contribution.
05 / Key Decisions
Key Decisions
The brand carries into the product
Warm ivory, gold accents and product photography form the storefront’s visual language. The interface gives products and shopping actions room to remain readable.
Help customers choose
The hair quiz turns product discovery into a guided interaction. Its visual cards work alongside the catalog instead of replacing ordinary browsing.
Build the operation behind the storefront
Separate storefront, admin and API packages keep customer-facing presentation and staff workflows organized around a shared data model.
06 / Architecture / Execution
Architecture / Execution
A Next.js storefront and separate staff application share typed contracts with an Express API. Prisma handles the relational data layer. Customer browsing and staff operations are separate application surfaces.
07 / Security & Performance
Security & Performance
- Staff authentication includes passkey flows in the API, with tests for enrollment and sign-in.
- Server-side validation uses Zod; the API includes dedicated security headers.
- Arabic and English navigation, product content and the quiz are treated as complete user journeys.
08 / Result