1. फुल स्टैक इनवॉइस प्रबंधन एप्लिकेशन का परिचय और आवश्यक टूल [0]

  1. यह वीडियो एक पूर्ण फुल स्टैक इनवॉइस प्रबंधन एप्लिकेशन बनाना सिखाएगा [0]।
  2. इस एप्लिकेशन में एक पूर्ण प्रमाणीकरण प्रणाली (authentication system) होगी [2]।
  3. आप Google या Apple जैसे सोशल लॉगिन का उपयोग करके लॉग इन कर सकते हैं [2]।
  4. एप्लिकेशन में इनवॉइस बनाने की पूर्ण कार्यक्षमता के साथ एक कार्यात्मक डेटाबेस होगा [4]।
    1. आप कस्टम जानकारी और आइटम जोड़कर इनवॉइस बना सकते हैं [5]।
    2. इनवॉइस बनने के बाद उसे डाउनलोड किया जा सकता है [6]।
    3. बनाए गए सभी इनवॉइस डेटाबेस में देखे जा सकते हैं [7]।
    4. बैकएंड में ग्राहकों की जानकारी भी डेटाबेस में मिल जाएगी [9]।
  5. डेटाबेस के लिए Neon.tech का उपयोग किया जाएगा [9]।
  6. आप परियोजना को GitHub पर अपलोड करना और Vercel पर डिप्लॉय करना सीखेंगे [10]।

1.1. Trae AI कोड एडिटर का उपयोग [11]

  1. इस ट्यूटोरियल में Trae AI का उपयोग किया जाएगा, न कि Cursor या Widsurf का [11]।
  2. Trae एक पूर्णतः मुफ्त AI कोड एडिटर है [11]।
  3. कई लोग सोचते हैं कि मुफ्त होने के कारण यह अच्छा नहीं होगा [12]।
  4. यह ट्यूटोरियल साबित करेगा कि Trae AI के साथ फुल-स्टैक एप्लिकेशन मुफ्त में विकसित किए जा सकते हैं [13]।
  5. यह वीडियो Trae AI द्वारा प्रायोजित नहीं है [14]।
  6. इसका उद्देश्य समुदाय को मुफ्त AI कोड एडिटर्स का उपयोग सिखाना है [15]।

2. परियोजना की आवश्यकताएँ और टेक्नोलॉजी स्टैक [20]

  1. डेवलपमेंट शुरू करने से पहले, एक आवश्यकता दस्तावेज़ (requirements document) बनाया गया [20]।
  2. यह दस्तावेज़ ChatGPT का उपयोग करके बनाया गया था [21]।
  3. ChatGPT को विचार समझाया गया: Next.js और Neon.tech का उपयोग करके एक इनवॉइस प्रबंधन ऐप बनाना [23]।
  4. ChatGPT ने मुख्य सुविधाओं और ऐप के कार्य करने के तरीके को सूचीबद्ध किया [25]।

2.1. टेक्नोलॉजी स्टैक का विवरण [27]

  1. फ्रंट एंड (Front End): React और Next.js का उपयोग किया जाएगा [28]।
  2. बैक एंड (Back End): Neon.tech को सर्वरलेस PostgreSQL डेटाबेस के रूप में उपयोग किया जाएगा [29]।
    1. Neon.tech का चुनाव इसलिए किया गया क्योंकि यह मुफ्त खाता और असीमित परियोजनाएँ बनाने की अनुमति देता है [30]।
    2. इसके विपरीत, Supabase मुफ्त में केवल एक परियोजना की अनुमति देता है, जिसके बाद प्रति परियोजना $10 का शुल्क लगता है [34]।
    3. Neon.tech का मुफ्त खाता शौक की परियोजनाओं (passion projects) के लिए पर्याप्त है [36]।
    4. पेड अपग्रेड ($90/माह) के साथ भी असीमित परियोजनाएँ मिलती हैं, लेकिन मासिक स्टोरेज 10 GB तक सीमित है [37]।
    5. Neon.tech मुफ्त में शुरू करने के लिए काफी अच्छा है [39]।
  3. प्रमाणीकरण (Authentication): Clerk का उपयोग किया जाएगा [40]।
    1. Clerk एक सीधा और सरल प्रमाणीकरण प्रणाली है, जिसमें कोई जटिलता नहीं है [41]।
    2. Clerk का उपयोग शुरू करने के लिए पूर्णतः मुफ्त है [44]।
    3. Google या GitHub प्रमाणीकरण को एकीकृत करने के लिए किसी गुप्त कुंजी या विवरण की आवश्यकता नहीं होती है [47]।
    4. प्रमाणीकरण प्रणाली बहुत सरल और निर्बाध (seamless) है [50]।
    5. इसमें सीधे 20 तक विभिन्न प्रमाणीकरण प्रणालियाँ (जैसे GitHub, Google, Apple, या फ़ोन नंबर) जोड़ी जा सकती हैं [52]।
  4. डिप्लॉयमेंट (Deployment): एप्लिकेशन को Vercel पर डिप्लॉय किया जाएगा [55]।
    1. Vercel पर डिप्लॉयमेंट शुरू करना पूर्णतः मुफ्त है [57]।
    2. Vercel वेब परियोजनाओं के निर्माण और डिप्लॉयमेंट के लिए टूल और क्लाउड इन्फ्रास्ट्रक्चर प्रदान करता है [60]।
    3. मुफ्त संस्करण का उपयोग किया जा सकता है [63]।
  5. वर्जन नियंत्रण (Version Control): GitHub का उपयोग किया जाएगा [64]।
    1. Vercel को GitHub से जोड़ा जाएगा, ताकि कोड में नए बदलावों को स्वचालित रूप से Vercel पर डिप्लॉय किया जा सके [65]।
    2. GitHub का उपयोग भी पूर्णतः मुफ्त है [66]।

