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

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.

Vibe Coding kwa Wanaoanza: Jinsi Nilivyojenga Web App ya Photo Booth Inayofanya Kazi kwa Kutumia Claude

Vibe coding ni dhana inayozidi kupata umaarufu hivi karibuni. Badala ya kuzama kwenye kila mstari wa kodi, unatumia AI kuelezea "vibe" au hisia ya unachotaka kutengeneza.

Katika makala haya, nitakuonyesha jinsi nilivyotumia Claude kujenga programu ya photo booth ya wavuti (web app) kuanzia mwanzo kabisa.

Vibe Coding ni nini?

Vibe coding ni njia ya kutengeneza programu ambapo unajikita zaidi kwenye kuelezea nini unataka badala ya jinsi ya kuandika kodi hiyo. Unatoa maelekezo kwa AI (kama Claude) kuhusu muonekano, utendaji, na "vibe" ya programu yako, kisha AI inakuandikia kodi.

Mradi Wangu: Photo Booth Web App

Nilikuwa nataka kitu cha kufurahisha na rahisi. Lengo lilikuwa kutengeneza programu inayoweza:

  • Kufungua kamera ya kompyuta.
  • Kupiga picha.
  • Kuweka vichujio (filters) rahisi.
  • Kuruhusu mtumiaji kupakua picha hiyo.

Teknolojia Nilizotumia (Tech Stack)

  • Claude 3.5 Sonnet: Injini kuu ya uandishi wa kodi.
  • React: Kwa ajili ya kutengeneza muonekano wa programu.
  • Tailwind CSS: Kwa ajili ya urembo na mpangilio (styling).
  • Vite: Kwa ajili ya kasi ya maendeleo.

Mchakato Niliofuata

1. Prompt ya Awali

Sikuanza kwa kuandika kodi. Badala yake, nilimpa Claude maelekezo (prompt) ya awali:

"Nisaidie kutengeneza web app ya photo booth kwa kutumia React na Tailwind CSS. Inapaswa kuwa rahisi, yenye rangi za kuvutia, na iweze kutumia kamera ya mtumiaji."

2. Marekebisho (Iteration)

Claude ilinitolea kodi ya awali. Ilifanya kazi, lakini haikuwa na "vibe" niliyotaka. Ilionekana kama programu ya zamani.

Niliendelea kusema:

"Hiyo ni nzuri, lakini ifanye ionekane ya kisasa zaidi. Ongeza rangi za neon na uifanye iwe na muonekano wa 'retro'."

Hapa ndipo "vibe coding" inapoingia. Sikuwa naelezea kila <div> au className, nilikuwa naelezea hisia ya muonekano.

3. Kurekebisha Makosa (Debugging)

Kuna wakati kamera haikutaka kufunguka. Badala ya kutafuta kosa kwenye kodi kwa saa nyingi, nilinakili kosa (error) na kumwambia Claude:

"Kamera haifunguki, hapa kuna kosa: [error message]. Unaweza kurekebisha?"

Claude ilitambua tatizo na kunipa suluhisho papo hapo.

Hitimisho

Vibe coding haimaanishi kuwa huna haja ya kujifunza programu. Inamaanisha kuwa unaweza kutengeneza vitu kwa kasi zaidi na kwa ubunifu mkubwa. Ni kama kuwa na msaidizi mwenye uwezo mkubwa ambaye anasubiri maelekezo yako.

Jaribu pia! Anza na wazo dogo, mpe Claude "vibe", na uone matokeo.