Akhir-akhir ini semua orang bicara tentang vibe coding, jadi saya juga mencoba sekali. Saya menggunakan Claude Code.
Awalnya saya hanya ingin membuat sesuatu yang menyenangkan, tapi entah bagaimana akhirnya saya membuat mini-app yang berjalan di dalam aplikasi Toss. Permainan yang saya buat disebut 〈10 Detik Speedrun Kehidupan Mulia〉, sebuah game bentuk pendek di mana Anda menyelesaikan 3-4 misi efisiensi K dengan klik cepat dalam 10 detik.
Misinya tidak rumit sih.
Permainannya adalah menyelesaikan 3 dari 4 misi ini dalam 10 detik.
Hal-hal yang saya pelajari saat membuat
1. Claude Code
Awalnya saya pikir saya hanya akan copy-paste kode di jendela chatbot, tetapi Claude Code membuat segalanya jauh lebih mudah karena setelah saya pasang di terminal, ia dapat langsung membaca file, memodifikasi, dan bahkan menjalankan tes. Yang penting adalah bisa melakukan semuanya dalam satu alur - dari menulis PRD bersama → mengekstrak skema → membuat komponen → menangkap bug. Khususnya saat membuat 4 jenis misi, permintaan seperti 'buat satu lagi dengan pola yang serupa' berjalan dengan sangat alami.
2. Kami menggunakan Supabase untuk basis data
Awalnya saya ragu apakah harus menjalankan server sendiri, tetapi setelah mencoba Supabase, saya mengerti mengapa semua orang merekomendasikannya. Dengan kombinasi Postgres + Edge Functions + RLS, kami menyelesaikan semuanya mulai dari autentikasi/sesi/validasi skor/peringkat mingguan. Tidak ada beban karena kami dapat memulai dengan tingkat gratis dan beralih ke Pro ketika lalu lintas meningkat. Untuk mencegah penyalahgunaan, kami memfilter waktu penyelesaian misi di bawah 0,2 detik di server, dan hal seperti ini juga ditangani dengan bersih di dalam Edge Function, jadi sangat nyaman.
3. Kami mempercayakan logo/ikon kepada GPT...
Ini bagian yang paling mengejutkan. Karena saya tidak tahu apa-apa tentang desain, saya hanya memberikan deskripsi 'kuning + piksel retro + nuansa kehidupan mulia' dan hasilnya berkualitas tinggi.
4. Vibe coding jelas memiliki keterbatasannya
Saya harus secara langsung menangani mempertahankan frame rate 60fps dan mencocokkan waktu umpan balik haptic. Dan masalah zona waktu seperti pengurutan peringkat mingguan berdasarkan KST hanya terselesaikan setelah bug muncul sekali. Meskipun demikian, ini adalah pekerjaan yang akan memakan waktu lama jika dilakukan sendiri, tetapi kami dapat memperbaikinya dengan cepat.
Ringkasan Stack
Development Tool: Claude Code
Frontend: React 18 + TypeScript + Vite
State Management: Zustand
Backend: Supabase (Postgres + Edge Functions + RLS)
Design: GPT (Logo/Icon/Thumbnail)
Jika Anda memiliki aplikasi Toss terpasang, cobalah sekali.
URL: https://minion.toss.im/PAV4ESV6
