Surat — Generator Surat & Dokumen Profesional Indonesia

Overview

Surat adalah web app yang mengganti kebiasaan copy-paste contoh surat dari Google lalu edit manual di Word dengan satu workflow pilih template, isi form, lalu print. Setiap template adalah satu file TypeScript dengan fields dan renderLayout, sehingga penambahan template surat baru tidak butuh edit form engine, cukup satu file baru di registry.

Model freemium (3 surat per bulan gratis) dipilih untuk memperluas funnel akuisisi sebelum user beralih ke paid plan.

Tech & Libraries

Teknologi dan library yang dipakai atau disentuh di project ini:

Problem

Lebih dari 800 ribu pencarian per bulan untuk kata kunci "contoh surat" di Google diarahkan ke blog statis yang meminta user copy-paste, edit manual di Word, lalu print dengan hasil tidak konsisten. Di Play Store 6 dari 7 aplikasi serupa hanya fokus pada satu kategori surat lamaran kerja, tidak ada generator general-purpose untuk surat resmi Indonesia yang punya template engine scalable.

My Role & Ownership

Solo builder untuk riset keyword demand, desain template engine JSON, 5+ template Indonesia, fork arsitektur dari Klinik dengan delta eksplisit, landing SEO, deploy, dan integrasi ke SAINS API.

Technical Approach

Membangun SPA TypeScript + Vite dengan template engine berbasis JSON config: tiap template adalah file src/templates/surat-[nama].ts yang export TemplateConfig berisi fields[] dan renderLayout(data, letterhead). Form dinamis dihasilkan otomatis dari fields[] dan preview live memakai renderLayout, output lewat window.print(). Menambah template baru kira-kira selesai dalam 30 menit tanpa sentuh form engine.

Auth dan subscription delegate ke SAINS API dengan product=surat, tapi model gating berbeda dari Klinik: freemium 3 surat per bulan gratis, dengan counter tersimpan di localStorage. Light theme dipilih agar WYSIWYG dengan hasil cetak di kertas putih, print memakai @media print CSS tanpa dependency PDF berat.

Architecture Notes

Boot flow konsisten dengan produk SAINS lain: main.ts → initAuth() → checkAccess(product=surat) → Dashboard atau PricingPage. Data model berbeda dari Klinik: surat_letters dan surat_letterhead di localStorage. Template engine ada di jantung aplikasi: menambah template baru berarti satu file src/templates/surat-[nama].ts plus registry update, dan form serta preview menyesuaikan otomatis.

Trade-offs

Memilih freemium (3 surat gratis per bulan) alih-alih full paywall karena target market lebih luas dan butuh funnel akuisisi; risk user clear storage untuk reset counter diterima sebagai trade-off MVP yang bisa diperketat kemudian. Data di localStorage mengikuti pola Klinik untuk mempercepat validasi demand sebelum invest di cloud sync.

Light theme dipilih alih-alih dark agar preview WYSIWYG dengan hasil cetak di kertas putih. Template-based architecture butuh disiplin type (FieldDefinition, TemplateConfig), trade-off yang membayar diri sendiri ketika jumlah template tumbuh.

Implementation Highlights

• Template Engine: 1 file TypeScript per template (fields[] + renderLayout()), registry sentral, form dan preview otomatis dihasilkan dari config.
• 5+ template surat Indonesia: Surat Lamaran Kerja, Keterangan Domisili, Resign, Kuasa, Pengantar RT, dengan field type beragam (text, date, textarea, dll).
• LetterheadEditor: kop surat reusable yang di-attach ke template yang membutuhkannya lewat flag needsLetterhead.
• Print-optimized CSS dengan @media print sehingga preview match hasil print di kertas putih.
• Search dan filter by category di dashboard template grid.
• Fork discipline dicatat eksplisit: daftar file copy-as-is dari Klinik versus file rewrite khusus Surat, mempermudah maintain konsistensi arsitektur antar produk.

Results

• Menunjukkan kemampuan merancang template engine scalable untuk produk konten-heavy, mengambil keputusan model gating (freemium vs paywall penuh) berbasis profil user, dan mempertahankan konsistensi arsitektur antar produk SAINS lewat fork discipline yang eksplisit.
• Live di https://app.dokumensurat.web.id dan landing SEO di https://dokumensurat.web.id.
• SEO pages dedicated: /surat-lamaran-kerja/ dan /surat-keterangan/ untuk keyword high-intent.
• 5+ template surat Indonesia aktif dan ekspandable lewat registry.
• Template engine scalable: tambah template baru kurang lebih 30 menit tanpa sentuh form engine.
• PRD, TRD, ARCHITECTURE, TEMPLATES, RESEARCH semua lengkap sebelum build sebagai evidence disiplin spec-first.
• Target keyword demand: 800 ribu+ pencarian per bulan untuk kata kunci "contoh surat" di Google (riset internal).
• 5+ template aktif (Lamaran, Keterangan Domisili, Resign, Kuasa, Pengantar RT), ekspandable via registry.
• Public proof: live di https://app.dokumensurat.web.id dengan 2 SEO page dedicated ter-index.

Links

• Live Demo
• GitHub Repository