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.
Ide untuk membuat ImageTools.pro berawal dari kebutuhan pribadi saya sendiri. Saya sering harus mengkompres, mengubah ukuran, dan mengkonversi gambar untuk berbagai proyek, dan saya tidak puas dengan alat-alat yang tersedia. Banyak di antaranya:
Saya ingin membuat aplikasi yang:
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.
Pengalaman ini benar-benar menunjukkan betapa AI telah merevolusi proses pengembangan software. Claude 3.7 Sonnet dan Gemini 2.5 Pro tidak hanya membantu saya menulis kode, tetapi juga:
Bekerja dengan AI terasa seperti pair programming dengan developer senior yang selalu siap membantu saya.
Meskipun awalnya saya berencana untuk membangun aplikasi 100% client-side, saya menyadari bahwa pendekatan hybrid seringkali lebih praktis dan efisien. Beberapa konversi format dan operasi kompleks memang lebih baik dilakukan di server.
Pendekatan hybrid yang saya pilih memberikan beberapa keuntungan:
Gabungan Next.js dan Shadcn UI terbukti sangat efektif untuk rapid development:
Tantangan terbesar adalah menyeimbangkan performa dengan fitur. WebAssembly dan worker threads membantu mempertahankan UI yang responsif, tetapi ada batasan seberapa banyak pengolahan yang dapat dilakukan di browser.
Saya harus mengorbankan beberapa fitur kompleks (seperti pengolahan batch untuk banyak gambar) untuk iterasi pertama demi menjaga performa yang baik.
Sementara versi pertama sudah live, ada banyak fitur yang ingin saya tambahkan:
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.
ImageTools.pro adalah bukti bahwa kita berada di era baru pengembangan software. Dengan bantuan AI dan pendekatan vibe coding, saya bisa membangun aplikasi web yang kompleks dengan lebih dari 35 alat pengolahan gambar dalam hitungan hari, bukan minggu atau bulan.
Jika Anda ingin mencoba ImageTools.pro, kunjungi https://imagetools.pro dan coba sendiri. Saya merancangnya dengan pendekatan hybrid yang menyeimbangkan pemrosesan browser dan server, memberikan pengalaman yang cepat, aman, dan fungsional.
Anda juga dapat menghubungi saya jika tertarik untuk membangun aplikasi web serupa atau ingin berdiskusi lebih lanjut tentang pengalaman vibe coding dengan AI. Saya percaya ini adalah masa depan pengembangan software, dan saya senang berbagi pengalaman dan insight tentang perjalanan ini.
Founder Harun Studio & web developer, blogger, serta hosting reviewer. Telah membantu pemilik bisnis meraih kesuksesan dengan design, development dan maintenance sejak 2021.