Vibe Coding for Beginners: मी Claude वापरून Photo Booth कसा तयार केला

मी एक लेखक आहे, कोडर नाही. माझे तांत्रिक कौशल्य १९९९ मधील मूलभूत HTML पर्यंतच मर्यादित आहे.

पण मी नुकतेच एक प्रत्यक्ष, कार्यरत साधन (tool) तयार केले आहे.

मी MLH इव्हेंट्ससाठी ब्राउझर-आधारित फोटो बूथ तयार केला आहे. सहभागी सेल्फी काढू शकतात, ब्रँडेड फ्रेम जोडू शकतात आणि ते त्यांच्या फोनमध्ये सेव्ह करू शकतात. कोणतेही ॲप स्टोअर नाही. कोणतेही अकाउंट नाही. फक्त एक लिंक.

मी Claude सोबत 'vibe coding' नावाच्या पद्धतीचा वापर केला. मी हे कसे केले आणि त्यातून मी काय शिकलो, ते खाली दिले आहे.

The Strategy (रणनीती)

मला लाइव्ह इव्हेंट्ससाठी काहीतरी विश्वसनीय हवे होते. Claude ने क्लिष्ट frameworks वापरू नका असा सल्ला दिला. त्याऐवजी, आम्ही एक सिंगल index.html फाईल तयार केली.

  • यामध्ये एकाच फाईलमध्ये HTML, CSS आणि JavaScript वापरले आहे.
  • यामध्ये कोणतेही build steps किंवा installations नाहीत.
  • हे GitHub Pages वर मोफत होस्ट करता येते.
  • यामध्ये कमी घटक (moving parts) असल्याने ते बिघडण्याची शक्यता कमी आहे.

The Technical Build (तांत्रिक रचना)

हे ॲप सेल्फी आणि पारदर्शक PNG फ्रेम एकत्र करण्यासाठी HTML canvas चा वापर करते. हे सर्व पूर्णपणे ब्राउझरमध्ये घडते.

  • वापरकर्त्याचा फोटो त्यांच्या डिव्हाइसवरून कधीही बाहेर जात नाही.
  • यामुळे गोपनीयता (privacy) आपोआप सुरक्षित राहते.
  • फोटो सहजपणे अलाइन करण्यासाठी मी pinch-to-zoom सारखे gestures जोडले आहेत.

क्लिष्ट सर्व्हरशिवाय फ्रेम्स व्यवस्थापित करण्यासाठी, मी Supabase वापरले.

  • आयोजक स्टोरेज बकेटमध्ये फ्रेम्स अपलोड करतात.
  • सहभागी ते एका सार्वजनिक लिंकद्वारे पाहू शकतात.
  • सुरक्षा डेटाबेस पॉलिसीद्वारे हाताळली जाते, लपवलेल्या पासवर्डद्वारे नाही.

Beginner Gotchas (सुरुवातीला येणाऱ्या अडचणी)

Vibe coding आर्किटेक्चरमध्ये मदत करते, परंतु तुम्हाला ऑपरेशनल तपशीलांकडे लक्ष द्यावे लागेल:

  • Database Sleep: मोफत Supabase प्रोजेक्ट्स काही काळ निष्क्रिय राहिल्यास थांबतात (pause होतात). इव्हेंट सुरू होण्यापूर्वी तुम्हाला ते पुन्हा सुरू करावे लागतील.
  • Canvas Tainting: दुसऱ्या स्त्रोताकडून (source) प्रतिमा लोड केल्यास 'save' फंक्शनमध्ये अडथळा येऊ शकतो. मी crossOrigin settings वापरून हे ठीक केले.
  • Mobile UX: फोनवर, मी 'native share sheet' वापरली. यामुळे वापरकर्ते एका टॅपमध्ये थेट त्यांच्या कॅमेरा रोलमध्ये फोटो सेव्ह करू शकतात.

My Advice for You (तुमच्यासाठी माझी सल्ला)

जर तुम्हाला हे करून पाहायचे असेल, तर या नियमांचे पालन करा:

  • स्पष्ट मर्यादा असलेला प्रकल्प निवडा. फोटो बूथ हे एक स्पष्ट ध्येय आहे. सोशल मीडिया ॲप खूप मोठे आहे.
  • AI ला "का" (why) याचे स्पष्टीकरण देण्यास सांगा. कोडपेक्षा त्यामागचे तर्क (reasoning) अधिक महत्त्वाचे आहे.
  • diffs वाचा. बदल तपासून पाहिल्याशिवाय AI ला तुमची साइट बदलू देऊ नका.

Vibe coding चा अर्थ असा नाही की तुम्हाला तुमचा प्रकल्प समजला नाही. याचा अर्थ असा आहे की AI सिंटॅक्स (syntax) हाताळते, तर तुम्ही लॉजिक (logic) आणि tradeoffs हाताळता.

स्रोत: https://dev.to/mlh/vibe-coding-for-beginners-how-i-built-a-working-photo-booth-web-app-with-claude-8ib

पर्यायी शिक्षण समुदाय: https://t.me/GyaanSetuAi