Reserva 1500
Premium wine club platform built on Next.js 14 App Router with strict TypeScript. Headless commerce via Commerce Layer, three payment methods (MB WAY, Multibanco, Credit Card) through Ifthenpay with 24 API routes, cross-app auth across four domains, purchase limits, age gate, and cron-driven payment reconciliation. GraphQL codegen for end-to-end type safety from CMS to component props.
[About]
The front-end challenge here was building a seamless e-commerce experience where every layer is decoupled — Commerce Layer SDK for cart and checkout, Ifthenpay for payments, DatoCMS for content — and I had to wire them together into a single coherent UI. I built 24 API routes handling the full payment lifecycle across three Portuguese payment methods, each with different async flows and confirmation patterns. The trickiest problem I solved was cross-domain authentication. The platform spans four separate domains, and I implemented a cross-origin iframe strategy to share auth state between them. On top of that, the UI had to enforce purchase limits, age gates, and member-tier pricing — business logic that lives between the CMS content layer and the commerce SDK, all handled client-side with strict TypeScript. The same GraphQL codegen pipeline from the multi-brand platform powers this project — typed component props generated directly from the DatoCMS schema. I also built animated page transitions with GSAP and micro-interactions using Radix UI primitives, giving a premium feel to what is fundamentally a complex transactional flow.
[Stack]