Overview
Twibbonly adalah platform SaaS (Software as a Service) yang memungkinkan pengguna membuat campaign twibbon sendiri, mengelola frame, dan membagikannya ke publik. Guest dapat menggunakan twibbon langsung dari halaman campaign tanpa perlu login — cukup upload foto, atur posisi, dan download hasilnya.
Platform ini dibangun dengan arsitektur monorepo menggunakan pnpm workspace, memisahkan backend API (Express + TypeScript + Prisma) dan frontend SPA (React + Vite + TypeScript) secara modular.
Background / Problem
Twibbon (atau bingkai foto digital) banyak digunakan di Indonesia untuk kampanye sosial, acara organisasi, promosi brand, dan momen spesial. Namun, platform twibbon yang ada umumnya memiliki keterbatasan:
Twibbonly hadir untuk mengatasi masalah tersebut dengan pendekatan modern: editor berbasis kanvas interaktif, guest flow tanpa login, campaign management system, dan dashboard analytics.
My Role
Saya berperan sebagai full-stack developer yang merancang dan membangun seluruh platform dari awal — mulai dari arsitektur database, backend API, frontend SPA, editor kanvas, sistem autentikasi, hingga CI/CD deployment.
Process
1. Perencanaan & Arsitektur
Proyek dimulai dengan penyusunan Product Requirements Document (PRD) yang mencakup tiga fase pengembangan. Fase 1 (MVP) difokuskan pada fitur inti: registrasi, campaign CRUD, editor twibbon publik, dan admin panel dasar. Database dirancang menggunakan Prisma ORM dengan MySQL 8, mencakup 6 model utama: User, Campaign, KategoriCampaign, PartisipanCampaign, UserSession, dan EmailOtp.
2. Backend API
Backend dibangun dengan Express + TypeScript menggunakan struktur modular. Setiap modul (auth, campaign, public, admin, upload, email, otp) dipisahkan secara jelas. Autentikasi menggunakan JWT short-lived access token yang disimpan di memory client, dipasangkan dengan httpOnly refresh cookie untuk keamanan session. Validasi input dilakukan dengan Zod, baik di sisi env config maupun request body. File upload ditangani oleh Multer, dan gambar diproses dengan Sharp untuk menghasilkan thumbnail dan optimasi frame ke format WebP.
3. Frontend SPA
Frontend dibangun dengan React 18 + TypeScript + Vite. Komponen UI menggunakan shadcn/ui (Radix UI primitives) dengan styling TailwindCSS. State management global untuk autentikasi menggunakan Zustand, sementara server state (API caching) ditangani oleh TanStack Query. Routing menggunakan React Router DOM v6 dengan lazy loading dan guard untuk role-based access.
4. Editor Kanvas Interaktif
Fitur utama yang membedakan Twibbonly adalah editor twibbon interaktif menggunakan React Konva. Pengguna dapat mengupload foto, lalu men-drag, zoom (scroll wheel + slider), dan rotate (slider) foto di dalam frame twibbon. Komposisi dua layer (foto di bawah, frame di atas) dirender di kanvas dan dapat di-download sebagai PNG resolusi 1080x1080. Semua pemrosesan dilakukan client-side — server hanya mencatat partisipasi melalui endpoint analytics ringan.
5. Autentikasi & Security
Sistem autentikasi mencakup registrasi dengan verifikasi OTP email, login email/password, login dengan Google OAuth, serta forgot password. Session dikelola dengan refresh token rotation dan disimpan di tabel UserSession. Rate limiting diterapkan pada endpoint auth, OTP, upload, dan public. Security headers dipasang melalui Helmet, dan CORS dikonfigurasi untuk frontend domain.
6. Deployment & CI/CD
Pipeline CI/CD diatur dengan GitHub Actions. Setiap push ke branch main akan menjalankan build validasi, lalu mendeploy backend ke VPS Ubuntu melalui SSH dengan PM2 + Nginx. Migrasi Prisma dijalankan otomatis sebagai bagian dari deployment.
Key Features / Deliverables
Tools / Technologies
Result / Impact
Platform berhasil dikembangkan hingga Phase 1 MVP dengan seluruh fitur inti berfungsi. Proyek ini menunjukkan kemampuan dalam merancang dan membangun aplikasi SaaS full-stack dari nol — mulai dari arsitektur database, RESTful API, frontend interaktif, sistem autentikasi aman, hingga deployment production dengan CI/CD.
Catatan: Data jumlah pengguna dan metrik bisnis belum tersedia karena proyek masih dalam tahap pengembangan aktif.
Reflection
Salah satu tantangan terbesar adalah membangun editor kanvas interaktif yang responsif dan mudah digunakan di perangkat mobile. Menggunakan React Konva dengan dua layer komposisi membutuhkan penanganan event yang presisi. Keputusan untuk memproses gambar sepenuhnya di client-side terbukti tepat — server tetap ringan dan pengguna mendapat feedback visual instan. Struktur monorepo dengan pnpm workspace juga sangat membantu menjaga konsistensi kode antara frontend dan backend.
