Happify

Happify is a full-stack custom merchandise e-commerce platform - featuring an interactive canvas-based product designer, AI background removal, cross-device QR checkout, Midtrans QRIS payment, and automated email and WhatsApp order notifications.

Overview

Happify is a custom merchandise platform built by MJ Solution Indonesia, allowing customers to personalize products - T-shirts, socks, tote bags, and gift cards - through an interactive canvas designer. Users can upload photos with client-side AI background removal, browse Pixabay stock designs, and edit gift cards. Cart state persists in localStorage, with a cross-device QR checkout flow that lets kiosk users transfer their cart to a mobile device via Supabase-backed checkout sessions. Payment is handled via Midtrans Snap (QRIS only). Post-payment, a webhook triggers automated order confirmation emails via Resend (to customer and production team) and WhatsApp resi notifications via Fonnte. An admin dashboard handles order and shipping management.

Problem

Ordering custom merchandise typically requires back-and-forth communication with a designer, manual calculations for shipping, and no real-time visibility into order status. For event or kiosk contexts, completing a purchase on a small screen or shared device adds further friction.

Solution

A self-service customization platform where customers design their own products, calculate shipping in real time via Binderbyte API, and pay via QRIS - all in one flow. The cross-device QR checkout solves the kiosk-to-mobile handoff problem, while the Express backend and Midtrans webhook automate all post-payment notifications and order logging without manual intervention.

Highlights

Interactive canvas-based product customizer (T-shirt, socks, tote bag, gift card)
Client-side AI background removal via @imgly/background-removal and MediaPipe
Pixabay stock design search with proxy API route
Cross-device QR checkout: kiosk -> Supabase checkout_sessions -> mobile prefill
Midtrans Snap integration (QRIS only, sandbox)
Automated post-payment email to customer and production team via Resend
WhatsApp resi notification via Fonnte API
Real-time shipping cost calculation and region selection via Binderbyte API
PDF order summary generation and temp file management
Admin dashboard for order and shipping management
Separate Express.js backend (port 3001) for payment and notification logic

Features

Product customizer with canvas rendering per product type

Photo upload with client-side AI background removal

Pixabay stock design picker

Gift card editor with canvas

Add to cart with localStorage persistence

Cart page with item management and order summary

QR checkout modal for cross-device handoff (kiosk -> mobile)

Checkout form with region selector (province -> city -> district)

Real-time shipping cost calculation (Binderbyte API)

Midtrans Snap QRIS payment popup

Order success, pending, and error pages

Post-payment PDF generation and email delivery (Resend)

WhatsApp shipping notification (Fonnte)

Admin login and order dashboard

Midtrans webhook handler for order status updates

Tech Stack

Next.js 16React 19TypeScriptTailwind CSS v4Framer MotionExpress.jsSupabaseMidtrans SnapResendFonnteBinderbyte APIPixabay API@imgly/background-removalMediaPipereact-qr-codeVercel

←All projects