3. Trae AI के साथ परियोजना सेटअप [70]

  1. सबसे पहले, Trae.ai से Trae AI कोड एडिटर डाउनलोड करें [70]।
  2. Trae विंडोज, मैक या लिनक्स के लिए उपलब्ध है [72]।
  3. Trae उपयोग करने के लिए बिल्कुल मुफ्त है और इसमें Claude 3.7 और Gemini Pro 2.5 जैसे मॉडल उपलब्ध हैं [74]।
  4. Trae को बैकअप के रूप में उपयोग किया जा रहा है क्योंकि Cursor Pro में बहुत क्रेडिट खपत होता है [76]।
  5. Trae डाउनलोड करने के बाद, Google से लॉग इन करके एक साधारण खाता बनाएं [80]।
  6. Trae खोलने पर, एक खाली फ़ोल्डर चुनें और उसमें Next.js परियोजना बनाएं [85]।
  7. Trae में एक अपडेट उपलब्ध था, इसलिए सुनिश्चित करने के लिए इसे नवीनतम संस्करण में अपडेट किया गया [94]।

3.1. Next.js परियोजना स्थापित करना [102]

  1. Next.js स्थापित करने और एक खाली Next.js परियोजना बनाने की प्रक्रिया शुरू करें [102]।
  2. Next.js दस्तावेज़ से कमांड कॉपी करें और पेस्ट करें [103]।
  3. परियोजना का नाम "Invoice Mgmt" रखा गया [111]।
  4. सेटअप के दौरान डिफ़ॉल्ट अनुशंसित सेटिंग्स का उपयोग किया गया:
    1. नवीनतम Next.js संस्करण (15.3.1) का उपयोग करें (Y) [107]।
    2. TypeScript का उपयोग करें (Yes) [114]।
    3. source डायरेक्टरी के अंदर कोड का उपयोग करें (Yes) [118]।
    4. App Router (Yes) [119]।
    5. TurboPack (Yes) [120]।
  5. निर्भरताएँ (dependencies) अब स्थापित हो रही हैं, और परियोजना फ़ाइलें बन गई हैं [124]।
  6. निर्भरताएँ node_modules फ़ोल्डर में स्थापित हो जाती हैं [126]।
  7. निर्भरताएँ स्थापित होने के बाद, परियोजना खुलने के लिए तैयार है [129]।
  8. भ्रम से बचने के लिए, सुनिश्चित करें कि Invoice-Mgmt फ़ोल्डर डिफ़ॉल्ट रूट डायरेक्टरी के रूप में खुला है [130]।

4. Trae AI एजेंट को संदर्भ और निर्देश प्रदान करना [138]

  1. Trae AI और इसके बिल्डर एजेंट को यह बताने की आवश्यकता है कि क्या बनाया जा रहा है [139]।
  2. इसके लिए, एक requirements.mmd फ़ाइल बनाई गई [141]।
  3. ChatGPT द्वारा बनाए गए आवश्यकताओं को इस फ़ाइल में कॉपी करके पेस्ट किया गया [143]।
  4. ऐसा करना इसलिए महत्वपूर्ण है क्योंकि इससे Trae AI और बिल्डर एजेंट को परियोजना की कार्यात्मकताओं की जानकारी मिलती है [144]।

