Claude Code के साथ vibe coding से बना bookshelf प्रोजेक्ट

 (balajmarius.com)
10 पॉइंट द्वारा GN⁺ 2025-12-30 | अभी कोई टिप्पणी नहीं है. | WhatsApp पर शेयर करें
  • लगभग 500 किताबों को अपने-आप वर्गीकृत और विज़ुअलाइज़ करने के लिए Claude Code का उपयोग करने वाला एक व्यक्तिगत प्रोजेक्ट
  • जहाँ मौजूदा ISBN scanner या Goodreads Romanian editions को पहचान नहीं पाए, उस समस्या को OpenAI Vision API और Claude द्वारा लिखी गई scripts से हल किया गया
  • 90% accuracy के साथ metadata extraction के बाद, बाकी को manually ठीक किया गया और Open Library·SerpAPI के जरिए cover images अपने-आप जुटाई गईं
  • Framer Motion का उपयोग करके scroll-based animation और page count के आधार पर किताब की मोटाई दिखाने से असली bookshelf जैसा interaction बनाया गया
  • यह AI और उपयोगकर्ता के सहयोग की ऐसी संरचना दिखाता है जहाँ AI execution संभालता है और उपयोगकर्ता सौंदर्यबोध व चयन को, और इस बात पर ज़ोर देता है कि ‘execution cost कम होती जा रही है, लेकिन taste अब भी इंसान का क्षेत्र है’

पूरा बना हुआ Bookshelf - https://balajmarius.com/bookshelf देखें

प्रोजेक्ट अवलोकन

  • लगभग 500 किताबें होने के बावजूद उनकी सूची व्यवस्थित न होने की स्थिति में, AI tools की मदद से स्वचालित वर्गीकरण और visualization system बनाया गया
  • साधारण spreadsheet के बजाय, Claude Code के माध्यम से execution steps को automate करके लंबे समय से टल रहा यह व्यक्तिगत प्रोजेक्ट पूरा किया गया
  • इस प्रोजेक्ट का मुख्य बिंदु तकनीकी पूर्णता से ज़्यादा execution bottleneck को हटाना था

समस्या की पहचान

  • ISBN scanner apps और Goodreads Romanian editions या दुर्लभ प्रकाशनों को पहचान नहीं पाए, जिससे data अधूरा रहा
  • अधूरा data उल्टा और भ्रम पैदा करता रहा, इसलिए प्रोजेक्ट बार-बार रुकता गया
  • ज़रूरत किसी perfect app की नहीं, बल्कि ऐसी system architecture की थी जो अपूर्णता को सह सके

डेटा संग्रह और प्रोसेसिंग

  • किताबों के cover और spine की 470 तस्वीरों के आधार पर data तैयार किया गया
  • Claude द्वारा लिखी गई script हर image को OpenAI Vision API पर भेजती है, author·title·publisher निकालती है, और परिणाम JSON files में सहेजती है
  • लगभग 90% accuracy हासिल हुई, जबकि बाकी गलतियाँ lighting, damage और resolution की वजह से थीं
  • बचे हुए 10% को manually ठीक किया गया, और बाद में नई किताबें जोड़ने पर वही pipeline अपने-आप चलती है

कवर इमेज सुधार

  • Open Library API से covers लाए गए, लेकिन उनमें से लगभग आधे low quality या गलत images थे
  • Claude ने quality scoring और error flag system जोड़ा, और failure की स्थिति में SerpAPI के जरिए Google image search से विकल्प लिया
  • लगभग 460 किताबों में से सिर्फ 10 को manual correction से ठीक करना पड़ा, जिससे automation की दक्षता बनी रही

bookshelf UI का कार्यान्वयन

  • साधारण cover grid के बजाय, असली bookshelf जैसी spine-केंद्रित visual presentation बनाई गई
  • Claude ने color extraction (color quantization) और contrast text color calculation किया
  • Open Library के page count data का उपयोग करके किताब की मोटाई दिखाई गई, और थोड़ा variation जोड़कर उसे अधिक वास्तविक बनाया गया
  • नतीजतन, असली bookshelf जैसी visual texture हासिल हुई

animation और interaction

  • Framer Motion के साथ scroll करने पर किताबों की spine झुकती हुई दिखे, इसके लिए scroll-based animation जोड़ा गया
  • शुरुआत में React state updates की वजह से रुक-रुक कर चलने की समस्या थी, लेकिन इसे motion values और spring animation से ठीक किया गया
  • सुधार के बाद movement स्मूथ हो गया, और experiment की लागत कम होने से बार-बार कोशिश करना संभव हुआ

अनावश्यक फीचर हटाना

  • infinite scroll feature जोड़ा गया था, लेकिन container height mismatch और scroll errors की वजह से user experience खराब हुआ
  • तकनीकी रूप से यह काम कर रहा था, लेकिन ज़रूरी न होने के कारण इसे हटा दिया गया
  • “काम करने वाला लेकिन अनावश्यक code” हटाने का निर्णय इंसान की भूमिका है — इस बात पर ज़ोर दिया गया

मोबाइल सपोर्ट और stack view

  • मोबाइल पर horizontal scrolling असुविधाजनक होने के कारण vertical stack view जोड़ा गया
  • Claude ने मौजूदा code का विश्लेषण करके animation timing, color extraction, scroll opacity handling आदि को फिर से इस्तेमाल किया
  • बिना अलग से समझाए एक पूरा नया component बना दिया गया, जिससे AI की code understanding और reconstruction क्षमता दिखी

इंसान की भूमिका और निष्कर्ष

  • Claude ने सारा code लिखा, लेकिन उपयोगकर्ता ने निम्न निर्णय लिए
    • 90% accuracy स्वीकार करना
    • 10 covers को manually ठीक करना
    • spine-केंद्रित design चुनना
    • अनावश्यक features हटाना
    • animation की संवेदनात्मक पूर्णता की पुष्टि करना
  • अंतिम परिणाम 460 किताबों को अपने-आप वर्गीकृत और विज़ुअलाइज़ करने वाली web-based bookshelf है
  • यह ऐसा सहयोग मॉडल दिखाता है जहाँ AI execution संभालता है और इंसान taste और judgment
  • निष्कर्षतः “execution cost लगातार कम हो रही है, लेकिन taste अब भी इंसान का क्षेत्र है”

संबंधित पढ़ाई

अभी कोई टिप्पणी नहीं है.

अभी कोई टिप्पणी नहीं है.