PENGEMBANGAN
Membangun ImageTools.pro dengan Next.js dan Vibe Coding
Willya Randika |
Bayangkan membangun aplikasi web yang kompleks tanpa harus menghabiskan berminggu-minggu atau berbulan-bulan. Saya baru saja melakukannya dengan ImageTools.pro - sebuah aplikasi pengolah gambar online yang saya bangun hanya dalam waktu 5 hari dengan bantuan AI dan teknologi modern.
Project ini adalah hasil dari apa yang dikenal sebagai “vibe coding” - pendekatan pengembangan software yang dipopulerkan oleh Andrej Karpathy pada awal tahun 2025. Menurut Wikipedia, vibe coding adalah metode pengembangan software yang mengandalkan AI, di mana developer mendeskripsikan masalah dalam beberapa kalimat sebagai prompt kepada large language model (LLM), kemudian membimbing dan menyempurnakan kode yang dihasilkan.
Mari saya ceritakan bagaimana saya menggunakan pendekatan ini untuk membangun ImageTools.pro dalam waktu super singkat.
ImageTools.pro berhasil terjual di Flippa
Project ini saya jual di Flippa dan telah terjual dengan harga USD $350.
Langkah pertama yang saya lakukan adalah menggunakan Claude 3.7 Sonnet untuk membuat roadmap komprehensif dan daftar tugas untuk proyek ini. Saya menjelaskan visi saya tentang aplikasi pengolah gambar yang berjalan di browser, dan AI membantuku:
Roadmap dan daftar tugas ini kemudian saya berikan kepada Cursor (editor berbasis AI) untuk “dipelajari” sebagai konteks, sehingga saat saya mulai membangun, AI sudah memiliki pemahaman mendalam tentang tujuan proyek saya.
Berdasarkan rekomendasi AI dan pengalaman pribadi saya, saya memilih stack teknologi berikut:
Next.js 15.2.4 - Versi terbaru dengan App Router, memberikan pengalaman developer luar biasa dengan fitur-fitur server components, routing berbasis file, dan optimisasi gambar bawaan.
React 19 - Core library untuk membangun UI interaktif dengan semua fitur terbaru.
TypeScript - Untuk type safety dan developer experience yang lebih baik.
Shadcn UI - Komponen UI yang sangat customizable dan dibangun di atas Radix UI, memberikan fondasi desain yang solid tanpa overhead dari library UI besar.
Tailwind CSS - Utility-first CSS framework yang mempercepat styling tanpa meninggalkan fleksibilitas.
Framer Motion - Untuk animasi yang mulus dan interaktif di seluruh antarmuka.
Untuk pemrosesan gambar, saya menggunakan kombinasi beberapa library:
Browser-based Processing (utama):
browser-image-compression (v2.0.2) - Untuk kompresi gambar di browserimage-conversion (v2.1.1) - Untuk konversi format dasarjimp (v1.6.0) - Library manipulasi gambar JavaScript murnireact-image-crop dan react-easy-crop - Untuk UI editing gambar yang intuitifServer-side Processing (opsional/terbatas):
sharp (v0.34.0) - Library pemrosesan gambar berbasis Node.js untuk operasi lebih kompleksbmp-js - Untuk penanganan format BMPjspdf - Untuk konversi ke PDFto-ico - Untuk pembuatan faviconSaya juga menggunakan beberapa utility libraries:
Berbeda dengan pendekatan tradisional yang lebih terstruktur, proses pengembangan ImageTools.pro mengalir secara alami—benar-benar mencerminkan esensi dari vibe coding. Untungnya, pengalaman saya dengan HTML dan CSS sangat membantu dalam memahami dan mengarahkan kode yang dihasilkan AI.
Alih-alih bekerja dalam tahapan-tahapan yang jelas terpisah, saya bergerak bolak-balik antara berbagai aspek pengembangan, tergantung pada inspirasi dan kebutuhan saat itu. Berikut beberapa highlight dari proses tersebut:
Saya mulai dengan meminta Cursor + Claude 3.7 untuk menyiapkan struktur proyek Next.js dengan Tailwind CSS dan Shadcn UI. Pengalaman ini sangat mulus—saya cukup mendeskripsikan apa yang saya inginkan, dan AI menghasilkan kode boilerplate dengan cepat.
// app/page.tsx - Halaman utama sederhana
import Hero from '@/components/landing/Hero'
import FeaturedTools from '@/components/landing/FeaturedTools'
import HowItWorks from '@/components/landing/HowItWorks'
import Features from '@/components/landing/Features'
export default function Home() {
return (
<main>
<Hero />
<FeaturedTools />
<HowItWorks />
<Features />
</main>
)
}Tantangan terbesar yang saya hadapi adalah mengimplementasikan pemrosesan gambar yang efisien. Setelah melakukan riset, saya memutuskan untuk mengadopsi pendekatan hybrid yang memprioritaskan browser:
Pemrosesan Browser (Client-side) - Ini adalah pendekatan utama saya. Untuk mayoritas operasi, saya menggunakan kombinasi dari Canvas API browser dan library JavaScript seperti browser-image-compression, image-conversion dan jimp. Ini memungkinkan pengguna untuk memproses gambar langsung di browser tanpa perlu upload ke server.
Contoh implementasi untuk resize gambar dengan Canvas API:
function resizeImage(file, maxWidth, maxHeight) {
return new Promise((resolve) => {
const img = new Image();
img.onload = () => {
// Menghitung dimensi baru
let width = img.width;
let height = img.height;
if (width > maxWidth) {
height = (maxWidth / width) * height;
width = maxWidth;
}
if (height > maxHeight) {
width = (maxHeight / height) * width;
height = maxHeight;
}
// Rendering ke canvas
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
// Konversi canvas ke Blob
canvas.toBlob((blob) => {
resolve(blob);
}, file.type);
};
img.src = URL.createObjectURL(file);
});
}Pemrosesan Server (Fallback) - Untuk operasi yang lebih kompleks atau konversi format tertentu yang tidak bisa dilakukan secara efisien di browser (seperti konversi AVIF atau TIFF), saya menggunakan API serverless dengan Sharp.js. Yang penting, file pengguna ditangani dengan aman dan tidak disimpan setelah konversi selesai.
Saya memastikan untuk meminimalkan penggunaan pemrosesan server dan hanya menggunakannya saat benar-benar diperlukan, seperti yang tercantum di halaman About website saya:
"All conversions happen directly in your browser. Your files never leave your device."Pendekatan hybrid yang memprioritaskan browser ini memberikan saya fleksibilitas untuk menawarkan lebih banyak fitur sambil tetap menjaga privasi pengguna sebagai prioritas utama.
Claude dan Gemini sangat membantu saya dalam mengintegrasikan berbagai library pemrosesan gambar dan mengoptimalkan performa browser. Misalnya, untuk image compression, saya sempat bingung antara menggunakan browser-image-compression atau implementasi manual dengan Canvas, dan AI membantu saya membandingkan kelebihan dan kekurangan masing-masing pendekatan.
Pengembangan UI menggunakan Shadcn UI dan Tailwind CSS berjalan sangat lancar. Untuk membuat pengalaman pengguna lebih menarik, saya menambahkan animasi dengan Framer Motion dan memastikan semua interaksi terasa responsif.
Saya juga memanfaatkan Zustand untuk state management yang ringan, yang memungkinkan saya mengelola state aplikasi tanpa boilerplate yang berlebihan. Ini sangat berguna untuk menyimpan pengaturan pengguna saat beralih antar tool yang berbeda.
// Store untuk status pemrosesan dan pengaturan pengguna
const useImageStore = create((set) => ({
originalImage: null,
processedImage: null,
processingStatus: 'idle', // 'idle' | 'processing' | 'done' | 'error'
settings: {
quality: 80,
format: 'webp',
resize: { width: 800, height: 600, maintain: true },
},
setOriginalImage: (file) => set({ originalImage: file }),
setProcessedImage: (result) => set({ processedImage: result }),
setProcessingStatus: (status) => set({ processingStatus: status }),
updateSettings: (newSettings) => set((state) => ({
settings: { ...state.settings, ...newSettings }
})),
resetStore: () => set({
originalImage: null,
processedImage: null,
processingStatus: 'idle',
}),
}));Di fase akhir pengembangan, saya fokus pada:
Proses deployment ke Vercel berjalan sangat mulus. Hanya perlu beberapa klik untuk menghubungkan repositori GitHub dan melakukan deployment produksi pertama.
Salah satu hal yang saya banggakan dari ImageTools.pro adalah koleksi lengkap lebih dari 35 alat pengolahan gambar yang saya buat. Semua tools ini dirancang untuk memenuhi berbagai kebutuhan pengguna, dan saya mengorganisirnya dalam kategori yang mudah diakses:
Saya mengimplementasikan dukungan konversi antara semua format populer:
Tools yang saya buat untuk mengoptimalkan ukuran file berbagai format:
Tools untuk mengubah dimensi gambar:
Tools untuk kebutuhan khusus yang saya tambahkan:
Mengimplementasikan semua tools ini tentu saja jadi tantangan tersendiri, terutama karena beberapa memerlukan logika pemrosesan yang kompleks. Tapi dengan pendekatan vibe coding, saya bisa menyelesaikan mayoritas fungsi dalam waktu singkat. Rasanya seperti punya asisten developer yang bekerja non-stop bersama saya!
Setelah saya luncurkan, ImageTools.pro menunjukkan hasil yang membuat saya senang:
Yang lebih membanggakan lagi, ini menjadi bukti nyata kesuksesan pengembangan berbasis AI. Apa yang biasanya membutuhkan waktu berminggu-minggu, saya selesaikan dalam 5 hari.
ImageTools.pro adalah contoh nyata dari kekuatan vibe coding, istilah yang dipopulerkan oleh Andrej Karpathy pada Februari 2025. Menurut artikel di Medium oleh Madhukar Kumar, vibe coding telah menjadi trend signifikan dalam dunia pengembangan software, dengan beragam tools yang bermunculan untuk mendukung metodologi ini.
Pendekatan vibe coding memberikan beberapa keunggulan penting:
Dengan AI, saya sebagai developer dapat bergerak dari konsep ke produk jadi dalam waktu yang jauh lebih singkat dari sebelumnya. Ini membuka kemungkinan baru untuk eksperimen dan inovasi yang sebelumnya terhambat oleh batasan waktu dan sumber daya.
Founder Harun Studio & web developer, blogger, serta hosting reviewer. Telah membantu pemilik bisnis meraih kesuksesan dengan design, development dan maintenance sejak 2021.