StoreGytal — Toko Produk Digital

Sebuah marketplace produk digital di mana pelanggan dapat membeli e-book, kursus, template, dan lisensi perangkat lunak, dengan pengiriman akses instan dan otomatis setelah pembayaran terverifikasi. Dibangun secara menyeluruh (end-to-end) sebagai Full-Stack Engineer (Node.js & Next.js) — merancang arsitektur backend microservice berbasis pesan (message-driven) dengan RabbitMQ, mengimplementasikan pemrosesan pembayaran Midtrans yang idempoten, dan membangun klien web TypeScript modern.

---

Ringkasan Proyek

• Kategori: Proyek Pribadi / Portofolio Showcase
• Peran: Full-Stack Engineer (Backend Node.js & Frontend Next.js)
• Teknologi Backend: Node.js, TypeScript, Express.js, RabbitMQ (amqplib), PostgreSQL, Prisma ORM, Midtrans Snap SDK, Docker & Docker Compose
• Teknologi Frontend: Next.js 14 (App Router), TypeScript (Strict Mode), TanStack Query, Zustand, Tailwind CSS, Zod

---

Latar Belakang & Motivasi

StoreGytal lahir dari titik gesekan umum dalam penjualan produk digital: jeda antara "pembayaran dikonfirmasi" dan "akses dikirim". Pada banyak implementasi e-commerce sederhana, proses pembuatan pesanan, verifikasi pembayaran, dan pemenuhan pesanan dirangkai dalam satu siklus permintaan sinkronus — yang berarti jika penyedia layanan email lambat atau webhook pembayaran tertunda, seluruh alur checkout dapat terhenti, atau lebih parahnya, pelanggan yang sudah membayar tidak mendapatkan akses mereka.

StoreGytal direkayasa sebagai solusi operasional sekaligus showcase teknis full-stack:

• Memecah alur checkout menjadi layanan-layanan (services) mandiri yang berkomunikasi secara asinkronus melalui RabbitMQ.
• Mengimplementasikan pola "database-per-service" (satu database untuk setiap layanan) untuk menegaskan batasan kepemilikan data antar layanan.
• Mengintegrasikan payment gateway (Midtrans) dengan pemrosesan webhook yang idempoten dan aman terhadap percobaan ulang (retry-safe) — sehingga event pembayaran tidak pernah hilang, tergandakan, atau terabaikan.

---

Kontribusi Full-Stack Saya

Backend Microservice Berbasis Event (Event-Driven)

• Merancang lima layanan yang dapat di-deploy secara mandiri — Auth, Order, Payment, Access, dan Notification — beserta API Gateway terpusat, yang berkomunikasi secara asinkronus melalui RabbitMQ topic exchange (store_events).
• Setiap layanan memiliki database PostgreSQL sendiri (pola Database-per-Service) dan bereaksi terhadap domain events (order.created, payment.success, payment.failed, access.granted) alih-alih dipanggil secara langsung (REST).
• Memisahkan (decoupling) alur checkout sehingga layanan di hilir yang melambat atau gagal (misalnya pengiriman email) tidak akan pernah memblokir pembuatan pesanan atau konfirmasi pembayaran.

Midtrans Payment Gateway & Pemrosesan Webhook yang Andal

• Merekayasa alur dari checkout menuju pembayaran menggunakan Midtrans Snap API.
• Mengimplementasikan verifikasi signature webhook dan format Order ID terstruktur untuk memenuhi batasan parameter Midtrans.
• Merancang konsumen (consumer) RabbitMQ yang idempoten terhadap pengiriman ulang pesan — memastikan webhook yang dikirim ulang oleh Midtrans, atau pesan yang dikirim ulang oleh RabbitMQ setelah crash, tidak akan pernah menghasilkan catatan pembayaran ganda atau penerbitan akses ganda.

Pemrosesan Pesan Tangguh dengan Retry & Dead Letter Queue (DLQ)

• Mengonfigurasi antrean (queue) per layanan yang terikat dengan x-dead-letter-exchange.
• Pesan yang gagal diproses oleh konsumen setelah upaya berulang kali akan secara otomatis diarahkan ke Dead Letter Queue khusus alih-alih hilang begitu saja atau terus-menerus diulang tanpa henti (endlessly retried).
• Mempertahankan event yang gagal untuk keperluan inspeksi dan pemutaran ulang (replay) manual melalui RabbitMQ Management UI.

