Tautora

Tantangan terbesar adalah merancang sistem tema yang benar-benar berbeda secara visual satu sama lain, bukan sekadar ganti warna. Tema seperti Terminal CRT membutuhkan efek scanline dan glow fosfor, sementara Digital Rococo memerlukan ornamen sudut dan divider dekoratif — keduanya tidak bisa diselesaikan dengan satu struktur CSS yang sama.

Di sisi Custom Theme Builder, kompleksitasnya berlipat karena config yang harus dikelola mencakup 15+ field termasuk nested block styles per section (header, bio, social, links). Setiap perubahan harus langsung terlihat di preview tanpa latency, tapi state yang terlalu sering berubah bisa menyebabkan re-render berlebihan.

Untuk click tracking, tantangannya adalah mencatat setiap klik tanpa memperlambat redirect. Pengguna yang mengklik tautan tidak boleh merasakan delay karena proses pencatatan ke database.

Setiap tema diimplementasikan sebagai komponen React terpisah dengan CSS yang di-scope via atribut data-theme, sehingga tidak ada style yang bocor antar tema. Elemen dekoratif seperti ornamen sudut baroque atau efek scanline CRT dirender sebagai komponen SVG tersendiri di dalam masing-masing tema.

Custom Theme Builder menggunakan satu useState untuk seluruh config dan merender preview langsung di sisi klien tanpa API call. Config disimpan sebagai JSON di PostgreSQL dan divalidasi dengan Zod schema sebelum ditulis ke database, dengan fungsi mergeCustomConfig yang memastikan config lama tetap kompatibel saat schema diperbarui.

Untuk click tracking, pencatatan klik dilakukan secara asinkron di route handler redirect sehingga pengguna langsung diteruskan ke URL tujuan tanpa menunggu query database selesai.

Aplikasi berjalan penuh end-to-end dari registrasi, onboarding, kustomisasi profil, hingga halaman publik yang siap dibagikan.

Sistem tema menghasilkan 10 gaya visual yang benar-benar berbeda karakter dari satu codebase yang sama, masing-masing dengan preset warna tersendiri.