View full-page screenshot
About youshaketheworld.com
youshaketheworld.com is live — a fashion creator marketplace and operations platform (You Shake The World / Dear John Denim ecosystem): creator discovery, listings, server-driven pages, SEO metadata, Stripe checkout, and a large internal Admin Studio for day-to-day commerce and ERP-adjacent workflows.
Tech stack
Core: Next.js 15 (App Router), React 18, TypeScript, Tailwind CSS 4
Data & ORM: Prisma, MongoDB
Auth: NextAuth (creator flows), JWT-based admin session (admin_token + protected /admin/*)
Commerce & money: Stripe (payments + React Stripe.js)
Integrations: Shopify (product sync / admin product management), Klaviyo (lifecycle & abandoned-cart style flows), Apparel Magic (AMC) client + AMC invoicing pipeline (ShipStation-aligned ops), Cloudinary / next-cloudinary (media), Resend (transactional email)
Infra & async: BullMQ + Redis (ioredis) for job queues (e.g. fashion generation jobs), optional Supabase client where used
AI & media: OpenAI API, Fabric.js / canvas tooling for image workflows, barcode scanning (@zxing) where used
Maps & geo: Leaflet + react-leaflet
Forms & UI: React Hook Form, Zod, Zustand, Framer Motion, Recharts
Quality & security: Jest, React Testing Library, Supertest, Newman (API collections), custom security scans / CodeQL-related scripts
Tooling: pnpm, ESLint, optional Python sidecar (python-ghost-service) for ghost/AI pipeline work
Hosting: Vercel for deployment and serverless execution
Product & platform (shipped surfaces)
Marketplace: Fashion creator marketplace—creator discovery, listings, server-driven pages, SEO metadata.
Admin Studio / operations hub: Role-protected admin shell with mobile drawer, live sidebar badges (orders, applications, returns, support queues), JWT login.
Dashboard & analytics: KPI-focused admin dashboard; dedicated Analytics area with drill-down routes; customer/sales-oriented metrics (aligned to what is shipped in UI).
Creator operations: Applications workflow, creator directory/search, commissions, brand onboarding flows, verification/bulk tools.
Catalog & inventory: Products admin with Shopify integration (variant/creator linkage, sync options). Inventory tied to AMC sync/reconciliation.
Order-to-cash / ERP bridge: AMC Invoicing UI + scripts: nightly/catchup runs, exception handling, reconciliation vs. shipments/ShipStation concepts, reporting CLI tools.
Creator-facing Studio: Public/creator Studio—digital model directory, model profiles, generation jobs (queue-backed), admin CRUD for models (specs, poses, references, portfolio).
AI Ghost Studio: Dedicated AI Ghost Studio admin surface for ghost/mannequin-style workflows (paired with workers/queues and optional Python service).
Finance & CX: Payouts, returns, pre-orders, marketing tools, communications + customer support queues with unresolved counts.
Platform hygiene: Cache/monitoring and security monitoring admin sections; cron/API routes for scheduled jobs (e.g. AMC/internal sync).
Analytics, ads, operations & inventory (what ships in code)
These were easy to under-specify in a high-level stack list; they are implemented end-to-end in the platform repo.
Analytics & ads: Google Tag Manager, wired through components/GoogleTagManager.tsx and app/layout.tsx, gated by shouldLoadGTM() from lib/cookieConsent/gtm.ts. Consent + dataLayer: lib/cookieConsent/gtm.ts, hook/useCookieConsent.ts, marketing cookie handling, initializeGTM / pushToDataLayer for ecommerce-style helpers. Meta Pixel: inline fbq in app/layout.tsx; events also flow from ProductPageClient.tsx, lib/stores/cartStore.ts, and app/checkout/page.tsx (e.g. ViewContent, AddToCart, InitiateCheckout). CSP: lib/security/csp.ts documents and allows GTM, GA4, Google Ads, and Meta Pixel.
Operations / ERP: Apparel Magic (AMC) REST usage via the shared client; ShipStation → AMC invoicing: lib/shipstation/service, lib/amcInvoicing/nightlyRun.ts — ShipStation windows, drafts, channels → AMC posting, orchestrated with lib/amcInvoicing/config.ts. Nightly/catch-up runs, exception handling, reporting, and the admin AMC Invoicing UI sit on top of this pipeline.
Inventory: AMC inventory via lib/amcInventorySync.ts (getAllAmcInventory through lib/apparelMagicClient), sync into the platform DB, optional Shopify push via lib/shopifyInventorySync.ts. Admin: reconciliation when AMC is authoritative (e.g. app/api/admin/inventory/reconcile/route.ts), brand-specific rules, cron “decrease-only” behavior vs full reconcile, logging.
Resume / site one-liner
- Analytics & ads: Google Tag Manager (consent-aware), dataLayer ecommerce-style helpers, Meta Pixel (
fbq) for page view, product view, add to cart, checkout funnel; Content-Security-Policy aligned with GTM/GA/Google Ads/Meta. - Operations / ERP: Apparel Magic (AMC) REST client; nightly/catch-up invoicing from ShipStation shipment/order data into AMC; exception handling, reporting, and admin AMC Invoicing UI.
- Inventory: AMC → platform DB → Shopify inventory sync (brand-specific rules, reconciliation vs cron “decrease-only” behavior), admin-triggered reconcile API, logging.
Technical architecture (how it fits together)
Full-stack TypeScript: Prisma models for users, creators, listings, orders, inventory, admin entities, and job metadata; Zod at API and form boundaries.
Payments & orders: Stripe with React Stripe.js; order/refund flows integrated with admin and support tooling.
Queues & workers: BullMQ + Redis for generation jobs, lifecycle email, and operational scripts; optional Python sidecar for ghost/AI pipelines.
Media: Cloudinary/next-cloudinary for uploads, transforms, and CDN; Fabric.js/canvas where image workflows need an editor surface.
Maps & location: Leaflet/react-leaflet for location selection; country helpers where needed.
Testing & quality: Jest and React Testing Library for UI and API coverage; Supertest and Newman collections where applicable; security/CodeQL-style scripts in the repo toolchain.
Technical challenges solved
- Scale of admin + marketplace: One TypeScript codebase serving public SEO-friendly routes and a deep
/admin/*surface with JWT gates and creator NextAuth flows. - Integrations at the edges: Shopify and AMC/Klaviyo/Resend coordinated with Prisma/MongoDB as the system of record for app-specific state.
- Job-heavy workflows: BullMQ for fashion generation and operational jobs without blocking request/response paths.
- AMC & invoicing: Nightly/catchup and exception paths for invoicing and reconciliation aligned with shipments/operations.
Summary
Full-stack TypeScript on Next.js 15 and Prisma/MongoDB: creator marketplace, Stripe, Shopify + Klaviyo + Cloudinary, BullMQ, consent-aware GTM + Meta Pixel (CSP-aligned), ShipStation→AMC invoicing, AMC→Shopify inventory sync and admin reconcile, and a large internal admin—Studios, analytics, orders, payouts, support—shipping as youshaketheworld.com.