4.1. बड़े भाषा मॉडल का चयन और दस्तावेज़ अनुक्रमण [145]

  1. बिल्डर अनुभाग में, वांछित बड़ा भाषा मॉडल (LLM) चुना जा सकता है [145]।
  2. उपलब्ध मॉडलों में Claude Sonnet 3.7/3.5, Gemini 2.5 Pro, और GPT-4 Turbo शामिल हैं [147]।
  3. कोडिंग के लिए, Claude Sonnet 3.7 और 3.5 सबसे अच्छे हैं [150]।
  4. चूँकि Trae मुफ़्त है, कभी-कभी भीड़ के कारण इंतज़ार करना पड़ सकता है, इसलिए मॉडल को स्विच करना पड़ सकता है [151]।
  5. यदि अन्य मॉडल व्यस्त हों, तो DeepSeek Coder हमेशा उपलब्ध रहता है [154]।
  6. अब Trae से आवश्यकताओं को समझने के लिए कहा गया [155]।
  7. इसके लिए, requirements.md फ़ाइल को टैग किया गया [158]।
  8. पहला प्रॉम्प्ट दिया गया: "Developing invoice management app, please understand the requirements first. Do not start writing code yet, just understand the requirements." [161]।
  9. Claude Sonnet 3.5 का उपयोग किया गया [163]।
  10. Trae ने संदर्भ और आवश्यकताओं को समझ लिया [165]।
  11. Clerk दस्तावेज़ अनुक्रमण (Indexing):
    1. Clerk दस्तावेज़ों को Trae के अंदर अनुक्रमित (index) किया जा सकता है [187]।
    2. Context > Documentation में जाकर Clerk दस्तावेज़ों का URL जोड़ें [189]।
    3. इससे Trae को Clerk एकीकरण के बारे में बेहतर परिप्रेक्ष्य मिलेगा [197]।
    4. अनुक्रमण पृष्ठभूमि में जारी रहेगा [201]।
  12. अन्य दस्तावेज़ अनुक्रमण (Best Practice):
    1. Tailwind CSS और Next.js दस्तावेज़ों को भी जोड़ना सर्वोत्तम अभ्यास है [207]।
    2. इससे Trae को कोडिंग करते समय इन फ्रेमवर्क के बारे में जानकारी होती है और त्रुटियाँ कम होती हैं [213]।
    3. हालाँकि Trae इंटरनेट से जुड़ा है, यह सर्वोत्तम अभ्यास है [218]।

5. Clerk प्रमाणीकरण प्रणाली का एकीकरण और त्रुटि निवारण [171]

  1. अगला कदम एक बुनियादी प्रमाणीकरण प्रणाली बनाना है [171]।
  2. इसके लिए Clerk.com पर जाकर Google से लॉग इन करें [172]।
  3. "Create application" पर क्लिक करें और वांछित लॉगिन विकल्प चुनें (जैसे Facebook, Apple, LinkedIn) [174]।
  4. एप्लिकेशन का नाम "invoice management" रखा गया [176]।
  5. Clerk अब पर्यावरण चर (environment variables) और नमूना कोड प्रदान करता है [180]।

5.1. Clerk का उपयोग करके लॉगिन प्रणाली बनाना [221]

  1. Clerk कॉन्फ़िगरेशन विवरण कॉपी करें [223]।
  2. Trae में प्रॉम्प्ट दें: "Please create an authentication system using Clerk. Here are the complete details for that." [224]।
  3. पर्यावरण चर को अलग से प्रदान किया गया, ताकि Trae .env फ़ाइल बना सके [227]।
  4. अधिक संदर्भ के लिए, लॉगिन और साइन-अप पृष्ठों को एक सभ्य डिज़ाइन के साथ बनाने के लिए कहा गया [230]।
  5. बिल्डर ने कोड लिखना शुरू कर दिया [233]।
  6. बिल्डर ने .env फ़ाइल बनाई, जिसमें Clerk कुंजी संग्रहीत की गई [236]।
  7. Clerk के लिए आवश्यक npm पैकेज स्थापित किया जा रहा है [239]।
  8. प्रदर्शन अभी तक अच्छा है, खासकर क्योंकि यह मुफ्त है; Claude Sonnet 3.5 का उपयोग किया जा रहा है [242]।
  9. कोड लिखना पूरा हो गया [249]।

