LLM और Cursor के साथ side project पूरा करना

• लगभग 5 साल पहले से Engineering Manager की भूमिका संभालने के बाद, मुख्य काम में सीधे code लिखने के मौके कम हो गए
• काम के बाहर भी personal projects लगातार करते हुए programming की समझ बनाए रखी और तकनीकी क्षमता को तेज रखा
• पहले समय की कमी के कारण projects की रफ़्तार धीमी रहती थी और वे पूरे होने से पहले ही अक्सर रुक जाते थे
• लेकिन 2024 में अपेक्षाकृत तेज़ी से ज़रूरी tools बनाकर deploy किए, और पहली version को सचमुच ‘पूरा’ करने की आदत बन गई

हाल में पूरे किए गए side projects के उदाहरण

• jsonplayground.com : एक JSON formatter, जो browser के अंदर चलने वाला JQ feature भी देता है (WebAssembly का उपयोग), इसलिए data बाहर नहीं भेजा जाता
• webtomarkdown.com : files को Markdown में बदलता है या website के कुछ हिस्सों को Markdown रूप में निकालता है, ताकि उसे LLM को context के रूप में दिया जा सके
• aviation club page Evergreen Soaring के design improvement का draft
• एक Chrome extension बनाकर aviation club में आने वाले messages के जवाब को automate किया
• fitinterval.com : workout के दौरान interval timer feature देता है

LLM और Cursor IDE इस्तेमाल करने की पृष्ठभूमि

• LLM side projects की productivity को काफ़ी बढ़ा देता है
• खासकर Cursor IDE के ज़रिए coding work में LLM का उपयोग करना सुविधाजनक है
• इस लेख में नए project बनाने का पूरा flow साझा किया गया है, ताकि पाठक इसे अपनाकर देख सकें
• LLM हर क्षेत्र में उपयोगी नहीं होता, इसलिए इसे खुद इस्तेमाल करके तय करना चाहिए कि कहाँ लागू करना है

उदाहरण project: habit tracking website

• अभी इस्तेमाल किए जा रहे habit tracking app को website के रूप में फिर से बनाना चाहते थे
• सारा data local device पर store होता है, जिससे user privacy का ध्यान रखा जाता है

spec की योजना शुरू करना

• सबसे पहले ChatGPT को एक साधारण description दिया, फिर उसके follow-up questions के जवाब देते हुए application spec को ठोस बनाया
• जब चीज़ें कुछ हद तक स्पष्ट हो गईं, तो कहा कि ‘सिर्फ इस spec को देखकर कोई दूसरा व्यक्ति पूरी app बना सके’ इस स्तर तक इसे व्यवस्थित कर दो
• TypeScript, React, Tailwind CSS इस्तेमाल करने का इरादा स्पष्ट करके उसी tech stack पर आधारित spec तैयार कराया
• final spec को SPEC.md में रखा, ताकि बाद के development process में reference के रूप में इस्तेमाल किया जा सके

project bootstrap

• Vite का उपयोग करके project का ढांचा जल्दी तैयार किया
• npm create vite@latest . command से initial setup किया और SPEC.md को project folder में रख दिया
• Cursor IDE के Composer में agent feature का उपयोग करके Tailwind setup, base files में बदलाव आदि automate किए
• इससे expected UX layout, localStorage usage, Markdown export feature जैसी शुरुआती capabilities कम समय में बन गईं

छोटे units में दोहराव वाला काम

• एक ही बार में बहुत सारी features माँगने के बजाय, ज़रूरी सुधारों को बाँटकर LLM से क्रमवार updates माँगे
• उदाहरण के लिए UX changes, bug fixes आदि को छोटे हिस्सों में बाँटकर Chat या Composer mode में निर्देश दिए
• Chat में images attach करके मनचाहा design समझाया और LLM से उसे code में implement करने को कहा

continuous deployment setup

