PrimeScent
A luxury in-store fragrance discovery platform that pairs a static-fast Next.js UI with a protected Hono/Prisma API, intelligent alias search, and near-zero monthly operating cost.
~$0-2
All-in monthly cost
8
Weighted search ranking tiers
SSG
Static-first rendering
2
Decoupled layers (UI and API)
The client
PrimeScent is a fragrance display concept for retail stores, positioned as part of the Abdul Samad Al Qurashi retail ecosystem.
This is not a typical ecommerce storefront. It is a digital sales surface for physical stores: a customer-facing experience designed to sit on a display, guide discovery, and help shoppers find fragrances quickly using the names they already know.
That last point matters. In perfume retail, customers often walk in asking for an original perfume by brand name, not by fragrance family or note breakdown. The experience had to support that behaviour naturally.
The brief
PrimeScent needed a product that could feel premium enough for a luxury fragrance environment while working fast enough for real in-store usage. The platform had to:
Present the catalog in a polished, touch-friendly display experience
Let shoppers search by the original perfume and brand name they already know
Avoid duplicate or messy results when catalog data overlaps
Surface similar and fallback perfumes when no exact match exists
Stay fast on store networks and shared screens
Separate the UI from the API so the platform could scale cleanly
Keep monthly operating cost extremely low
What we built
A two-part architecture: a Next.js retail display UI for the in-store customer experience, and a Hono + Prisma API for catalog delivery, search, filtering, and product detail data.
Immersive retail display UI
A full-screen home screen with rotating fragrance visuals, a search hub with Featured, Trending, New, and All discovery flows, a full catalogue with pagination and gender filtering, and rich product detail pages covering family, note pyramid, pricing, and visual storytelling.
Search by original brand name
The catalog stores searchable alias variations: perfume alias alone, original brand plus alias, and simplified variants for forgiving matching. A shopper can search "Dior Sauvage" or simply "Sauvage" and still reach the right PrimeScent product.
Weighted ranking, not naive keyword matching
Results are ranked alias exact, then alias prefix, alias partial, name, family, note, slug, and description, so the platform prioritises the fragrance the customer is actually asking for.
Dedupe and curated fallback
Alias variants, families, notes, and slug collisions are deduplicated at import, and discovery groups are merged on unique product IDs so nothing repeats. When a search returns no direct match, the UI offers a curated similar-perfume path instead of a dead end.
Protected catalog API
A Hono + Prisma API with app-token access control, a dedicated search endpoint with weighted ranking, product, family, note, fallback, docs, and health routes, and Swagger / OpenAPI documentation for easier maintenance and integrations.
Touch-first retail behaviour
A touch-first flow for large displays and tablets, an idle reset that returns the app to the home screen after inactivity, and a fast browse-to-detail path from hero screen to product in only a few taps.
The technology
A decoupled UI and API stack, chosen for static-first speed, in-store responsiveness, and a near-zero running cost.
Frontend framework
Next.js 16 (App Router), React 19, TypeScript
Static-first rendering for fast in-store loads
UI
Material UI 7, Framer Motion
Luxury presentation with motion-led transitions
API layer
Hono, TypeScript
Lightweight, fast catalog and search endpoints
Data layer
Prisma ORM, PostgreSQL
Indexed catalog, weighted SQL search scoring
API observability
Pino logging, Swagger UI / OpenAPI
Observable data layer, documented for handoff
Data pipeline
CSV import scripts, alias-building, image utilities
Normalised catalog with deduped alias variants
Analytics
Vercel Analytics, Vercel Speed Insights
Real-user performance monitoring
Hosting
Vercel
Global edge CDN, auto-scaling, free TLS
PrimeScent solves a real retail problem: turning a passive store screen into a self-serve fragrance discovery tool. It moves shoppers from "I know the original perfume name" to "show me the closest match" to "let me explore similar options", shortening the path from curiosity to product and reducing dead-end searches.
Indexed fields for high-traffic sort and filter paths, indexed normalised aliases for fast branded search, weighted SQL scoring instead of client-only matching, static rendering for major routes, cached server-side fetches, and thumbnail-based catalogue images for lighter grid rendering.
Keeping the database and server functions in the same region cuts round-trip latency on every search and product query. In a store environment the experience needs to feel instant, and co-locating them is a clean performance upgrade with no rewrite required.
The UI is SSG-first today: homepage, search landing, catalogue, and product detail routes are statically prepared. The architecture is already a strong fit for Incremental Static Regeneration, so featured, trending, and new content can refresh on a timer as product freshness needs grow.
Catalog endpoints are guarded by an x-app-token header between UI and backend, CORS is restricted to approved frontend origins, a dedicated health endpoint reports runtime and database status, and a Prisma client singleton with request metrics keeps the data layer observable.
Running costs
A polished, production-grade retail display platform with a dedicated API and intelligent search can launch for effectively nothing per month, outside of the domain, as long as traffic stays inside free-tier limits.
UI hosting and CDN (Vercel)
Hobby$0
API hosting (Vercel)
Hobby$0
ORM / data access (Prisma ORM)
Open-source$0
Managed database (free Postgres tier)
Free$0
Analytics and speed monitoring (Vercel)
Hobby allowances$0
SSL / TLS certificate (Vercel)
Included$0
Domain registration
Annual~$1-2 / month
All-in total
~$0-2 / month
Prisma is the ORM used in this codebase. The exact hosted Postgres vendor is not hardcoded in-repo, so the $0 database line assumes a free Postgres tier such as Prisma Postgres Free or an equivalent launch setup. The commercial story is easy to sell: low risk to launch, low cost to pilot in-store, and clear room to scale later.
The result
PrimeScent turns a store display into a digital fragrance consultant. Shoppers search using the names they already know, which lowers friction, and the curated fallback path keeps customers engaged even when there is no exact match.
The business gets a clean separation between presentation layer and catalog API. The platform is fast, visually premium, and cheap to run, and it is ready to expand across more stores without rethinking the architecture.
A luxury retail discovery platform for effectively nothing per month.
Want a platform like this for your brand?
Octet Lab designs and builds fast, secure, search-ready sites for creators and brands.