FRAMEWORK
Next.js 16 (App Router) + React 19 + strict TypeScript. Vercel for continuous deploy with preview URL per push.
How we build
The Chave case is where the MXMO method becomes most visible: a software house charges ~US$ 17K in 60 days for concept without code. MXMO delivers a navigable product in 5 business days, in a fraction of the time.
Chave · Premium marketplace · 2025
The client
40-50 cars/month with 80% conversion rate. High average ticket: Porsche, Range Rover, BMW M3, Cayenne, Audi Q8. Traction in place, but stuck in an informal network of 5 referrers receiving R$ 1,000 fixed per referred car.
Growth blocked by three structural problems at once: no scalable channel for sourcing premium cars, labor compliance risk (informal network = fiscal exposure), discreet sales process for premium sellers who don't want a Porsche listed on a public marketplace.
The hypothesis
Referrer, premium seller, and backoffice in a single product. Assisted MEI registration, traceable PIX, and LGPD by design, without killing operational speed.
Validate UX before burning engineering. Typed mock data in TypeScript, no backend. Product decisions in hand before any integrated API.
The deliverable · 7 business days · pre-contract
Referrer · mobile PWA
Onboarding with KYC + assisted MEI. Guided car capture in 60s. Lead status timeline. Traceable PIX commission. Ranking + viral referral.
Seller · web + WhatsApp
Identified formal invite. Per-car personalized landing. AI preliminary appraisal. Proposal without visits or public exposure.
Backoffice · desktop
Inbox prioritized by margin × probability. Assisted appraisal with suggested price. Proposal generator. Kanban pipeline. Analytics dashboard.
Tech stack
FRAMEWORK
Next.js 16 (App Router) + React 19 + strict TypeScript. Vercel for continuous deploy with preview URL per push.
STYLING
Tailwind CSS v4 + proprietary components. No off-the-shelf UI kit. Visual identity derived from the proposal deck.
MOTION
Framer Motion 12 for microinteractions that separate 'real product' from 'prototype'. Custom eases.
STATE
Zustand for client-side state shared across journeys. A lead captured by the referrer appears in the buyer's inbox in real time.
DATA
Typed mock data in TypeScript, no backend. Validate UX before burning engineering. Porsche 911, Range Velar, BMW M3 with real prices.
WORKFLOW
Claude Code orchestrated by custom skills: writing-plans, brainstorming, frontend-design, verification-before-completion. MXMO standard.
The differential
Seller's LGPD opt-in, mandatory referrer MEI, traceable PIX appear in the flow because they're delivered value, not legal detail hidden in a PDF.
The client opens the prototype on their phone and sees themselves using it. Doesn't see wireframe. Doesn't see generic demo. Sees the product that will exist, with data that looks like theirs.
Entire project built with Claude Code orchestrated by custom skills. MXMO standard of execution, using MXMO method to build its own pre-contract.
Next phase · post-signing
PIX via Pagar.me. WhatsApp Business API. Claude multimodal API for visual appraisal of cars. KYC via Idwall. Assisted MEI. Supabase backend.
Editorial note: the Chave product is not yet in consolidated operation. Presented as a case of method and pre-contract speed, not as a case of product in operation. The mockup is deployed on Vercel, in validation with the client toward the real product.