MochiToon
Saya membangun alat produksinya, dan saya juga yang menulis ceritanya.
Problem
Produksi komik indie berantakan bukan karena kurang ide, tapi karena idenya tersebar. Naskah di satu dokumen, profil karakter di dokumen lain, referensi visual di folder, papan storyboard di kepala. Saat ceritanya tumbuh, biaya untuk mengingat "karakter ini rambutnya seperti apa di bab 3" jadi lebih mahal daripada menggambarnya. Saya tahu persis rasanya, karena saya yang menulis ceritanya.
User
Studio komik indie dan kreator solo. Tapi pengguna nomor satunya adalah saya sendiri, dalam peran yang berbeda — bukan sebagai pengembang, melainkan sebagai penulis utama yang tiap hari memakai alat ini untuk menyusun Kelas Telah Di Mulai. Ini kedua kalinya saya membangun perangkat lunak untuk pekerjaan yang saya jalani sendiri. Yang pertama untuk kelas yang saya ajar; yang ini untuk cerita yang saya tulis. Polanya sama: setiap kekurangan di alat ini saya rasakan sendiri, di hari yang sama.
Solution
Satu tempat yang menampung seluruh alur produksi — dari konsep, naskah, storyboard, hingga panel final — dengan dua wajah: halaman publik untuk memajang karya kepada pembaca, dan dasbor terlindungi untuk mengerjakannya. Pemisahan itu disengaja. Alat produksi tidak boleh bocor ke pembaca, dan halaman pembaca tidak boleh dibebani kerumitan alat produksi.
Key Features
- Halaman publik — galeri karya, halaman detail tiap judul lengkap dengan sinopsis, genre, dan profil karakter; animasi hero; FAQ; SEO dinamis lewat Vercel Edge Functions.
- Dasbor produksi — manajemen naskah per bab dengan penyunting teks kaya, profil karakter berkolom khusus, pelacakan storyboard (draf → tinjau → revisi → setujui), pustaka referensi (lokasi, arsitektur, pakaian, pose), papan kanban tahapan produksi, manajemen galeri.
- Sistem desain tersendiri — folder design-system/ dengan prinsip Liquid Glass dan tipografi Archivo & Space Grotesk. Konsistensi visual diputuskan sekali, bukan ditebak ulang di tiap halaman.
Challenge
🟨 [ISI: satu hambatan teknis konkret dari MochiToon. Kandidat kuat: penyunting Tiptap, pengelolaan aset gambar di Supabase Storage, atau animasi GSAP yang berat di perangkat lemah. Kalau tidak ada yang teringat, bagian ini kita isi dari refleksi berikut.] Refleksi yang sudah bisa ditulis sekarang:
Repositori ini punya riwayat pengembangan paling panjang di antara semua proyek saya — 74 commit — dan sekaligus satu-satunya yang tidak punya pengujian otomatis sama sekali. Ketika itu saya belum menerapkannya. Setelah pengalaman melihat sebuah proyek besar runtuh karena tidak ada pagar pengaman, saya tidak akan mengulanginya.
Jawaban jujur seperti ini jauh lebih kuat daripada berpura-pura semuanya sempurna. Pewawancara akan membandingkan repo-repomu; lebih baik kamu yang menyebut kelemahannya lebih dulu.
Impact
| Naskah & karakter | Sebelum: Tersebar di banyak dokumen · Sesudah: Satu tempat, tertaut per bab |
|---|---|
| Konsistensi karakter | Sebelum: Mengandalkan ingatan · Sesudah: Profil karakter jadi rujukan tetap |
| Memajang karya | Sebelum: Belum ada wadah · Sesudah: Halaman publik dengan SEO & kartu media sosial |
| Melacak tahap produksi | Sebelum: Di kepala · Sesudah: Papan kanban dengan tahapan eksplisit |
Karya berjalan: Kelas Telah Di Mulai — Seinen, genre Action / Horror / Psychology. Seorang instruktur yang terlilit utang menerima kontrak mengajar rahasia dari pemerintah di fasilitas bawah tanah, lalu menyadari ruang kelas itu adalah sistem rekayasa sosial yang mematikan — dan harus meretas aturannya dari dalam demi menyelamatkan murid-muridnya.
(Sinopsis publik saja. Naskah lengkap ditahan karena akan diterbitkan sebagai komik bergambar.)
Tech Choices
| React 19 + Vite 6 | Aplikasi ini didominasi dasbor interaktif, bukan halaman konten. Vite memberi umpan balik pengembangan tercepat |
|---|---|
| Supabase (Postgres + Auth + Storage) | Data produksi sangat relasional: judul → bab → naskah → karakter → referensi. Storage-nya menampung aset gambar tanpa layanan terpisah |
| Tiptap | Naskah butuh penyuntingan kaya (penekanan, struktur), bukan sekadar kotak teks |
| React Hook Form + Zod | Formulir profil karakter punya banyak medan. Validasi berbasis skema mencegah data setengah jadi masuk basis data |
| GSAP + Framer Motion | Ini situs rumah produksi visual. Kalau animasinya biasa saja, klaim "standar visual tertinggi" gugur di detik pertama |
| Tailwind v4 + design system | Konsistensi visual lintas dua wajah aplikasi yang sangat berbeda |
| Vercel Edge Functions | SEO dinamis per judul karya, agar tiap karya punya kartu pratinjau sendiri saat dibagikan |
⚠️ Perbaikan yang sebaiknya kamu lakukan sebelum ini dipajang: gambar Open Graph situsmu saat ini memakai foto stok dari Unsplash. Untuk rumah produksi komik yang mengklaim "standar visual tertinggi", memakai foto stok orang lain sebagai wajah pertama di media sosial itu kontradiksi yang akan langsung terlihat. Ganti dengan karya sendiri.
Screenshot — Placeholder
| 1 · Halaman detail Kelas Telah Di Mulai | Halaman publik dengan sinopsis, genre, dan profil karakter |
|---|---|
| 2 · Papan kanban produksi | Tahapan produksi yang eksplisit |
| 3 · Penyunting naskah Tiptap | Menulis dan mengelola naskah per bab |
| 4 · Pustaka referensi karakter | Konsistensi visual lintas bab |
| 5 · Cuplikan design-system/ | Keputusan visual diambil sekali, bukan ditebak ulang |