Tyibon 🟢

Tyibon adalah platform pembuat twibbon online yang cepat, privat, ringan, dan tanpa watermark. Tyibon bukan sosial media - tidak ada like, comment, follow, atau feed publik.

Prinsip Tyibon: "Simple. Fast. Private."

• Peserta: buka link campaign → masukkan PIN/kode akses (jika privat) → upload foto → download. Tanpa login.
• Tyibotor (Tyibon Creator): login untuk membuat & mengelola campaign twibbon.

Catatan implementasi: platform sandbox ini menyediakan runtime Next.js (App Router) + Drizzle ORM + PostgreSQL. Seluruh fitur pada brief (frontend, backend/API, database) diimplementasikan di atas stack tersebut (bukan Vite/Hono/Prisma/Neon terpisah) agar tetap fullstack dalam satu aplikasi yang bisa dijalankan oleh platform ini. Editor twibbon menggunakan Canvas API native (bukan react-konva) demi bundel JS yang jauh lebih ringan & cepat di HP low-end, sesuai prioritas performa pada brief.

Tech Stack

• Framework: Next.js 16 (App Router), React 19, TypeScript (strict)
• Styling: Tailwind CSS v4 (warna utama #25D366)
• Database: PostgreSQL + Drizzle ORM
• Auth (Tyibotor): cookie httpOnly + JWT, password di-hash dengan bcrypt
• Editor twibbon: Canvas API (drag, zoom, rotate, flip, auto-center, safe-area, download PNG) - 100% diproses di browser, foto peserta tidak pernah dikirim ke server
• Upload aset campaign: ImgBB (fallback ke penyimpanan lokal /public/uploads jika IMGBB_API_KEY kosong)
• Form: React Hook Form + Zod
• Animasi ringan: Framer Motion (hanya untuk toast notifikasi)

Struktur Fitur

• / - Landing page SEO (hero, penjelasan produk, cara pakai, FAQ + JSON-LD schema)
• /explore - Daftar campaign publik (list sederhana, pencarian & filter kategori)
• /campaign/[slug] - Halaman campaign: langsung ke editor (publik) atau gerbang PIN/kode akses (privat)
• /login, /register - Autentikasi Tyibotor
• /tyibotor - Dashboard (total campaign, total download, campaign aktif)
• /tyibotor/campaigns - Kelola campaign milik sendiri
• /tyibotor/campaigns/new - Form buat campaign
• /tyibotor/campaigns/[id] - Detail, share (link/QR/teks undangan), hapus
• /tyibotor/campaigns/[id]/edit - Edit campaign
• /tyibotor/settings - Info akun

API Endpoints

Method	Endpoint	Keterangan
GET	/api/campaigns	Daftar campaign publik
GET	/api/campaign/:slug	Detail campaign (aset frame/background disembunyikan jika privat & belum verifikasi)
POST	/api/campaign	Buat campaign (butuh login Tyibotor)
PATCH	/api/campaign/:id	Update campaign (pemilik saja)
DELETE	/api/campaign/:id	Hapus campaign (pemilik saja)
POST	/api/campaign/:slug/verify	Verifikasi PIN/kode akses campaign privat
POST	/api/campaign/:slug/download	Catat penggunaan/download (hanya counter, tanpa foto)
POST	/api/upload	Upload aset (frame/thumbnail/background) ke ImgBB atau fallback lokal
POST	/api/auth/login	Login Tyibotor
POST	/api/auth/register	Registrasi Tyibotor
POST	/api/auth/logout	Logout
GET	/api/proxy-image	Proxy gambar eksternal agar canvas export tidak ter-taint CORS

Environment Variables

Buat file .env di root project:

DATABASE_URL=postgresql://postgres:postgres@127.0.0.1:5432/app_db
JWT_SECRET=ganti-dengan-secret-acak-yang-panjang
IMGBB_API_KEY=
IMGBB_ENDPOINT=https://api.imgbb.com/1/upload
NEXT_PUBLIC_SITE_URL=https://tyibon.id

Jika IMGBB_API_KEY dikosongkan, upload gambar akan otomatis disimpan ke public/uploads (mode pengembangan).

Setup & Development

npm install
npx drizzle-kit push   # sinkronkan schema Drizzle ke PostgreSQL
node scripts/seed.mjs  # (opsional) isi data contoh + akun Tyibotor demo
npm run dev

Akun Tyibotor demo (dari scripts/seed.mjs):

email: demo@tyibon.id
password: tyibon123

Database Migration

Skema didefinisikan di src/db/schema.ts menggunakan Drizzle ORM (tyibotors, campaigns, downloads). Terapkan perubahan skema dengan:

npx drizzle-kit push

Build & Deploy

npx next typegen
npm run build
npm start

Deploy dapat dilakukan ke platform Node.js apa pun (mis. VPS, Railway, Render) dengan PostgreSQL (Neon kompatibel karena menggunakan driver pg).

Prinsip Privasi

Foto peserta tidak pernah diunggah ke server. Semua kompositing (drag, zoom, rotate, flip, layering frame) terjadi di <canvas> browser, dan hasil akhir diunduh langsung sebagai file PNG dari perangkat pengguna. Server hanya mencatat jumlah penggunaan (counter), bukan file foto.