- 2025 के लिए Full-Stack React Tech Stack
- SaaS प्रोडक्ट या न्यूनतम व्यवहार्य उत्पाद (MVP) विकसित करने में उपयोगी तकनीकों का परिचय
- Next.js: React-आधारित framework, जो routing, caching जैसी कई सुविधाएँ डिफ़ॉल्ट रूप से देता है, और server components तथा server functions जैसी नवीनतम React सुविधाओं के ज़रिए backend से कनेक्शन को सपोर्ट करता है
- Astro: प्रोडक्ट के landing page बनाने के लिए एक वैकल्पिक टूल, जिसका उपयोग तेज़ landing page निर्माण और बेहतर developer experience के लिए किया जाता है
- Server Components: ऐसे components जो server पर चलते हैं और database access जैसी चीज़ें संभव बनाते हैं; ये full-stack React application बनाने के तरीके में बड़ा बदलाव लाते हैं
- Server Functions: ऐसी सुविधा जो React components से सिर्फ function call के ज़रिए server-side code चलाने देती है, और API endpoints अपने आप बनाती है
- Server Actions: server functions का एक subset; उपयोगिता बढ़ाने के लिए libraries मौजूद हैं, लेकिन इसे सीधे implement करना भी संभव है
- Tailwind CSS: तेज़ प्रोडक्ट development और लंबे समय तक CSS maintenance के लिए सुझाया गया टूल; एक बार इसकी आदत हो जाए तो पारंपरिक CSS तरीके पर लौटना मुश्किल लगता है
- Shadcn UI: Tailwind CSS के साथ सहज रूप से integrate होने वाली UI library, जो version-less system देकर UI management के लिए एक नया दृष्टिकोण पेश करती है
- Lucide React: Shadcn UI के साथ उपयोग की जाने वाली icon library, जिसे तब तक बदलने की ज़रूरत कम है जब तक कोई बेहतर विकल्प सामने न आए
- TypeScript: JavaScript projects के लिए industry standard, जो developer experience बेहतर करता है, bugs कम करता है, और code maintainability बढ़ाता है
- Zod: TypeScript के साथ अच्छी तरह काम करने वाली validation library, जिसका उपयोग मुख्य रूप से server-side validation में होता है; client-side forms में complexity कम करने के लिए native HTML validation का उपयोग किया जाता है
- nuqs: Next.js में URL state (जैसे search, sorting, pagination) को type-safe तरीके से manage करने का टूल; दूसरे frameworks में built-in features या अन्य libraries का उपयोग किया जा सकता है
- Zustand: client-side state management के लिए एक वैकल्पिक टूल, जिसका उपयोग URL state, client-side data caching, और server-driven React applications के विकास के कारण कम हुआ है
- React Query: infinite scroll जैसी जटिल client-side data fetching के लिए उपयोग होने वाला वैकल्पिक टूल; अगर project complexity कम हो तो सिर्फ server components भी काफ़ी हो सकते हैं
- Prisma (ORM): एक स्थिर ORM विकल्प; नवीनतम ट्रेंड के अनुसार इसे Drizzle से बदला जा सकता है, लेकिन फिलहाल Prisma को प्राथमिकता दी जाती है
- Supabase (database): Postgres database देने वाली service; लचीलापन बनाए रखने के लिए केवल database का उपयोग किया जाता है और Prisma से कनेक्ट किया जाता है, ताकि ज़रूरत पड़ने पर दूसरे database में बदलना आसान रहे
- Lucia (authentication): अब maintenance में नहीं है, लेकिन Oslo, Argon2, Arctic आदि का उपयोग करके authentication system बनाना सीखने के लिए उपयोगी संसाधन है, जिससे third-party solutions पर निर्भर हुए बिना custom authentication system बनाया जा सकता है
- S3 (file upload): AWS S3, presigned URL, और AWS IAM का उपयोग करके लचीला और कम-खर्च file storage solution बनाया जा सकता है; ज़्यादातर third-party services भी यही API इस्तेमाल करती हैं, इसलिए ज़रूरत पड़ने पर provider बदलना आसान होता है
- Inngest (queue): backend में जटिल कार्यों के orchestration के लिए उपयोग होने वाला टूल, जो time-sensitive न होने वाले background tasks के लिए उपयुक्त है, और आसान setup व maintenance वाला queue system देता है
- React Email + Resend: पहला React components के ज़रिए email templates बनाने देता है, जबकि दूसरा email भेजने के लिए बेहतरीन solution है; पहले उपयोग किए गए Postmark से Resend पर स्विच करके संतोषजनक परिणाम मिले
- Vercel (hosting): कई वर्षों से उपयोग किया जा रहा full-stack application hosting solution; अगर self-hosting चाहिए तो Hetzner/DigitalOcean और Coolify की सिफारिश की जाती है
- CloudFlare (domain): domain management के कई अनुभवों के बाद, अब CloudFlare का उपयोग इसकी बेहतरीन UI और DNS records में अतिरिक्त जानकारी जोड़ने की सुविधा के कारण संतोषपूर्वक किया जा रहा है
- Stripe (payment gateway): कई वर्षों से उपयोग किया जा रहा payment gateway, जो बेहतरीन documentation और API देता है, लेकिन features और API scope बढ़ने के साथ जटिल हो सकता है
- Testing और tools: React Testing Library और Cypress/Playwright का संयोजन एक अच्छा विकल्प है, और ESLint (भविष्य में Biome) तथा Prettier की सिफारिश की जाती है। UI documentation के लिए अब भी Storybook का उपयोग होता है, और terminal में TypeScript चलाने के लिए tsx का उपयोग किया जाता है
1 टिप्पणियां
nuqs के बारे में जान लिया, धन्यवाद।