SyncLancer
Aplikasi manajemen proyek multi-tenant untuk freelancer, inisiatif sendiri: lead, klien, proposal, proyek, tugas, invoice, dan pencatatan waktu di satu tempat, lengkap dengan portal yang bisa diakses klien.
Masalahnya
Freelancer biasanya menjalankan usahanya tersebar di CRM, aplikasi chat, drive berkas, tool invoice, dan spreadsheet. Tidak ada yang saling terhubung, jadi satu klien yang sama tercatat lima kali. Saya ingin tahu apakah satu skema bisa menampung seluruh alur kerjanya tanpa jadi tidak terpakai.
Yang ingin saya bangun
Membangun satu workspace yang mencakup usaha freelancer dari hulu ke hilir, sekaligus memakainya sebagai cara belajar isolasi tenant, akses berbasis role, dan optimistic UI secara nyata, bukan cuma teori.
Pendekatan
Aplikasi Next.js multi-tenant dengan batas workspace di setiap query. Pipeline lead drag-and-drop mengubah lead menjadi klien, proyek dipecah jadi milestone dan tugas, catatan waktu direkap per proyek, dan invoice dirender ke PDF di browser. Klien melihat versi tersaring dari data yang sama lewat role portal terpisah.
Gambaran umum
SyncLancer adalah produk saya sendiri, bukan pekerjaan klien. Saya membangunnya untuk tahu apa sebenarnya yang terlibat dalam multi-tenancy. Setiap freelancer mendapat workspace terisolasi yang mencakup pipeline lead, klien, proposal, proyek, milestone, tugas, invoice, pencatatan waktu, dan berkas. Klien mendapat login terpisah dengan cakupan terbatas, tempat mereka bisa melihat milestone sendiri, mengunduh berkas, dan melihat invoice.
Arsitektur
Next.js App Router dengan React di frontend. Postgres di Supabase diakses lewat Prisma, dengan foreign key workspace di setiap tabel yang bercakupan tenant. Auth.js menangani autentikasi dan membedakan sesi pemilik dari sesi portal klien. TanStack Query mengelola server state dan optimistic update, @dnd-kit menjalankan board pipeline, @react-pdf/renderer membuat invoice di sisi client, Resend mengirim email transaksional, dan berkas disimpan di Supabase Storage.
Yang berhasil dirilis
- Live di synclancer.web.id dengan pipeline lead, proyek, milestone, tugas, invoicing, dan pencatatan waktu yang berjalan dari hulu ke hilir. Masih terus saya tambah.
- Portal klien sudah punya role bercakupan dan alur undangan, jadi klien hanya pernah memuat baris dari workspace-nya sendiri.
- Invoice dibuat sebagai PDF di browser, sehingga server sama sekali tidak ikut merender dokumen.
Bagian sulit & trade-off
- Isolasi tenant hanya sekuat query terlemahnya. Menegakkannya satu per satu di setiap panggilan itu rapuh, jadi pencakupannya saya pindahkan ke satu lapisan query bersama yang menolak menyusun query tanpa workspace id.
- Optimistic update di board Kanban butuh rollback yang tetap benar ketika reorder gagal di tengah drag. Versi naifnya meninggalkan kartu di kolom yang salah setelah error.
- Portal klien memakai tabel yang sama dengan tampilan pemilik, jadi setiap field harus diklasifikasikan boleh dilihat klien atau tidak. Klasifikasi itulah pekerjaan sebenarnya, bukan UI-nya.
Yang saya pelajari
- Multi-tenancy itu persoalan akses data, bukan fitur. Menentukan di mana batasnya ditegakkan adalah keseluruhan desainnya.
- Optimistic update TanStack Query sangat bagus sampai titik di mana Anda harus membatalkan kegagalan. Jalur rollback-nya layak diperhatikan sebesar jalur suksesnya.
- Cakupan proyek ini saya buat jauh terlalu lebar untuk dikerjakan sendiri. Versi yang lebih sempit, dirilis lebih cepat, akan mengajarkan hal yang sama lebih awal.
Rencana berikutnya
- 1Mencoba menaruhnya di depan freelancer sungguhan. Sekarang penggunanya cuma saya, jadi belum ada bagian alur kerjanya yang benar-benar diuji ke kenyataan.
- 2Menambahkan penerimaan pembayaran supaya invoice bisa diselesaikan langsung di aplikasinya.
- 3Menulis tes integrasi di sekitar batas tenant, yang saat ini masih diperiksa manual.