Pipeline Penerbitan Akses Digital (Access Service)

• Merancang buku besar (ledger) access_grants yang mencatat setiap pembelian sebagai pemberian hak akses diskrit yang dapat diaudit, bukan sekadar penghitung stok yang dapat diubah.
• Memodelkan dua tipe akses: download_link dengan URL bertanda tangan (signed URL) yang dapat kedaluwarsa, dan license_key untuk produk perangkat lunak.
• Mengendalikan transisi status (pending → granted / revoked) murni berdasarkan event hasil akhir pembayaran.

Arsitektur Backend-for-Frontend (Next.js)

• Menata struktur frontend sehingga browser tidak pernah memanggil backend microservice secara langsung.
• Semua akses data klien melalui Next.js (App Router) yang berkomunikasi dengan API Gateway Express.js terpusat. Gateway inilah yang kemudian merutekan trafik ke microservice internal.
• Menjaga agar topologi layanan dan kredensial pihak ketiga tidak pernah terekspos ke sisi klien.

Manajemen Server-State & Sinkronisasi Status Berbasis Polling

• Mengintegrasikan TanStack Query untuk caching server-state pada halaman checkout dan perpustakaan digital (My Library).
• Menggunakan refetchInterval untuk merefleksikan perubahan status backend asinkronus (konfirmasi pembayaran, penerbitan akses) pada antarmuka pengguna tanpa perlu refresh manual.
• Mengisolasi state keranjang belanja (cart) dalam Zustand store yang ringan, terpisah dari data server.

---

Fitur Produk Inti

Katalog Produk Digital & Checkout

• Katalog yang dapat dijelajahi berisi e-book, kursus, template, dan lisensi perangkat lunak.
• Alur keranjang dan checkout yang didukung oleh Midtrans (Virtual Account, E-Wallet, QRIS).
• Polling status checkout secara langsung agar pelanggan tahu detik di mana pesanan mereka telah dikonfirmasi.

Pengiriman Akses Otomatis

• Begitu pembayaran diverifikasi, Access Service menerbitkan tautan unduhan aman atau lisensi tanpa campur tangan manusia.
• Notification Service mengirimkan email kepada pelanggan berisi tautan langsung ke konten mereka.

Perpustakaan Saya (My Library)

• Tampilan persisten yang selalu tersedia untuk melihat setiap produk yang pernah dibeli oleh pelanggan.
• Didukung oleh buku besar access_grants, sehingga pelanggan dapat mengunduh ulang file atau mengambil kembali lisensi kapan saja — tidak sekadar bergantung pada email satu kali kirim.

Pemrosesan Asinkronus yang Tangguh

• Setiap transisi status dalam siklus hidup pesanan (pembuatan, pembayaran sukses/gagal, penerbitan akses, notifikasi) didorong oleh pesan RabbitMQ yang persisten dan mendapatkan acknowledgement (ack).
• Pesan yang gagal akan muncul di Dead Letter Queue (DLQ) alih-alih menghilang tanpa jejak.

Admin Order Dashboard

• Tampilan admin yang ringan untuk melihat daftar semua pesanan dan status pemenuhannya saat ini.
• Sangat berguna untuk dukungan pelanggan (support) dan visibilitas operasional.

---

Teknologi & Arsitektur (Tech Stack)

StoreGytal disusun sebagai sekumpulan layanan yang dapat di-deploy secara independen dan diorkestrasikan menggunakan Docker Compose.

• Backend: Node.js dengan Express.js dan TypeScript di semua layanan; Prisma sebagai lapisan ORM untuk akses database yang type-safe; amqplib untuk integrasi RabbitMQ.
• Pesan (Messaging): RabbitMQ (topic exchange) sebagai tulang punggung untuk komunikasi antar layanan, menggantikan panggilan REST langsung antar layanan.
• Database & Penyimpanan: PostgreSQL untuk setiap layanan (pola database-per-service), menegakkan aturan bahwa tidak ada layanan yang boleh mengambil data milik layanan lain secara langsung.
• Frontend & Gateway: Next.js (App Router) bertindak sebagai klien, yang berkomunikasi dengan API Gateway Express terpusat yang merutekan lalu lintas ke microservice internal (Auth, Order, Payment, Access, Notification).
• Paritas Deployment: Konfigurasi Docker Compose mencerminkan topologi produksi (RabbitMQ, PostgreSQL, lima layanan backend, dan API Gateway). Frontend Next.js sengaja dibiarkan berjalan secara native di luar Docker selama pengembangan lokal untuk mempertahankan performa Fast Refresh (HMR) yang cepat.

