NAFHA — Perfume E-Commerce Storefront
A complete seven-page perfume store: filtering, search, cart and checkout, fully right-to-left Arabic, with no external libraries.
Price$250
Contact to PurchaseThere is no online payment on this site. A purchase starts with a message — we agree the details and the payment method, then the project is delivered with its complete source code.
What this is
A complete perfume storefront that works from the first moment: a visitor browses the range, filters by scent family, gender or price, opens any fragrance, adds it to the cart, and completes an order through to the confirmation screen and order number.
Written in plain HTML, CSS and JavaScript — no framework and no external library. No
build step, no npm install, no dependency tree needing monthly updates. Open the files
in a browser and it runs.
The signature element: the scent pyramid
Most perfume stores list fragrance notes as text. Here it is an actual pyramid — top, heart and base notes at tapering widths that reflect how fragrance is genuinely structured. It appears on the home page and on every product page, and it is what makes the store look considered rather than generic.
The architectural decision that matters to you
Every data operation goes through a single layer called Store. No page reads or writes
localStorage directly. That is not housekeeping: it means replacing local storage with a
real database or API later touches one file and none of the store’s pages.
Put plainly — it works today without a server, and is shaped to work tomorrow with one, without being rewritten.
What you get on purchase
The complete source code, plus documentation covering every page and its acceptance criteria, the data model, and the technical decisions with their reasoning — so any developer, including you, can continue the work without rediscovering what was built and why.
The project is yours after purchase: modify it, rename it, deploy it on your own hosting.
Before you buy
Read the “What’s not included” list above. This is a functionally complete first version, not an enterprise system: no payment gateway, no user accounts, no admin panel. If you need any of those, they are additions quoted separately — talk to us before buying rather than after.
What's included
- Seven finished pages: home, shop, product detail, cart, checkout, about, contact
- Combined filtering (scent family, gender, price range) with instant search and sorting by price or rating
- A full cart with quantity control and stock limits that survives closing the browser
- Complete checkout flow with field validation, unique order number generation and a confirmation screen
- A scent pyramid as a signature visual element on the home page and every product page
- Full right-to-left Arabic support — the layout mirrors, not just the text
- Responsive across four breakpoints, with a sliding mobile menu
- Design tokens as centralised CSS custom properties, so changing colours or fonts never touches a component
- Eight seeded products to edit or replace
- A single data layer (Store) as the source of truth, designed to be swapped for a real API without touching any page
- Accessibility basics: labelled icon buttons, a visible focus indicator, and reduced-motion support
- Complete source code with documentation covering every page and technical decision
What's not included
- A real payment gateway — current methods are cash on delivery or advance bank transfer, with no card processing
- User login or accounts
- An admin dashboard for managing products and orders
- A database or API — data is stored in the visitor's own browser (localStorage)
- Automatic SMS or WhatsApp notifications
- Photographic product images — the current icons are lightweight SVG
- Hosting or a domain
Built with
- HTML5
- CSS3 (Custom Properties)
- Vanilla JavaScript (ES6+)
- localStorage