Wandr Jewelry V2: Full-Stack Luxury E-Commerce

The goal was to build a digital "Vault" that feels as expensive as the products it sells. Traditional e-commerce sites often feel cluttered. Wandr Jewelry needed to feel like an editorial fashion magazine, with "Quiet Luxury" aesthetics, extreme performance, and a seamless user journey from discovery to secure acquisition.

This is the V2 rebuild: a fully decoupled, full-stack architecture replacing the original React + Google Sheets setup with Next.js 15, Laravel 11, and MySQL.

Achieved a 100/100 Lighthouse Performance score through server-side rendering (SSR) and advanced image optimization

TypeScript across the entire frontend for data integrity and reduced runtime errors

Automated metadata and JSON-LD Structured Data for dynamic SEO, ensuring products rank on Google with rich snippets (price, ratings, stock)

Decoupled REST API using Laravel Resources for clean, nested JSON responses

Laravel Sanctum for token-based authentication

Laravel Socialite for secure Google OAuth integration

Database hosted on Aiven Cloud for high availability

Centralized store for Cart, Wishlist, and Auth states

Persist middleware keeps user data in local storage across page refreshes

Cinematic Ken Burns effects, infinite draggable sliders, and video-on-hover logic

Tailwind v4 for a minimalist design focused on white space and golden accents

Hybrid Navigation: Balancing the speed of a Quick View Modal with the SEO requirements of a dynamic product page. Users expect instant previews, but Google needs crawlable /shop/[slug] routes.

Complex Checkout: Implementing a "Guest-to-Member" conversion flow where users can purchase without an account but join the "Circle" instantly post-purchase.

Cross-Origin Security: Solving complex CORS and SSL handshake issues between Vercel (frontend) and Railway (backend) in a fully decoupled architecture.

URL Masking: Used window.history.pushState to sync the Modal state with the URL, allowing Google to index /shop/[slug] while the user stays on the main gallery. Best of both worlds: instant UX and full SEO indexability.

Smart Inventory: Built a synchronized stock management system. When a user adds an item to the cart, stock updates across the entire app in real-time. No overselling, no stale data.

Secure Payment: Integrated Stripe Elements with a custom-styled overlay, ensuring a 100% secure and branded transaction flow that matches the luxury aesthetic.

The Wandr Journal: A shoppable blog where stories of craftsmanship link directly to product acquisition. Content and commerce in one flow.

OTP Password Recovery: A modern, link-less security system using One-Time Passwords via Mailtrap. No "click this link" emails.

The admin panel is the operational backbone of the entire platform. It's a protected, role-gated dashboard built with Laravel Sanctum authentication and a dedicated Next.js layout.

Revenue tracking with interactive Recharts line and bar charts showing daily, weekly, and monthly sales trends

KPI cards displaying total revenue, order count, average order value, and conversion rate at a glance

Data pulled directly from the Laravel API with server-side aggregation for fast load times

Full CRUD operations for the product catalog: create, edit, publish, and archive products with image uploads

Real-time stock level monitoring with low-stock alerts

Category and collection management with drag-and-drop ordering

Inventory mix breakdown showing product distribution across categories

Centralized order queue with status tracking (pending, processing, shipped, delivered)

Order detail views with customer info, line items, payment status, and shipping data

Stripe payment reconciliation: every transaction is linked to its Stripe payment intent for audit trails

Role-based access control (RBAC): Admin, Manager, and Staff permission tiers

Each role sees only the dashboard sections relevant to their responsibilities

Activity logging to track who changed what and when

Customer list with purchase history, total spend, and account status

Guest vs. registered member segmentation

"Circle" membership tracking for the post-purchase conversion flow

The entire admin interface uses the same Tailwind CSS v4 design system as the storefront, maintaining visual consistency across the platform while keeping the admin layout optimized for data density and fast decision-making.

Lighthouse Performance: 100/100

LCP (Largest Contentful Paint): 1.1s

First Input Delay: 0ms

CLS (Cumulative Layout Shift): Near-zero

Scalability: Architecture handles 1000+ products with zero performance degradation through Eager Loading and Memoized Filtering

The system proves that luxury e-commerce can be both visually immersive and technically flawless, without relying on monolithic platforms.