VINTAR
Creator commerce & D2C multi-tenant platform, simplified.
The System Bottleneck & Problem Statement
Creators and independent sellers in Indonesia are heavily trapped by marketplace fee structures deducting up to 15-20% per transaction, while their storefront tools are disjointed across link-in-bio apps, manual WhatsApp chats, and spreadsheet reconciliation.
Architected Solution & Execution Mechanics
Built an integrated D2C commerce platform where merchants get custom subdomains, zero-friction mobile checkouts, automatic QRIS and Virtual Account settlement via Midtrans, and automated WhatsApp order notifications without exorbitant marketplace cut fees.
Customer Browser
SSR & ISR storefront rendering with ultra-low latency mobile layout.
Core Architecture Implementation
Production-grade architecture implementation powering VINTAR:
import { NextRequest, NextResponse } from 'next/server';
export const config = {
matcher: ['/((?!api/|_next/|_static/|_vercel|[\\w-]+\\.\\w+).*)'],
};
// Edge Subdomain Multi-Tenancy Router
export default async function middleware(req: NextRequest) {
const url = req.nextUrl;
const hostname = req.headers.get('host') || 'vintar.id';
// Extract merchant subdomain from incoming hostname
const rootDomain = process.env.NEXT_PUBLIC_ROOT_DOMAIN || 'vintar.id';
const currentHost = hostname.replace('.' + rootDomain, '');
// Pass through if request is made on apex domain or local root
if (currentHost === 'vintar' || currentHost === 'www' || currentHost === 'localhost:3000') {
return NextResponse.next();
}
// Rewrite request internally to isolated tenant storefront directory
url.pathname = '/store/' + currentHost + url.pathname;
const response = NextResponse.rewrite(url);
response.headers.set('x-tenant-slug', currentHost);
return response;
}Key Engineering Responsibilities
Architected end-to-end multi-tenant routing using Next.js App Router middleware rewrites.
Designed an editorial, high-contrast design system inspired by Stripe & Toss with CSS tokens.
Built dynamic checkout supporting Midtrans QRIS and Virtual Account webhooks.
Engineered an AI Co-pilot interface for merchant product generation and catalog management.
Authored automated test suites in Vitest and Playwright to guarantee checkout zero-downtime.
Non-Trivial Trade-Offs & Decisions
Handling Variable Payment Fees Without Confusing Customers
System Friction: Payment gateways impose flat fees on Virtual Accounts (~Rp 4,000) and percentage fees on QRIS (0.7%). Passing these naively to checkout created sudden price jumps and customer drop-offs.
Architectural Decision: Implemented a dynamic transparent breakdown modal that displays the exact gateway fee before payment selection, while recommending QRIS as the zero-admin option for small transactions.
Measured Outcome: Checkout drop-off dropped significantly during usability testing, with 85% of users opting for QRIS.