Sébastien TIMONER
वेब विकास और तकनीकी टीम प्रबंधन में विशेषज्ञ, मैं प्रभावी डिजिटल समाधानों के निर्माण और अनुकूलन में विशेषज्ञता रखता हूं। React.js, Node.js, TypeScript, Symfony और IoT के लिए Zephyr OS जैसी आधुनिक तकनीकों की गहरी समझ के साथ, मैं offroadLabs में विभिन्न क्षेत्रों की कंपनियों के लिए जटिल SaaS और IoT परियोजनाओं की सफलता सुनिश्चित करता हूं, डिजाइन से लेकर प्रोडक्शन तक।
offroadLabs में, मैं तकनीकी विशेषज्ञता और सहयोगात्मक दृष्टिकोण को जोड़ते हुए कस्टम विकास सेवाएं प्रदान करता हूं। चाहे एक नवीन SaaS समाधान बनाना हो, Zephyr OS के साथ IoT सिस्टम विकसित करना हो, मौजूदा एप्लिकेशन को आधुनिक बनाना हो, या एक टीम के कौशल विकास में सहायता करना हो, मैं प्रत्येक परियोजना की विशिष्ट आवश्यकताओं के अनुरूप मजबूत और प्रभावी समाधान प्रदान करने के लिए प्रतिबद्ध हूं।
मैं ऐक्स-एन-प्रोवेंस के आसपास या पूर्ण रिमोट असाइनमेंट के लिए उपलब्ध हूं।
एक आधुनिक वेब एप्लिकेशन को कैसे संरचित किया जाए? यह कैसे सुनिश्चित किया जाए कि यह समय के साथ रखरखाव योग्य रहे? इस गाइड में, हम हेक्सागोनल आर्किटेक्चर और मजबूत फॉर्म वैलिडेशन का उपयोग करके एक Next.js एप्लिकेशन बनाएंगे। सीखने को और मजेदार बनाने के लिए, हम एक जेडाई अकादमी पंजीकरण सिस्टम बनाएंगे!
सोर्स कोड GitHub पर उपलब्ध है।
हेक्सागोनल आर्किटेक्चर, जिसे "पोर्ट्स एंड एडाप्टर्स" भी कहा जाता है, एक आर्किटेक्चरल पैटर्न है जो ऐसे एप्लिकेशन बनाने की अनुमति देता है जहां बिजनेस कंपोनेंट्स हैं:
आर्किटेक्चर तीन मुख्य परतों में विभाजित है:
[सामग्री जारी है...]
bash
प्रोजेक्ट बनाते समय, निम्नलिखित प्रश्नों का उत्तर दें:
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/*)? Yes
Using Next.js version 15.0.0+ with Turbopack
प्रोजेक्ट बनने के बाद, डिपेंडेंसी इंस्टॉल करें:
bash
shadcn/ui को इनिशियलाइज़ करते समय, निम्नलिखित प्रश्नों का उत्तर दें:
Would you like to use TypeScript (recommended)? Yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › src/app/globals.css
Would you like to use CSS variables for colors? › Yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › Yes
# आवश्यक कंपोनेंट्स इंस्टॉल करें
npx shadcn@latest add form input select textarea button card toast table
bash
src/
├── app/
│ ├── actions/
│ │ └── register-padawan.ts
│ ├── components/
│ │ ├── ui/ # shadcn/ui कंपोनेंट्स
│ │ ├── jedi-form.tsx
│ │ └── padawan-list.tsx
│ ├── lib/
│ │ └── utils.ts # shadcn/ui उपयोगिताएं
│ └── page.tsx
├── core/
│ ├── domain/
│ │ ├── models/
│ │ │ └── padawan.ts
│ │ ├── ports/
│ │ │ └── padawan-repository.ts
│ │ ├── services/
│ │ │ └── padawan-eligibility.ts
│ │ ├── validation/
│ │ │ └── padawan-schema.ts
│ │ └── events/
│ │ └── padawan-registered.ts
│ └── usecases/
│ └── register-padawan.ts
└── infrastructure/
└── db/
├── prisma/
│ ├── migrations/
│ └── schema.prisma
├── prisma.ts
└── repositories/
└── prisma-padawan-repository.ts
यह संरचना एक स्पष्ट हेक्सागोनल आर्किटेक्चर का पालन करती है:
app/
- Next.js यूजर इंटरफेस लेयरactions/
- फॉर्म हैंडलिंग के लिए सर्वर एक्शन्सcomponents/
- UI/बिजनेस सेपरेशन के साथ React कंपोनेंट्सlib/
- शेयर्ड उपयोगिताएंcore/
- शुद्ध बिजनेस लॉजिकdomain/
- मॉडल्स, पोर्ट्स और बिजनेस सर्विसेजusecases/
- एप्लिकेशन यूज केसेजinfrastructure/
- तकनीकी कार्यान्वयनdb/
- प्रिज़्मा कॉन्फिगरेशन और रिपॉजिटरी कार्यान्वयनडोमेन हमारे एप्लिकेशन का हृदय है। यहीं हम बिजनेस नियमों को किसी भी तकनीकी विचार से स्वतंत्र रूप से कोड में बदलते हैं। हमारे मामले में, डोमेन जेडाई अकादमी में पंजीकरण को नियंत्रित करने वाले सभी नियमों का प्रतिनिधित्व करता है।
मॉडल्स मौलिक बिजनेस अवधारणाओं का प्रतिनिधित्व करते हैं।
typescript
इवेंट्स डोमेन में घटित महत्वपूर्ण तथ्यों का प्रतिनिधित्व करते हैं।
typescript
पोर्ट्स परिभाषित करते हैं कि डोमेन बाहरी दुनिया के साथ कैसे संवाद करता है।
typescript
डोमेन सर्विसेज बिजनेस लॉजिक को एनकैप्सुलेट करती हैं जो स्वाभाविक रूप से एक एंटिटी में फिट नहीं होती।
typescript
यूज केसेज एक बिजनेस कार्यक्षमता को प्राप्त करने के लिए विभिन्न डोमेन तत्वों के बीच इंटरैक्शन को व्यवस्थित करते हैं।
typescript
इन्फ्रास्ट्रक्चर बाहरी दुनिया के साथ इंटरैक्ट करने के लिए डोमेन में परिभाषित पोर्ट्स को लागू करता है।
prisma
typescript
इनपुट डेटा वैलिडेशन हमारे डोमेन के साथ संगतता सुनिश्चित करने के लिए Zod का उपयोग करता है।
typescript
अब हम डेटाबेस जनरेट कर सकते हैं।
bash
आगे की खोज के लिए, प्रिज़्मा डेटाबेस को विज़ुअलाइज़ करने के लिए एक क्लाइंट प्रदान करता है।
bash
typescript
typescript
typescript
ये कंपोनेंट्स एक आधुनिक और सुलभ यूजर इंटरफेस बनाने के लिए shadcn/ui का उपयोग करते हैं, जिसमें शामिल हैं:
सब कुछ हमारे हेक्सागोनल आर्किटेक्चर में बिजनेस लॉजिक के बिना प्रेजेंटेशन लेयर पर रहते हुए पूरी तरह से एकीकृत होता है।
typescript
typescript
हेक्सागोनल आर्किटेक्चर ने हमें एक ऐसा एप्लिकेशन बनाने की अनुमति दी है जो है:
आगे बढ़ने के लिए, आप कर सकते हैं:
याद रखें: अच्छी आर्किटेक्चर फोर्स की तरह है - इसे संतुलन में होना चाहिए! 🌟
[अनुवाद समाप्त]