RoastGram
RoastGram adalah AI Instagram Profile Roaster — sebuah web app yang memanfaatkan Google Gemini 2.5 Flash Vision AI untuk menganalisis screenshot profil Instagram secara brutal, lucu, dan insightful. Cukup upload screenshot profil IG, AI akan menilai...
⚙️ Project Details
Tantangan Proyek
Membangun web app yang bisa mengirim gambar screenshot ke Gemini Vision AI, memproses response JSON kompleks, dan menampilkan hasil analisis multidimensi secara visual menarik - semuanya dalam hitungan detik. Tantangan utamanya adalah merancang prompt AI yang konsisten menghasilkan JSON valid dengan struktur yang tepat, mengingat Gemini harus menganalisis visual screenshot Instagram yang sangat bervariasi. Juga perlu ada sistem rate limiting untuk mencegah abuse API Gemini, serta filtering untuk memblokir konten yang tidak pantas dari hasil roast.
Pendekatan & Solusi
Menggunakan Next.js 16 App Router dengan server-side API route di /api/analyze. Prompt engineering yang teliti dengan system prompt terstruktur yang mendefinisikan JSON schema secara eksplisit. ResponseMimeType application/json memaksa Gemini mengembalikan JSON valid. Setiap response AI melewati safety filter. Rate limiting in-memory per IP (10 request/hari). Frontend menggunakan React 19 dengan Framer Motion untuk animasi halus, html-to-image untuk export kartu hasil sebagai PNG. Design system dark glassmorphism dengan custom CSS variables.
Hasil & Dampak Proyek
✅ AI Instagram Roaster lengkap dengan 4 mode roast (casual, brutal, puitis, lucu) + Battle Arena 1v1. ✅ Prompt engineering Google Gemini 2.5 Flash berhasil menghasilkan output JSON terstruktur dengan format card yang siap didownload. ✅ 3 format download card (story, post, landscape) — user bisa langsung share ke sosial media. ✅ UI dark glassmorphism premium dengan animasi Framer Motion — terasa modern dan engaging. ✅ Tech stack modern: Next.js 16 + React 19 + Gemini AI + Framer Motion + Turbopack. 🔗 Live: roastgram.ganys.me