Headless WooCommerce Product Browser
01 The Challenge
Modern e-commerce projects increasingly require decoupled architectures where the frontend is built with React/Next.js while WordPress/WooCommerce handles the backend. The native WooCommerce REST API lacks proper JWT authentication for headless use cases, and CORS handling for cross-origin requests is not built-in. Clients needed a production-ready solution demonstrating secure authentication, efficient product browsing, and user-specific features like wishlists.
02 The Solution
Built a custom WordPress plugin providing JWT authentication with 1-hour access tokens and 7-day refresh tokens covering login, refresh, logout, and user info endpoints. Developed a Next.js 14 frontend using App Router with SSR for product pages, TypeScript for type safety, and Tailwind CSS for responsive design. Implemented proper CORS handling for cross-origin browser requests and deployed to Vercel with automatic deployments from GitHub. Backend WordPress API repository available at https://github.com/dilipraghavan/wc-headless-api
03 Impact & Results
Sub-200ms API response times for product listing and wishlist operations. 90+ Lighthouse score with SSR and optimised images via Next.js Image component. ISR with 60-second revalidation ensures content freshness without sacrificing performance.
// project links
GitHub Repo→// video demo
// gallery
Login Page.
Wishlist Page.
Product Details.
Product Grid.