A premium, production-ready React 19 + TypeScript ecommerce template built for luxury beauty brands.

AuraSkin delivers a complete shopping experience with sophisticated design, meticulous attention to detail, and code quality that developers can be proud to customize and extend. This isn't a themed skeleton — it's a fully wired, fully populated storefront ready to launch or resell.

Why AuraSkin?

Most ecommerce templates force a trade-off: either the design looks premium and the code is a mess, or the code is clean and the design looks like a generic Bootstrap clone with "dark mode + gold" slapped on top.

AuraSkin refuses that trade-off. It pairs a genuine quiet luxury aesthetic — the kind you'd associate with Chanel or Aesop, not a random Envato template — with production-grade architecture that scales cleanly from a solo portfolio project to a full marketplace deployment.

Every component, every page, and every feature is wired up with realistic luxury cosmetics content. There's no Lorem Ipsum, no "Page Title Here" placeholders, and no dead links. Buyers get a complete, sellable template — not a skeleton they have to finish building themselves.

Design System

A Quiet Luxury Aesthetic

The visual language is deliberately understated: generous whitespace, refined typography, and restraint instead of flash. No aggressive CTAs, no neon gradients, no stock "ecommerce template" clichés. Opening AuraSkin should feel like walking into a high-end boutique, not scrolling through a discount storefront.

Color Palette

Primary Text      oklch(0.15 0.01 20)   — Near-black
Background        oklch(0.98 0.005 90)  — Warm off-white
Accent / Gold     oklch(0.65 0.15 75)   — Muted gold hover states
Luxury Gold       oklch(0.70 0.12 75)   — Decorative accents
Luxury Cream      oklch(0.97 0.01 85)   — Card backgrounds
Luxury Beige      oklch(0.88 0.02 80)   — Secondary surfaces
Luxury Gray       oklch(0.45 0.01 20)   — Muted text

Using OKLCH instead of raw hex values means every color relationship stays perceptually consistent — hover states, dark mode inversions, and accent variants all feel like they belong to the same family instead of being guessed by eye.

Features

A Complete Ecommerce Flow, Not Just a Storefront Shell

Three Fully Realized Product Categories

Every category ships with its own landing page, shop listing, and nested sub-category pages — not just a filtered product grid with a different banner.

• Skincare — Filter by skin concern (anti-aging, hydration, brightening, sensitive). Sub-categories: cleansers, serums, moisturizers, eye care, masks, sunscreen
• Makeup — Filter by finish (matte, satin, dewy, shimmer). Sub-categories: face, eyes, lips, tools
• Fragrance — Filter by type (Eau de Parfum, Eau de Toilette, and more)

11 Auth & Account Pages — Including the Ones Competitors Skip

Most templates ship a sign-in and sign-up page and call it done. AuraSkin covers the entire authentication lifecycle, including the edge cases real products actually need:

Sign in · Sign up · Forgot password · Reset password · Email verification (pending / success) · Resend verification · Session expired · Two-factor authentication · Account locked · Change password · Delete account

Support & Legal, Fully Built Out

• Support: Contact, Shipping info, Returns, FAQ, Track order
• Legal: Privacy policy, Terms of service, Cookie policy, Accessibility
• About: Company, Sustainability story, Press, Contact

A Home Page With 14 Composed Sections

Hero → Features → Shop by Skin Concern → Featured Collections → Bestsellers → How It Works → Ingredient Spotlight → Before/After Results → Testimonials → Press & Awards → Sustainability → Instagram Feed → Newsletter → Final CTA

A home page this fleshed out means buyers aren't stitching together sections themselves — the storytelling arc of a real luxury brand is already there.

Architecture

Monorepo Structure

app/          React 19 + Vite + Tailwind CSS 4
server/       Express 4 + TypeScript (minimal, ready for expansion)

Tech Stack

Every dependency is current, actively maintained, and chosen for a reason — not a bundle of whatever was trending when the template was first built.

Modular Page Architecture

Pages are composed of co-located section components inside components/partials/[page]/. Want to reorder the home page, drop a section, or add a new one? You're editing one folder, not hunting across a tangled codebase.

