CASE STUDY · 02

TRUELUXE NEPAL

A cinematic luxury e-commerce experience engineered for the premium Nepali market.

Application Surfaces

Storefront / Admin Panel

Database Models

Prisma + PostgreSQL

Admin Modules

Full Back-Office Coverage

Deployments

Continuous Integration

Project Overview

TrueLuxeNepal redefines what a luxury e-commerce platform looks like in the Nepali market. Inspired by Apple's editorial product storytelling and global premium brand experiences, it prioritizes cinematic presentation, minimalist aesthetics, and a frictionless customer journey — far removed from the cluttered feel of traditional online marketplaces.

The platform is architected across two distinct surfaces: a customer-facing storefront with product discovery, cart, multi-step checkout, and account management; and a comprehensive admin panel covering everything from product and order management to analytics, coupons, banners, and newsletter campaigns.

The core engineering mandate was full-stack integrity — a type-safe ORM (Prisma), real-time validated forms, localStorage-persisted client state, and a dual authentication model that keeps customer sessions and admin access cryptographically separate. Built on a production-grade Bun runtime and deployed on Vercel's edge network, TrueLuxeNepal delivers both visual luxury and backend robustness.

Core Dependencies and Frameworks

The technology stack was selected to minimize operational overhead while maximizing developer velocity.

Core Framework

Next.js 16

App Router Architecture

TypeScript

Strict Type Safety

Tailwind CSS v4

Bleeding-Edge Utility Styling

React

Server & Client Components

Data, ORM & Authentication

Prisma v6

Type-Safe ORM

Supabase

PostgreSQL + Auth Provider

PostgreSQL

Relational Database

Zustand v5

Persisted Client State

Forms & Validation

react-hook-form

Performant Form State

Zod

Runtime Schema Validation

UI & Motion

shadcn/ui

Radix-Based Design System

Framer Motion

Cinematic Animations

Lucide React

Vector Iconography

Sonner

Toast Notifications

Data & Admin Utilities

@tanstack/react-table

Advanced Data Tables

Recharts

Analytics Data Visualization

embla-carousel

Premium Product Carousels

@dnd-kit

Drag & Drop Interfaces

@mdxeditor/editor

Rich Text Content Editing

next-intl

Internationalization

date-fns

Date & Time Utilities

Infrastructure & Runtime

Bun

High-Performance JS Runtime

Vercel

Edge Deployment

GitHub

Source Control

Vitest

Unit Testing Framework

System Data Flow and Security Boundaries

The system is designed in discrete layers, establishing strict boundaries between the client, the server actions, and the database.

>User Roles

#The system recognizes two distinct principals: Public Customers and Authenticated Admin Members, each routed through an entirely separate authentication pipeline with independent session management.

>Customer Storefront

#Public-facing commerce experience: Home, Shop, Product Detail, Cart, Checkout, Account, and legal pages — all sharing a unified Navbar/Footer layout via Next.js route groups.

>Admin Panel

#Comprehensive back-office system: Dashboard, Products, Orders, Customers, Categories, Coupons, Reviews, Banners, Media Library, Reports, Settings, Admins, Inbox, Inventory, Newsletter, and Documentation.

>Next.js API Layer

#Public REST endpoints handle product browsing, category navigation, and coupon validation. Mutation routes require Bearer token authorization, and every admin API route is guarded by the requireAdmin() middleware.

>Dual Authentication Layer

#Customer auth uses Supabase sessions via supabase.auth.getSession(), preserving checkout context through redirect parameters, while admin auth relies on explicit Bearer tokens validated on every /api/admin/* request.

>Database Layer

#Supabase PostgreSQL is accessed via Prisma using two distinct connection URLs: a pgBouncer-pooled URL for runtime queries and a direct connection URL reserved exclusively for schema migrations.

Source Code Organization

A predictable folder structure is critical for a solo developer to maintain velocity over time.

src

app

(customer)Customer storefront route group — all public pages share Navbar/Footer layout.

admin-panelFully isolated admin back-office with more than fourteen feature modules.

apiREST API routes — public for browsing, Bearer-protected for mutations.

components

uishadcn/ui primitives and Radix-based design system components.

storefrontCustomer-facing feature components — product cards, cart drawer, checkout flow.

adminAdmin panel UI — data tables, forms, chart panels, and modals.

lib

admin-auth.tsrequireAdmin() guard — validates Bearer token and checks ADMIN_EMAIL env vars.

prisma.tsPrisma client singleton with proper connection handling for serverless edge.

storesZustand stores with localStorage persistence — cart, wishlist, checkout, UI state.

typesShared TypeScript interfaces and Prisma-generated type extensions.

prisma

schema.prismaFull database schema — core models, enums, and dual connection URLs for migration safety.

Prisma Schema & Domain Overview

The database utilizes Supabase PostgreSQL via Prisma ORM with a dual-URL connection strategy: a pgBouncer-pooled URL for all runtime queries and a direct URL reserved exclusively for schema migrations. Prisma's type-safe query builder ensures every database interaction is validated at compile time.

Zero-Trust Architecture

Database Schema Overview

Identity & Access

SCHEMA

User

RLS

AdminMember

RLS

Address

RLS

EmailPreference

RLS

Product Catalog

SCHEMA

Commerce & Transactions

SCHEMA

Order

RLS

OrderItem

RLS

Coupon

RLS

Customer Engagement

SCHEMA

CartItem

RLS

WishlistItem

RLS

Review

RLS

CMS & Configuration

SCHEMA

Banner

RLS

Setting

RLS

ContactMessage

RLS

Visual Identity and Luxury Aesthetic

The design system focuses on clean and structured presentation, establishing a consistent brand identity.

Principles

Cinematic Minimalism: Product pages are editorial — large imagery, generous whitespace, and Apple-inspired presentation replace dense catalog grids.
Monochrome Foundation: The palette is anchored in black, white, and warm neutrals, with color used sparingly to signal status rather than decorate.
Premium Typography: High-contrast display type at large scales evokes editorial luxury, while clean sans-serif body text maintains legibility across all devices.
Motion as Luxury Signal: Smooth Framer Motion transitions and scroll-triggered reveals communicate craftsmanship — every state change feels intentional.
Mobile-First Performance: The storefront is optimized for mobile discovery with full-screen product moments and bottom-anchored primary actions.

Engineering Patterns

Architectural Trade-offs and Key Decisions