• GitHub Actions को देखकर ऐसा setup किया कि main branch पर commit आते ही auto build हो और फिर GitHub Pages पर deploy हो जाए
• Cursor में किसी दूसरे repo की example .yml file का link देकर LLM को उसे reference करने दिया, और deployment pipeline तैयार की

समग्र tips

• पहले LLM की मदद से project overview और details को व्यवस्थित कर लें, फिर बाद में context के लिए save करके रखें
• tools या open source templates का उपयोग करके project bootstrap और structure setup करें
  • ज़रूरी development tools और directory structure एक साथ तैयार करें और manageable project pattern अपनाएँ
• Cursor Composer (agent mode) आदि का उपयोग करके project जल्दी शुरू करें
• Claude-3.5-Sonnet और o1 (model) को मिलाकर इस्तेमाल करें
  • व्यापक शुरुआती drafting के लिए o1 का उपयोग करें
  • लगभग 80% काम में Claude-3.5-Sonnet से specific edits और refinements कराएँ
• सही mode चुनें (Chat, Composer सामान्य, Composer agent)
  • Chat: जब किसी खास जगह बदलाव चाहिए हों और हर बार result को verify करना हो
  • Composer(सामान्य): जब कई files में feature additions या multi-file changes की ज़रूरत हो
  • Composer(agent): अभी बहुत ज़्यादा उपयोग नहीं, लेकिन command execution, lint, iterative fixes जैसी automated tasks चाहिए हों तो उपयोगी (हालाँकि इन्हें भी छोटे हिस्सों में बाँटकर manage करना बेहतर है)
• context देते समय specific files, documents, links आदि साथ में दें
  • ज़रूरत पड़ने पर Chat mode में पूरे codebase को देखने की अनुमति दें, ताकि LLM context के मुताबिक code खोजकर सुझाव दे सके
• project-related documents को Markdown format (SPEC.md आदि) में save रखें, ताकि उन्हें context में शामिल किया जा सके
• project folder में .cursorrules file का उपयोग करें
  • किसी specific library का उपयोग न करने का निर्देश देना, या Tailwind, shadcn component library का उपयोग अनिवार्य करना आदि
  • इस तरह prompts में शामिल किए जाने वाले rules पहले से तय कर देने पर, ज़्यादातर requests में मनचाही दिशा में output मिल सकता है
• code को overall समझते हुए काम करें
  • code quality और structure बनाए रखें, ताकि LLM ऐसी स्थिति में न पहुँचे जहाँ debugging मुश्किल हो जाए
  • काम को लगातार छोटे हिस्सों में बाँटते रहें, और ज़रूरत पड़ने पर LLM की मदद से refactoring या module separation करें

समापन

• इस तरह project को तेज़ी से पूरा करके deployable version बना लेने पर, बीच में थोड़ा विराम लेने के बाद भी दोबारा शुरू करना बहुत आसान हो जाता है
• छोटे-छोटे रूप में पूरा करने की आदत momentum बनाए रखती है, और छोटी उपलब्धियों को जल्दी देखकर motivation भी मिलता है

[fbtmdxor]

अच्छी जानकारी के लिए धन्यवाद!

[ragingwind]

लगता है कोशिश करने के तरीके लगभग एक जैसे ही हैं।

[netcleaner]

हाल ही में मैंने भी ऊपर बताए गए तरीके से मिलती-जुलती विधि में Cursor और LLM का उपयोग करके एक छोटा प्रोजेक्ट बनाया, और प्रोडक्टिविटी बेहद अच्छी रही।
LLM से SPEC या PRD बनाकर उसे Cursor में context के रूप में शामिल किया, फिर cursorrules के जरिए इस्तेमाल होने वाली तकनीकों के नियम तय किए, और उसके बाद Composer के माध्यम से tasks एक-एक करके करवाए, तो code काफ़ी consistent तरीके से अच्छी तरह निकलकर आया।