sYxpaY — Kampanye Interaktif & Video Greeting Generator
Ekosistem kampanye interaktif fintech sYxpaY yang menghubungkan landing page Next.js 15 dan Payload CMS dengan microservice rendering Remotion untuk peracikan kartu ucapan serta video bertema hari raya via WhatsApp.
Studio Remotion untuk perancangan dan rendering komposisi video serta kartu ucapan secara terprogram
Gambaran & Masalah
Pada momen perayaan hari besar (seperti Paskah, Idul Fitri, Imlek, dan Natal), aplikasi fintech e-wallet sYxpaY menyelenggarakan kampanye promosi dan pengiriman kartu ucapan personal antarpengguna. Sebelumnya, materi promosi bersifat statis dan tim pemasaran harus meminta bantuan teknis setiap kali ingin mengganti tema, banner, atau teks promosi.
Di sisi lain, menghasilkan ratusan ribu video animasi dan kartu ucapan kustom beresolusi tinggi dengan nama pengirim dan pesan unik secara langsung di server web utama berisiko tinggi membebani CPU, meningkatkan waktu tunggu (timeout), serta mengganggu operasional sistem perbankan.
Tantangan rekayasa pada ekosistem ini adalah membangun antarmuka web interaktif yang dapat dikelola fleksibel oleh tim konten lewat CMS terintegrasi, dipadukan dengan arsitektur microservice rendering terdistribusi yang mampu memproses pekerjaan render berat di latar belakang secara andal tanpa hambatan koneksi.
Fitur & Implementasi Teknis
- Landing Page Modular & Live Preview (Next.js 15 & Payload CMS): Membangun aplikasi web promosi menggunakan Next.js 15 App Router dan Headless Payload CMS 3.x dengan basis data PostgreSQL. Komponen halaman (Hero, Alur 4 Langkah, Galeri Event, Pop-up Promo) dirancang modular sehingga tim pemasaran dapat mengubah tata letak dan konten secara instan tanpa proses rilis kode ulang. Mode Live Preview memungkinkan pratinjau perubahan teks dan warna secara real-time pada mockup desktop dan mobile.
- Alur Personalisasi Interaktif 4 Langkah: Menyediakan alur interaktif bagi pengguna: memilih tema hari raya, memilih desain kartu, mengisi nama pengirim serta penerima dengan validasi Zod dan form TanStack Query, lalu melihat pratinjau hasil sebelum dikirimkan.
- Programmatic Media Rendering (Remotion): Mengembangkan microservice service-video berbasis Node.js dan ekosistem Remotion (
@remotion/bundlerdan@remotion/renderer). Template video dan kartu ucapan dirancang sebagai komponen React murni, yang dikompilasi secara terprogram menjadi video MP4 (H.264) atau kartu ucapan PNG beresolusi tinggi dalam hitungan detik. - Orkestrasi Antrean Terdistribusi (Temporal.io): Menghubungkan permintaan render frontend dengan alur kerja Temporal.io distributed background task queue. Pemrosesan render CPU yang berat diisolasi dari server web utama dengan mekanisme retry handling otomatis, pelacakan status pekerjaan, serta toleransi kegagalan (fault tolerance).
- Pengiriman Terintegrasi Cloud Storage & WhatsApp API: File media hasil render disimpan secara aman di cloud storage (GCS/MinIO). Begitu proses render selesai, sistem memicu webhook callback ke gateway WhatsApp API untuk mengirimkan tautan media dan pesan personal langsung ke ruang obrolan WhatsApp pengguna.
Hasil & Status Proyek
Ekosistem kampanye dan microservice rendering berhasil diuji dan disiapkan untuk melayani produksi ribuan kartu ucapan dan video promosi event sYxpaY secara otomatis, memisahkan beban komputasi render dari aplikasi utama serta memberikan kebebasan penuh bagi tim pemasaran dalam mengelola tema kampanye.