View project live

Panda Patches

By Hassan Jamal

Custom embroidery and patches e-commerce store built on Next.js and Sanity CMS. Loads in under 1 second with 95+ Google PageSpeed score. Built by PandaCodeGen.

Project Shots

Panda Patches homepage featuring the hero section with a quote form, bulk pricing headline, and trust logos from Google, Microsoft, and Coca-Cola.
Custom embroidered patch design featuring a detailed mascot illustration, showcasing Panda Patches' design capabilities and stitch quality.
Panda Patches craftsmanship section showing the range of patch types available, including embroidered, PVC, chenille, and leather options.
Portfolio gallery displaying completed custom patch orders, including sports team patches, letter patches, and embroidered designs for various clients.

Editing environment

Blog Posts section in Sanity Studio showing 15+ published articles with SEO fields, FAQPage schema, author photos, and full Portable Text content editing
Case Studies section showcasing real client work, including band merchandise, apparel launches, law enforcement, corporate branding, and fire department patch orders.
Product Page Template with hero gallery, descriptions, backing options, and product variants for 12 patch types managed entirely through Sanity.
Homepage process section managed in Sanity, showing the 3-step ordering flow: Sketch, Mockup, Patch, with editable headings and images.

About the project

Panda Patches is a custom patch e-commerce platform built with Next.js 16 (App Router) and Sanity as the headless CMS, using Sanity's proxy integration for seamless content delivery. The site serves businesses, sports teams, military units, and brands ordering custom embroidered, woven, PVC, chenille, leather, and printed patches.

Challenges we solved:

Content-driven product pages needed to be fast, SEO-optimized, and easy for non-technical team members to update. We chose Sanity for its real-time editing, flexible schema, and image pipeline with the Next.js proxy pattern for optimized data fetching. Each product page, blog post, and landing page is managed entirely through Sanity Studio.

Checkout integrates Stripe and PayPal with order data stored in Supabase. We built a dual-payment flow where order records are created server-side before redirecting to payment, ensuring no orders are lost even if the customer closes the browser mid-checkout.

CSP (Content Security Policy) was a major challenge with earlier Next.js versions. The build process would strip wildcard characters from CSP strings, breaking third-party integrations like Tawk.to live chat. After upgrading to Next.js 16.2, we migrated to the proxy pattern which resolved these issues cleanly.

What we learned:

Supabase update operations fail silently when columns don't exist or zero rows match. We added explicit column checks after losing order updates to this behavior. PayPal's localStorage-based order data transfer breaks on mobile Safari, so we built a server-side fallback using a dedicated Supabase table.

The blog system publishes 2+ posts per week following a strict SEO golden standard with FAQPage schema, citation-ready sentences for AI search engines, and structured internal linking across 50+ pages.

Hassan Jamal

Founder at PandaCodeGen. Custom Next.js websites that score 95+ on Google PageSpeed.

Austin, TX, USA