AI-Native वेब डेवलपमेंट के लिए टेक-स्टैक
Claude Code जैसे AI agents सॉफ्टवेयर बनाने के आपके तरीके को बदल देते हैं। आप पहले से कहीं अधिक तेज़ी से काम कर सकते हैं। लेकिन तेज़ी से अव्यवस्थित (messy) कोड भी बन सकता है। विकास के लिए आपको अपने प्रोजेक्ट को सरल और बनाए रखने योग्य (maintainable) रखना होगा।
तेज़ी से निर्माण करने और आसानी से स्केल करने के लिए हम जिस स्टैक का उपयोग करते हैं, वह यहाँ दिया गया है।
AI एजेंट रणनीति ओवर-इंजीनियरिंग (overengineer) न करें। AI हजारों लाइनों का बेकार कोड जोड़ना आसान बना देता है।
- अपनी AGENTS.md या CLAUDE.md फाइलों को छोटा रखें।
- केवल वही प्रोजेक्ट नियम शामिल करें जिन्हें एजेंट अक्सर गलत कर देते हैं।
- विशिष्ट स्किल्स (skills) केवल तभी इंस्टॉल करें जब आपको उनकी आवश्यकता हो।
- कॉन्टेक्स्ट (context) को साफ रखने के लिए बातचीत खत्म होने पर स्किल्स हटा दें।
फ्रंटएंड और UI
- Next.js: App Router का उपयोग करें। यह बेहतर SEO और गति के लिए सर्वर-साइड रेंडरिंग (server-side rendering) को संभालता है।
- React: फीचर्स को तेज़ी से जोड़ने के लिए सबसे अच्छा इकोसिस्टम।
- MUI (Material UI): हम Figma में सब कुछ शुरू से डिज़ाइन करने से बचने के लिए इसका उपयोग करते हैं। यह महीनों का काम बचा लेता है।
- Zod और React Hook Form: जटिल फॉर्म और वैलिडेशन (validation) को संभालने के लिए सबसे अच्छा कॉम्बिनेशन।
बैकएंड और डेटा
- Firebase: हम इसका उपयोग ऑथेंटिकेशन (authentication), स्टोरेज और डेटाबेस (Firestore) के लिए करते हैं।
- Firestore Rules: यह एक ही फ़ाइल में सभी अनुमतियों (permissions) को संभालता है। यह बार-बार सुरक्षा कोड लिखने की आवश्यकता को समाप्त कर देता है।
- Firebase Functions: इनका उपयोग जटिल लॉजिक के लिए करें। अपने फ्रंटएंड को सरल (dumb) और बैकएंड को स्मार्ट रखें।
- Vercel AI SDK: अपने ऐप में विभिन्न AI मॉडल्स को एकीकृत (integrate) करने का सबसे आसान तरीका।
टेस्टिंग और डिप्लॉयमेंट
- Integration Tests: हम बैकएंड सर्विस लेयर का परीक्षण करने के लिए Jest का उपयोग करते हैं। हम छोटे यूनिट टेस्ट के बजाय इस बात पर ध्यान केंद्रित करते हैं कि विभिन्न हिस्से एक साथ कैसे काम करते हैं।
- TypeScript: सुरक्षित रिफैक्टरिंग (refactoring) के लिए यह आवश्यक है।
- Vercel: यह इंस्टेंट प्रोडक्शन और प्रीव्यू डिप्लॉयमेंट प्रदान करने के लिए GitHub से जुड़ता है।
- PostHog: एनालिटिक्स, सेशन रिप्ले और एरर लॉग के लिए इसका उपयोग करें।
- Resend और react-email: यह आपको React कंपोनेंट्स के रूप में ईमेल लिखने की अनुमति देता है।
इस संरचना वाला एक टेम्पलेट प्रोजेक्ट GitHub पर उपलब्ध है।
Source: https://dev.to/martinxpn/the-teach-stack-for-building-web-platforms-in-the-ai-native-era-45ka
Optional learning community: https://github.com/MartinXPN/nextjs-firebase-mui-starter