components/partials/
├── home/          14 sections (hero, features, bestsellers, ...)
├── skincare/      landing + shop (filter-panel, products-section)
├── makeup/        landing + shop
├── fragrance/     landing + shop
├── products/      image-gallery, product-tabs, related-products
├── cart/
├── checkout/      stepper, 3 step components
├── favorites/
├── collections/
└── about/

Custom Hooks for Reusable Logic

useFilteredProducts(products, category, filterState)  // Search, category, price filters
useSortedProducts(products, sortOption)               // Price/name/featured sorting
usePaginatedProducts(products, page, perPage)         // Pagination with safe bounds

These hooks decouple filtering, sorting, and pagination from any single page — reuse them anywhere a product list shows up, without duplicating logic.

Code Quality That Developers Will Actually Respect

Type-Safe Forms, Everywhere

Every form ships with a co-located validation file sitting right next to the component:

components/forms/auth/signin/
├── signin-form.tsx              React Hook Form component
└── signin-form.validation.ts    Zod schema + FormData type

No hunting through a shared validators.ts file to figure out what a form expects — the schema lives right where it's used.

Intelligent State Persistence

Cart and wishlist rely on a battle-tested localStorage pattern, not a fragile ad-hoc implementation:

• Lazy initialization — synchronous read from localStorage on first render, avoiding React 18 StrictMode hydration races
• Every state change persists — no "save" button required, ever
• Cross-tab sync — add an item in Tab A, see it appear in Tab B immediately
• Schema validation — malformed storage entries are silently dropped instead of crashing the app

Nested Routing With Type Guards

// /skincare/:slug handles both sub-categories and skin concerns
if (isSkincareCategory(slug)) { /* show category page */ }
else if (isSkinConcern(slug)) { /* show concern page */ }

One route, two distinct data shapes, resolved safely with type guards instead of stringly-typed conditionals.

Git-Enforced Code Quality

• Pre-commit lint — only lints staged files, never blocks on files you didn't touch
• Conventional commits — enforced via commitlint (feat, fix, docs, style, refactor)

Code quality here isn't a suggestion in a README — it's enforced automatically before code ever reaches a commit.

Component Library

Shared Components

UI Primitives (shadcn-style)

Button · Select · Checkbox — built on Radix primitives with class-variance-authority theming, so every state (hover, focus, disabled) is themed consistently out of the box.

What's Included

• ✅ 50+ fully wired routes — no dead links, no placeholder pages
• ✅ 40+ page components — every page has real content, not just a heading
• ✅ ~800-line product catalog — real luxury cosmetics data, not Lorem Ipsum
• ✅ Complete checkout flow — from cart to order confirmation
• ✅ 11 auth pages — including the edge cases competitors skip
• ✅ Full dark mode — every component, every page
• ✅ SEO-ready structure — semantic HTML, proper heading hierarchy
• ✅ Responsive design — mobile-first, 1 → 2 → 3/4 column grids

Quick Start

# Install dependencies
npm install

# Start development (frontend + backend)
npm run dev
# → app:    http://localhost:5173
# → server: http://localhost:3000

# Build for production
npm run build

# Lint and format
npm run lint
npm run format

Two commands and you're looking at a running storefront — no configuration maze, no missing environment variables to guess at.

Files & Documentation

Documentation isn't an afterthought here — including AI-assistant guidance means the codebase is ready to extend with tools like Claude Code from day one.

Who This Is For

• Agencies building a luxury beauty or DTC storefront who don't want to start from a blank Vite config
• Solo developers who want a portfolio piece that looks and reads like a real product, not a tutorial project
• Resellers and template buyers who need something that's genuinely complete — every route wired, every page populated — so it can be customized and shipped, not finished

The Bottom Line

AuraSkin is what happens when a luxury design system and a production-grade React architecture are built together from the start, rather than one being bolted onto the other after the fact. It's not a proof of concept, and it's not a design mockup wearing a codebase — it's a complete, considered, ready-to-customize ecommerce template that respects both the eye of a designer and the standards of a developer who has to live in this code.