---

Tantangan Teknis & Solusi

Memastikan Efek Tepat-Sekali (Exactly-Once) dari Pengiriman Setidaknya-Sekali (At-Least-Once Delivery)

• Tantangan: RabbitMQ menjamin pengiriman at-least-once, yang berarti seorang konsumen (consumer) dapat menerima pesan yang sama lebih dari sekali (misal: jika terjadi crash sebelum ack). Jika secara naif memproses payment.success dua kali, sistem akan menerbitkan akses ganda.
• Solusi: Merancang konsumen agar bersifat idempoten dengan menggunakan eventId dan orderId sebagai kunci, memeriksa state yang ada sebelum melakukan penulisan, sehingga pesan yang dikirim ulang hanyalah menjadi no-op (tidak melakukan apa-apa) yang aman, bukan efek samping ganda.

Mencegah Kehilangan Pesan Secara Diam-diam Saat Konsumen Gagal (Consumer Failure)

• Tantangan: Tanpa penanganan eksplisit, konsumen yang memunculkan error di tengah pemrosesan bisa menyebabkan pesan hilang (auto-ack) atau berulang tanpa batas (blind requeue) — keduanya tidak dapat diterima untuk event terkait pembayaran.
• Solusi: Mengikat setiap antrean (queue) layanan ke Dead Letter Exchange khusus menggunakan atribut x-dead-letter-exchange, menggunakan semantik ack/nack secara eksplisit sehingga pesan yang gagal akan diarahkan ke DLQ yang dapat diinspeksi, alih-alih hilang atau diulang selamanya.

Menjaga Frontend Tetap Terisolasi dari Topologi Backend

• Tantangan: Jika browser harus memanggil empat microservice berbeda secara langsung, hal itu akan membocorkan URL layanan internal, memerlukan konfigurasi CORS di seluruh layanan, dan mengekspos kredensial API pihak ketiga (server key Midtrans) ke klien.
• Solusi: Merutekan semua akses data dari klien melalui API Gateway (dan Route Handlers Next.js), sehingga browser hanya berbicara dengan asalnya (origin) sendiri. Pemanggilan antar-server ke layanan backend terjadi secara aman di luar jangkauan browser.

Merefleksikan Perubahan Status Asinkronus dalam UI yang Terasa Sinkronus

• Tantangan: Karena konfirmasi pembayaran dan penerbitan akses terjadi secara asinkronus melalui RabbitMQ, frontend tidak memiliki cara untuk menunggu (await) hasil checkout dalam satu siklus request-response.
• Solusi: Mengimplementasikan TanStack Query dengan refetchInterval pada halaman status checkout, yang melakukan polling secara otomatis hingga pesanan mencapai status final, kemudian secara otomatis memunculkan akses produk yang baru diterbitkan dalam tampilan "My Library".

---

Pembelajaran Teknis & Poin Kunci

• Merancang dan mengimplementasikan arsitektur microservice berbasis event dari prinsip-prinsip dasarnya — topologi exchange/queue, routing keys, dan durabilitas pesan — bukan hanya sekadar menyambungkan layanan, melainkan memahami mengapa setiap keputusan (seperti topic exchange vs direct, database-per-service, routing DLQ) itu ada.
• Mempraktikkan penanganan webhook pembayaran yang idempoten dan aman terhadap percobaan ulang (retry-safe), sebuah pola yang langsung dapat ditransfer (transferable) ke sistem produksi manapun yang mengintegrasikan payment gateway pihak ketiga.
• Menerapkan pola API Gateway & BFF untuk menjaga agar backend multi-layanan diabstraksikan dengan bersih dari klien, menghindari kerumitan CORS dan kebocoran kredensial.
• Mendapatkan pengalaman langsung (hands-on) tentang sisi operasional dari message broker — semantik pengulangan (retry semantics), dead letter queue, dan inspeksi pesan manual — sebuah pengetahuan yang sangat sulit didapat tanpa sebuah sistem nyata yang dapat dijalankan secara langsung.