Web AppFeatured

Himawari Roastery

Full-stack e-commerce platform for an Indonesian specialty coffee roastery — direct ordering with dual payment flows (Midtrans + manual transfer), order tracking, and a custom admin CMS with payment verification built in.

Live Demo

Tentang Proyek

Himawari Roastery is a complete e-commerce platform for a specialty coffee roastery selling single-origin Gayo Aceh coffee. It combines a marketing storefront, a direct-order checkout system, and a self-hosted headless CMS — replacing the typical marketplace-only sales flow with the brand's own ordering channel.

The storefront features an animated landing page, product catalog, brewing education pages, and brand story — all content-managed through the CMS, including marketplace links, social media, and payment settings, so nothing is hardcoded.

The core of the platform is its dual-path payment system. Customers checking out through the multi-step order flow can pay via Midtrans Snap (credit card, GoPay, OVO, ShopeePay, DANA, QRIS, virtual accounts, and convenience stores) with automatic confirmation through a SHA512-signature-verified webhook — or via manual bank transfer, uploading proof of payment that admins verify through a purpose-built verification panel. Both paths converge into a single order state machine covering the full lifecycle from pending to completed, with cancellation and refund handling.

Every order triggers automated notifications: WhatsApp messages to the owner via Fonnte, HTML email alerts to admins via Resend with verification CTAs, and confirmation/rejection emails to customers — all fire-and-forget so they never block the checkout response. Customers receive a public tracking link (auto-polling every 30 seconds) shareable via WhatsApp, plus an order-lookup page by order number.

The admin panel extends Payload CMS with custom React components: a metrics dashboard (daily orders, paid orders, pending verifications, monthly completions), an inline payment-verification panel on the orders list with expandable proof images and one-click approve/reject, and an order-edit sidebar with direct WhatsApp links to customers and ready-to-copy tracking URLs.

Real-time shipping cost calculation integrates the RajaOngkir API across six Indonesian couriers (JNE, J&T, SiCepat, POS, TIKI, AnterAja), and product pages deep-link into checkout with pre-filled carts (/pesan?add=slug:qty).

Role: Sole full-stack developer — storefront, checkout flow, payment integrations, notification system, and admin CMS customization.

Highlights

▸Designed and developed a high-converting landing page for a specialty coffee brand.
▸Implemented smooth animations and responsive layout for all screen sizes.
▸Built a dual-path payment system: Midtrans Snap integration (8+ payment methods) with SHA512-verified webhook auto-confirmation, alongside a manual transfer flow with proof upload and an admin verification pipeline — both unified under one 9-state order state machine.
▸Designed a 3-step checkout with deep-link support (?add=slug:qty) letting product pages pre-fill the cart and skip straight to shipping details, plus real-time shipping rates from RajaOngkir across 6 couriers.
▸Implemented a multi-channel notification system — WhatsApp (Fonnte) to the owner, HTML emails (Resend) to admin and customers with 4 purpose-built templates — all fire-and-forget so notifications never block order creation.
▸Extended Payload CMS with custom admin UX: a metrics dashboard, an inline verification panel with expandable payment proofs and one-click approve/reject, and per-order sidebars with clickable WhatsApp links and shareable tracking URLs.
▸Shipped a public order tracker with 30-second auto-polling and order lookup by human-readable order number (HMW-YYYYMMDD-XXXX), designed to be shared as a WhatsApp link.
▸Fully CMS-driven configuration — bank accounts, QRIS image, marketplace links, notification emails — so the owner manages everything without touching code.

Tech Stack

Next.jsTypeScriptTailwind CSSPayload CMS TursoMidtransFramer MotionVercel BlobResend

Links

Live Demo

← Lihat semua proyek

Tentang Proyek

Role: Sole full-stack developer — storefront, checkout flow, payment integrations, notification system, and admin CMS customization.

Highlights

▸Designed and developed a high-converting landing page for a specialty coffee brand.

▸Implemented smooth animations and responsive layout for all screen sizes.

▸Built a dual-path payment system: Midtrans Snap integration (8+ payment methods) with SHA512-verified webhook auto-confirmation, alongside a manual transfer flow with proof upload and an admin verification pipeline — both unified under one 9-state order state machine.

▸Designed a 3-step checkout with deep-link support (?add=slug:qty) letting product pages pre-fill the cart and skip straight to shipping details, plus real-time shipping rates from RajaOngkir across 6 couriers.

▸Implemented a multi-channel notification system — WhatsApp (Fonnte) to the owner, HTML emails (Resend) to admin and customers with 4 purpose-built templates — all fire-and-forget so notifications never block order creation.

▸Extended Payload CMS with custom admin UX: a metrics dashboard, an inline verification panel with expandable payment proofs and one-click approve/reject, and per-order sidebars with clickable WhatsApp links and shareable tracking URLs.

▸Shipped a public order tracker with 30-second auto-polling and order lookup by human-readable order number (HMW-YYYYMMDD-XXXX), designed to be shared as a WhatsApp link.

▸Fully CMS-driven configuration — bank accounts, QRIS image, marketplace links, notification emails — so the owner manages everything without touching code.