5.2. परियोजना चलाना और त्रुटियों को ठीक करना [250]

  1. परियोजना चलाने के लिए npm run dev कमांड का उपयोग करें [254]।
  2. परियोजना को localhost पर खोलें [255]।
  3. एक त्रुटि दिखाई दी, जिसे बिल्डर को कॉपी करके ठीक करने के लिए कहा गया [258]।
  4. AI द्वारा सब कुछ किया जा रहा है; इसे "true vibe coding" कहा जाता है [266]।
  5. बिल्डर ने त्रुटि ठीक करना शुरू किया; "accept all" पर क्लिक करें [269]।
  6. app/dashboard में एक और TypeScript त्रुटि थी, जिसे ठीक करने के लिए कहा गया [270]।
  7. टर्मिनल पर जाकर, फिर से npm run dev चलाएँ [274]।
  8. राउटिंग त्रुटि भी ठीक हो गई है, और परियोजना अब चल रही है [282]।
  9. डिफ़ॉल्ट Next.js पृष्ठ पर लॉगिन और साइन-अप बटन दिखाई देते हैं [283]।
  10. साइन-अप पर क्लिक करने पर, Clerk साइन-अप पॉप-अप हुआ [284]।
  11. Google से लॉगिन सफल रहा, और यह आइकन पुनर्प्राप्त करता है [285]।
  12. Clerk द्वारा आयातित खाते को प्रबंधित करने की सभी कार्यक्षमताएँ उपलब्ध हैं [290]।
  13. लॉगिन अब सफलतापूर्वक काम कर रहा है [295]।

6. डैशबोर्ड इंटरफ़ेस और इनवॉइस निर्माण कार्यक्षमता का विकास [296]

  1. लॉगिन के तुरंत बाद एक डैशबोर्ड खुलना चाहिए [296]।
  2. बिल्डर से एक डैशबोर्ड बनाने के लिए कहा गया (/dashboard डायरेक्टरी पर) [298]।
  3. यह डैशबोर्ड केवल तभी एक्सेस होना चाहिए जब उपयोगकर्ता लॉग इन हो [302]।
  4. बिल्डर को आवश्यकताओं (requirements.md) के माध्यम से डैशबोर्ड के विभिन्न मॉड्यूल को समझने के लिए कहा गया [300]।
  5. बिल्डर अब डैशबोर्ड बनाना शुरू कर देगा [305]।
  6. डैशबोर्ड डायरेक्टरी (app/dashboard/page.tsx) और लेआउट बनाए गए [310]।
  7. layout.tsx में Clerk आयात (import) की एक TypeScript त्रुटि थी [315]।
  8. यह त्रुटि बिल्डर को दी गई और उसे ठीक करने के लिए कहा गया [317]।
  9. बिल्डर का उपयोग कर्सर की तरह ही किया जा सकता है, और सबसे अच्छी बात है कि कोई क्रेडिट सीमा नहीं है [322]।
  10. त्रुटि ठीक होने के बाद, ऐप खोला गया और डैशबोर्ड डायरेक्टरी पर जाने के लिए कहा गया [329]।
  11. एक बहुत ही बुनियादी डैशबोर्ड डायरेक्टरी बनाई गई [331]।

6.1. डैशबोर्ड डिज़ाइन और इनवॉइस कार्यक्षमता को बढ़ाना [335]

  1. बिल्डर से डैशबोर्ड के डिज़ाइन को बेहतर बनाने और इनवॉइस बनाने की कार्यक्षमता जोड़ने के लिए कहा गया [335]।
  2. प्रॉम्प्ट में कहा गया कि इनवॉइस को प्रबंधित करने के विकल्प होने चाहिए [336]।
  3. उपयोगकर्ताओं को इनवॉइस बनाने और PDF फ़ाइल के रूप में डाउनलोड करने में सक्षम होना चाहिए [337]।
  4. बिल्डर ने इनवॉइस बनाने का घटक (component) बनाया [342]।
  5. कुछ त्रुटियाँ उत्पन्न हुईं, और उन्हें ठीक करने के लिए कहा गया [343]।
  6. "Too many requests" त्रुटि आई, और कतार स्थिति 77 थी [344]।
  7. इस स्थिति से निपटने के लिए, GPT-4.1 पर स्विच करने का प्रयास किया गया, लेकिन यह अभी भी कतार में था [346]।
  8. फिर Gemini Pro 2.5 पर स्विच करने का प्रयास किया गया, जो भी कतार (71) में था [355]।
  9. अंत में, Deepseek version 3 का उपयोग किया गया, जो उपलब्ध था [359]।

