MODESWIPE

MODESWIPE is a luxury fashion editorial and affiliate platform that combines curated fashion content with Amazon Associates monetization. The platform serves as both a discovery engine for high-end fashion and a revenue-generating affiliate storefront — blending editorial authority with seamless commerce. Built from the ground up as a full-stack Next.js 16 application with a custom admin dashboard, dynamic product management, an editorial blog system, and premium GSAP-powered animations throughout.

The client needed a platform that could compete visually with established luxury fashion brands — Net-a-Porter, SSENSE, Farfetch — while operating on an affiliate model rather than direct inventory. The experience had to be editorial-first, where content and curation drive trust rather than aggressive sales tactics. Monetization through Amazon Associates required invisible, non-intrusive affiliate link tracking and conversion analytics. A growing catalog of curated products, blog posts, and featured collections needed management through a custom admin panel — without relying on third-party CMS tools. The platform also had to rank organically with robust SEO infrastructure and maintain sub-second interaction feel with complex GSAP entrance animations without sacrificing Core Web Vitals.

The Next.js 16 app uses Server Components by default — pages fetch data directly from MongoDB, eliminating API round-trips for initial renders. Client Components are isolated only where needed for interactivity (forms, animations, hover states). Animation-heavy components like the Hero are wrapped in dynamic imports with ssr: false to prevent SSR hydration flash. The data layer is built on 8 Mongoose models with compound indexes and text search covering products, blog posts, users, categories, affiliate clicks, images, and newsletters. 25+ API routes span auth, CRUD, analytics, media, and SEO. Side-effect model imports ensure Mongoose's .populate() resolves cross-references regardless of page entry point.

The homepage hero features a letter-by-letter stagger animation that cycles through brand keywords — Explore, Curate, Discover, Imagine, Style, Express. Each word exits with a reverse stagger, seamlessly swaps, and re-enters. A hollow "ghost" outline word sits behind the main content for editorial depth. A GSAP-orchestrated timeline coordinates the entrance of every element: subtitle, model image, social links, CTA, and rating badge. All animations use gsap.context() for proper React cleanup and useLayoutEffect to eliminate SSR flash.

The admin panel supports the complete product lifecycle: create, edit, publish, deactivate. Each product carries multi-image/video uploads via Cloudflare R2, Amazon ASIN tracking, affiliate URLs, price and discount management, category assignment, a badge system (New, Bestseller, Limited, Sale, Trending), SEO metadata fields, and view/click analytics counters. Full-text search is powered by MongoDB text indexes. Admin-curated featured sections display on the homepage with title, subtitle, sort order, and active toggle — products populated with nested Mongoose .populate() at query time.

A complete blog engine with markdown content, cover images from R2, author attribution, tag and category organization, publish scheduling, featured product cross-linking, read-time estimates, and view counting. Each post generates its own JSON-LD BlogPosting schema for search engine rich results. The blog serves dual purpose: building editorial authority in the luxury fashion space and driving organic traffic for affiliate conversions.

Every outbound affiliate click is logged with product reference, visitor IP (anonymized), user agent, referrer URL, and timestamp. The admin dashboard surfaces top-clicked products and conversion insights, giving the editorial team data to inform curation decisions. This tracking layer operates invisibly to the end user — no disruptive popups or obvious redirect chains that would undermine the premium experience.

Client-side uploads via presigned R2 URLs keep the server stateless. Images follow a three-state lifecycle: pending (on upload) → active (on entity save) → canceled (on discard). A cron endpoint garbage-collects expired pending images from both R2 and the database, ensuring zero orphaned assets. This architecture handles any upload volume without server memory pressure.

Dynamic sitemap generation from MongoDB covering products, blog posts, and static pages. JSON-LD structured data for 4 schema types: Organization, WebSite (with SearchAction), Product, and BlogPosting. Per-page Open Graph and Twitter Card metadata. AI-crawler-friendly robots.txt that explicitly allows GPTBot, ClaudeBot, and PerplexityBot. Every page is pre-rendered with full meta tags before JavaScript hydration.

The Hero component uses GSAP to animate elements from hidden to visible. With SSR, the server renders the full HTML with all elements visible — the browser paints this before JavaScript hydrates, creating a flash: content appears → disappears → animates in. useLayoutEffect fires synchronously after React commits DOM but after the server-rendered HTML has already been painted. The solution: wrap the Hero in a next/dynamic import with ssr: false. The server sends a dark placeholder div matching the hero background. The component loads client-side and animates from a clean hidden state — zero flash.

Featured product sections on the homepage appeared empty on first visit but worked after navigating to the Shop page and back. Root cause: Mongoose's .populate('products') resolves model references by name ('Product'). The homepage only imported FeaturedSection — the Product and Category models were never registered. Visiting Shop first triggered their registration via the API route. Solution: added side-effect imports (import '@/app/models/productSchema/ProductSchema') in the homepage to guarantee model registration before any populate call runs.

Product detail pages flashed on load — elements briefly appeared at full opacity, then snapped invisible, then animated in. gsap.from() reads the element's current state as the "to" value and animates from the supplied values. Since elements start visible in the DOM, there's a frame where they're visible before GSAP takes control. Solution: replaced all gsap.from() calls with gsap.set() (immediate hidden state) + gsap.to() (animate to visible), and added style={{ opacity: 0 }} directly in JSX as a CSS-level safety net.

FTC-compliant affiliate disclosure on every page with monetized links. GDPR privacy policy with data retention schedules. Terms of service. Cookie consent banner with localStorage preference persistence. Newsletter subscription with consent audit trail tracking timestamp and policy version. All compliance elements are integrated into the design language rather than bolted on as afterthoughts.

Sub-second perceived load — GSAP timeline starts at 150ms delay, hero fully animates in under 1.5 seconds. Zero SSR hydration flash with dynamic imports. Full admin autonomy — the client manages products, blog, and featured sections without developer intervention. SEO-ready at launch with structured data, dynamic sitemap, and meta management. Scalable media pipeline via R2 presigned uploads. Actionable affiliate analytics for editorial curation decisions. Role-based admin dashboard with real-time KPIs.

Mongoose model registration is global and implicit — in a Next.js app with code-split routes, models aren't available for .populate() unless their defining module has been imported in the current request's execution path. gsap.from() is fundamentally incompatible with SSR — the gsap.set() + gsap.to() pattern is strictly safer. useLayoutEffect has limits in SSR — the browser paints server HTML before React begins hydration, so ssr: false is the only reliable approach for animation-heavy components. Presigned URLs need a lifecycle — without pending/active/canceled states and garbage collection, orphaned files accumulate indefinitely. Editorial design requires restraint — the most effective luxury UI decisions were subtractive: near-black backgrounds, minimal accent color, generous whitespace, and letting typography carry the hierarchy.