𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝗳𝗼𝗿 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿𝘀: 𝗛𝗼𝘄 𝗜 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗣𝗵𝗼𝘁𝗼 𝗕𝗼𝗼𝘁𝗵 𝗪𝗲𝗯 𝗔𝗽𝗽

I am a writer, not a coder. My technical skills stopped at basic HTML in 1999.

Last week, I built my first real tool. I used Claude to "vibe code" a working photo booth web app for MLH.

Here is how a non-coder built a functional app for live events.

𝗧𝗵𝗲 𝗣𝗿𝗼𝗯𝗹𝗲𝗺 MLH runs many events. We needed a browser-based photo booth.

  • Attendees open a link on their phones.
  • They snap a selfie or upload a photo.
  • They add a branded frame.
  • They save the photo to their camera roll.
  • No accounts. No app stores. Just a link.

𝗧𝗵𝗲 𝗧𝗲𝗰𝗵𝗻𝗶𝗰𝗮𝗹 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝘆 I wanted to use a complex framework. Claude talked me out of it.

For live events, fewer moving parts win. I built the entire tool in one single index.html file. It uses HTML, CSS, and JavaScript. There is no complex build step. It stays on GitHub Pages for free.

𝗧𝗵𝗲 𝗣𝗿𝗶𝘃𝗮𝗰𝘆 𝗕𝗼𝗻𝘂𝘀 I used an HTML canvas to combine the photo and the frame. All processing happens in the user browser. The photo never uploads to a server. This makes it private and secure for attendees.

𝗧𝗵𝗲 𝗕𝗮𝗰𝗸𝗲𝗻𝗱 𝗠𝗮𝗴𝗶𝗰 A static site can still have a backend. I used Supabase for storage.

  • Organizers upload frames to a Supabase bucket.
  • Attendees view those frames through the site.
  • Security lives in database policies, not hidden passwords.

𝗧𝗵𝗲 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿 𝗚𝗼𝘁𝗰𝗵𝗮𝘀 Vibe coding helps with architecture, but you must watch for operational details:

  • Databases sleep. I learned to wake up my Supabase project the day before an event.
  • Image security. I had to add a specific line of code to allow the canvas to use remote images.
  • User experience. On phones, a "download" is hard to find. I changed the code to use the native mobile share sheet. This sends the photo straight to the camera roll.

𝗠𝘆 𝗟𝗲𝘀𝘀𝗼𝗻𝘀 𝗳𝗼𝗿 𝗬𝗼𝘂

  1. Pick a project with hard boundaries. A photo booth is a finish line. A social app is not.
  2. Ask the AI "why." The reasoning is more important than the code.
  3. Read the diffs. Do not let the AI change your site without your review.
  4. Own the decisions. The AI handles syntax, but you handle the constraints.

Vibe coding is not about skipping the work. It is about focusing on the right problems.

Yeni Başlayanlar İçin Vibe Coding: Claude ile Çalışan Bir Fotoğraf Kabini Web Uygulamasını Nasıl Oluşturdum

Hiç kod yazarken sadece sözdizimiyle (syntax) boğuşmaktan yorulduğunuz oldu mu? Ya sadece ne istediğinizi, yani uygulamanın "hissini" (vibe) tarif ederek bir şeyler inşa edebileceğinizi söylesem?

İşte buna Vibe Coding diyoruz.

Geçen hafta, Claude kullanarak sıfırdan çalışan bir fotoğraf kabini web uygulaması yaptım. Ve işin en çılgın yanı neydi biliyor musunuz? Tek bir satır CSS yazmadım.

Vibe Coding Nedir?

Geleneksel programlama, belirli kurallara ve sözdizimlerine sıkı sıkıya bağlıdır. Bir noktalı virgülü unuttuğunuzda her şey çöker. Vibe Coding ise farklıdır. Burada odak noktası, kodun teknik detaylarından ziyade, nihai ürünün nasıl hissettirdiği, nasıl göründüğü ve ne yapması gerektiğidir.

Yapay zeka modelleri (LLM'ler) artık o kadar gelişti ki, onlara teknik talimatlar vermek yerine, bir tasarımcıya veya bir arkadaşınıza anlatır gibi "istediğiniz havayı" anlatabiliyorsunuz.

Projem: Bir Fotoğraf Kabini

Aklımdaki fikir basitti: Kullanıcıların kamerayı açabileceği, fotoğraflar çekebileceği ve bunları retro bir filtreyle kaydedebileceği bir web uygulaması.

1. Adım: İlk Komut (The Initial Prompt)

Başlangıçta Claude'a çok teknik bir şey söylemedim. Sadece şöyle dedim:

"Bana basit bir fotoğraf kabini web uygulaması yap. Kamera görüntüsünü görebileyim, fotoğraf çekebileyim ve çekilen fotoğraflar ekranda görünsün."

Claude saniyeler içinde HTML, CSS ve JavaScript kodlarını oluşturdu. Çalışıyordu, ama... biraz sıkıcı görünüyordu. Beyaz bir arka plan, standart butonlar... "Vibe" eksikti.

2. Adım: "Vibe"ı Yakalamak

İşte işin eğlenceli kısmı burada başladı. Kodla uğraşmak yerine, Claude'a uygulamanın estetiğini tarif etmeye başladım:

  • "Bunu 90'ların retro estetiğine uygun hale getir. Neon renkler, biraz grenli bir görüntü ve eski bir arcade makinesi havası olsun."
  • "Butonları daha yuvarlak ve 'bubbly' yap. Sanki eski bir oyun konsolundaymışız gibi hissettirsin."

Claude, CSS kodlarını anında güncelledi. Uygulama bir anda canlandı. Artık sadece bir web sayfası değil, bir "deneyim" gibi hissettiriyordu.

3. Adım: Hata Ayıklama (Debugging) ile Vibe'ı Korumak

Tabii ki her şey mükemmel gitmedi. Fotoğraf çekme butonuna bastığımda bazen uygulama donuyordu. Eskiden olsa, addEventListener veya canvas API dökümanları arasında kaybolurdum.

Bu sefer sadece şunu dedim:

"Fotoğraf çekme butonuna bastığımda uygulama donuyor. Bunu düzelt ve işlemin daha akıcı olmasını sağla."

Claude hatayı buldu, mantığı düzeltti ve bana nedenini de açıkladı.

Neden Bu Önemli?

Vibe Coding, yazılım dünyasında büyük bir paradigma değişimini temsil ediyor. Artık engel, "nasıl kod yazılacağı" değil, "ne inşa edileceği" haline geliyor.

Bu, teknik bilgisi az olan yaratıcı insanların, hayallerindeki ürünleri inşa edebilmeleri için devasa bir fırsat. Eğer bir fikriniz ve onu tarif edebilecek kadar iyi bir "vibe" anlayışınız varsa, artık bir yazılımcı olmanıza gerek yok; sadece doğru soruları sormanız yeterli.

Sonuç

Claude ile yaptığım bu küçük proje, geleceğin nasıl görüneceğine dair bir ipucu verdi. Kod yazmak, artık bir inşaat işçisi olmaktan çıkıp, bir orkestra şefi olmaya dönüşüyor. Siz sadece ritmi ve havayı belirliyorsunuz, yapay zeka ise enstrümanları çalıyor.