7. Deepseek 3 का उपयोग करके विकास जारी रखना और वैकल्पिक मॉडल समाधान [363]

  1. Deepseek version 3 अब सफलतापूर्वक उपयोग किया जा सकता है [362]।
  2. मॉडल उपलब्ध न होने पर समाधान:
    1. कस्टम मॉडल कार्यक्षमता का उपयोग किया जा सकता है [365]।
    2. Open Router का उपयोग किया जा सकता है [366]।
    3. Open Router पर Google खाते से साइन अप करें [367]।
    4. वहाँ कई मुफ्त मॉडल उपलब्ध हैं, जैसे Gemini Pro 2.5 Preview या Flash [369]।
    5. Open Router से एक API कुंजी बनाकर Trae में प्रदान की जा सकती है [373]।
    6. Gemini Pro 2.5 जैसे मुफ्त मॉडल का उपयोग करने के लिए किसी कार्ड की आवश्यकता नहीं होती है [379]।
  3. Deepseek version 3 ने समस्याएँ ठीक कर दी हैं [383]।
  4. परियोजना को दोबारा चलाया गया (npm run dev) [385]।

7.1. इनवॉइस निर्माण और प्रारंभिक समस्याएँ [388]

  1. परियोजना लोड हुई और कोई त्रुटि नहीं थी [388]।
  2. इनवॉइस विकल्प पर क्लिक किया गया और "create an invoice" चुना गया [391]।
  3. क्लाइंट का नाम, ईमेल, और आइटमों की सूची और कीमत जोड़ी गई [394]।
  4. इनवॉइस बन गया, लेकिन यह प्रदर्शित नहीं हो रहा था [399]।
  5. कुछ नमूना इनवॉइस (paid/pending) दिख रहे थे [403]।
  6. डाउनलोड विकल्प काम नहीं कर रहा था [405]।
  7. इन समस्याओं को ठीक करने के लिए बिल्डर से कहा गया कि बनाए गए इनवॉइस को "created invoices" अनुभाग में दिखाना चाहिए [408]।
  8. DeepSeek R 3.5 का उपयोग करने का प्रयास किया गया, लेकिन यह व्यस्त था [410]।
  9. फिर से Deepseek version 3 पर स्विच किया गया, जो काम कर रहा था [415]।
  10. Deepseek version 3 का प्रदर्शन और कोड की गुणवत्ता मुफ्त उपयोग के लिए काफी अच्छी है [417]।
  11. सभी त्रुटियाँ ठीक हो गईं [423]।
  12. एक नया क्लाइंट जोड़ा जा सकता है (नाम, फ़ोन नंबर, ईमेल, कंपनी का नाम) [424]।
  13. नया इनवॉइस बनाते समय अभी भी एक त्रुटि थी, जिसे बाद में ठीक करने का निर्णय लिया गया [427]।

8. Neon.tech डेटाबेस का एकीकरण [428]

  1. अब Neon.tech को एकीकृत करने का समय है [428]।
  2. neon.tech पर जाएँ और साइन अप करें; इसके लिए बिलिंग विवरण की आवश्यकता नहीं है [430]।
  3. परियोजना का नाम "invoice management" रखा गया, AWS चुना गया, और "create" पर क्लिक किया गया [435]।
  4. परियोजना बनने के बाद, "connect" पर क्लिक करें [437]।
  5. कनेक्शन स्ट्रिंग (connection string) को कॉपी करें, जिसके लिए पासवर्ड दिखाना आवश्यक है [438]।
  6. इस कनेक्शन स्ट्रिंग को बिल्डर को प्रदान किया जाएगा [442]।
  7. Trae को संदर्भ दिया गया: "Now, I want to integrate neon.tech. I want to store the data related to invoices and customers in Neon database." [444]।
  8. Neon.tech दस्तावेज़ अनुक्रमण:
    1. Neon.tech Next.js दस्तावेज़ों का URL कॉपी करें [448]।
    2. Context > Documentation में URL जोड़ें और इसे Neon Next.js docs नाम दें [451]।
    3. यह Neon से संबंधित सभी दस्तावेज़ों को अनुक्रमित करना शुरू कर देगा [457]।
  9. Trae प्रॉम्प्ट में, दस्तावेज़ की समीक्षा करने के लिए कहा गया और Neon.tech दस्तावेज़ को टैग किया गया [459]।
  10. अब Trae को कोड लिखना शुरू कर देना चाहिए [461]।

9. डेटाबेस एकीकरण का परीक्षण और परियोजना का डिप्लॉयमेंट [463]

  1. Neon.tech डेटाबेस को एकीकृत करने के लिए आवश्यक सभी कोड फ़ाइलें बन गईं [463]।
  2. परियोजना का परीक्षण शुरू किया गया [465]।
  3. परियोजना को चलाया गया और डैशबोर्ड पर क्लिक किया गया [467]।
  4. "invoices" और फिर "create" पर क्लिक किया गया [473]।
  5. "create invoice" पर क्लिक करने पर कुछ नहीं हुआ, और एक त्रुटि थी [474]।
  6. त्रुटि को ठीक किया गया [477]।
  7. अब इनवॉइस बनाने में असमर्थता थी, इसलिए कोड को अपडेट करने के लिए कहा गया [482]।
  8. सभी त्रुटियाँ ठीक हो गईं, और वीडियो को रोककर एक इनवॉइस बनाया गया था [484]।
  9. एक नया क्लाइंट ईमेल (info@gmail.com) और कीमत के साथ एक और इनवॉइस बनाया गया [487]।
  10. अब इनवॉइस सूची में दिखाई दे रहे थे (इनवॉइस 1 और इनवॉइस 2) [490]।
  11. डाउनलोड विकल्प भी काम कर रहा था [492]।

9.1. Neon.tech में डेटा सत्यापन [493]

  1. रुचिकर बात यह है कि Neon.tech डेटाबेस के अंदर जाकर तालिकाओं (tables) में इनवॉइस को देखा जा सकता है [493]।
  2. दोनों इनवॉइस दिखाई दे रहे थे, साथ ही उनकी स्थिति (status) और निर्माण का सटीक समय भी [495]।
  3. ग्राहकों की सूची भी स्वचालित रूप से मिल गई थी (पहला रैंडम ग्राहक और दूसरा Xan) [496]।
  4. इनवॉइस के आइटम, दर, राशि और मात्रा को बैकएंड में एक्सेस किया जा सकता था [500]।
  5. इसका मतलब है कि ऐप कार्यात्मक है और सब कुछ ठीक काम कर रहा है [503]।

9.2. GitHub पर अपलोड और Vercel पर डिप्लॉयमेंट [505]

  1. परियोजना को डिप्लॉय करने के लिए, सबसे पहले इसे GitHub पर अपलोड करें [505]।
  2. GitHub पर एक नई रिपॉजिटरी बनाएं, जिसका नाम "invo" रखा गया [506]।
  3. रिपॉजिटरी को सार्वजनिक रखा गया ताकि इसे साझा किया जा सके [510]।
  4. रिपॉजिटरी बनने के बाद, Trae टर्मिनल में Git कमांड चलाएँ:
    1. git init [516]
    2. git remote add origin [repository URL] [518]
    3. git add . [521]
    4. git commit -m "first commit" [524]
    5. git push origin master (ब्रांच मास्टर थी, मेन नहीं) [526]
  5. परियोजना अब Git पर अपलोड हो गई है, और स्रोत कोड GitHub पर उपलब्ध है [530]।
  6. Vercel पर डिप्लॉयमेंट:
    1. vercel.com पर साइन अप करें [533]।
    2. "add new" > "add a project" पर क्लिक करें [533]।
    3. GitHub से "invoice" परियोजना चुनें और "import" पर क्लिक करें [534]।
    4. परियोजना को डिप्लॉय करें [535]।
  7. Vercel स्रोत कोड को एक्सेस करेगा और डिप्लॉयमेंट चलाएगा, जिसके बाद एक सार्वजनिक URL मिलेगा [537]।
  8. यदि डिप्लॉयमेंट के दौरान कोई समस्या आती है, तो Trae से उन्हें ठीक करने के लिए कहा जा सकता है [539]।