FuelBuddy के UAE विस्तार को क्षेत्रीय ऑपरेशनल ज़रूरतों के हिसाब से बनाया गया एक समर्पित फ्रैंचाइज़ एप्लिकेशन चाहिए था। मैंने Dubai Franchise Application को फ्रंटएंड और डेटा API दोनों में शून्य से बनाया।
मैंने क्या बनाया
- शून्य से नया फ्रंटएंड: कंपोनेंट सिस्टम और एप्लिकेशन स्ट्रक्चर को शून्य से बनाया, फ्रैंचाइज़ ऑपरेशन के लिए एक साफ-सुथरा और रेस्पॉन्सिव इंटरफेस दिया।
- Hasura GraphQL API: Hasura GraphQL इंजन पर बैकएंड डेटा लेयर बनाई, एप्लिकेशन को चाहिए CRUD ऑपरेशन और डेटा मॉडल को परिभाषित करते हुए।
- मैप, शेड्यूलिंग, और एक्सपोर्ट: लाइव मैप, एक कैलेंडर/Gantt शेड्यूलिंग व्यू, और फ्रैंचाइज़ रिपोर्टिंग के लिए स्प्रेडशीट/PDF एक्सपोर्ट इंटीग्रेट किया।
- ऑथेंटिकेशन और सुरक्षा: Firebase-आधारित ऑथेंटिकेशन कॉन्फ़िगर किया, Hasura के अपने JWT क्लेम्स के ज़रिए लागू होने वाले रोल-आधारित एक्सेस के साथ।
यह क्यों मायने रखता था
एक समर्पित प्लेटफॉर्म देने से FuelBuddy के UAE फ्रैंचाइज़ ऑपरेटरों को क्षेत्रीय ऑपरेशन के लिए एक खासतौर पर बना टूल मिला, एक ऐसे स्टैक पर जो रियल-टाइम मैप डेटा और भारी रिपोर्टिंग के लिए बनाया गया है।
डेटा लेयर
यह ऐप एक टाइप किए गए, codegen से बने SDK के खिलाफ graphql-request के ज़रिए फेच करता है, क्लाइंट स्टेट रखने वाले Pinia स्टोर के साथ, डिपेंडेंसी ट्री में कहीं भी TanStack Query नहीं है। Auth Firebase पर चलता है, और रोल-आधारित एक्सेस एक अलग से बने परमिशन सिस्टम के बजाय Hasura के अपने JWT कस्टम क्लेम्स (x-hasura-default-role, x-hasura-user-id) से आता है।
सिर्फ़ एक फ़ॉर्म बिल्डर से कहीं ज़्यादा
जो एक हल्का CRUD टूल हो सकता था, यह उसके लिए एक सचमुच फीचर-भारी ऐप है: मैप पर सीधे फ्रैंचाइज़ ज़ोन बनाने और एडिट करने के लिए Mapbox GL के साथ mapbox-gl-draw, Gantt-स्टाइल शेड्यूलिंग के लिए vue-ganttastic के साथ FullCalendar, रिपोर्टिंग डैशबोर्ड के लिए Chart.js, और एक पूरा एक्सपोर्ट पाइपलाइन (xlsx, papaparse, jszip, html2pdf.js, dom-to-image, html-to-image) ताकि फ्रैंचाइज़ रिपोर्ट स्प्रेडशीट, PDF, या इमेज के रूप में ऐप से बाहर जाएं, ऑपरेटर की ज़रूरत के हिसाब से, कोई एक तय फॉर्मैट नहीं।
Codegen, हाथ से लिखी क्वेरी नहीं
GraphQL ऑपरेशन बिल्ड टाइम पर codegen.yml के खिलाफ vite-plugin-graphql-codegen के ज़रिए जनरेट होते हैं, Hasura स्कीमा से एक टाइप किया गया src/sdk.ts क्लाइंट बनाते हुए। हर क्वेरी और म्यूटेशन लाइव स्कीमा के खिलाफ टाइप किया गया है, हाथ से लिखी उन स्ट्रिंग्स के बजाय जो बैकएंड बदलने पर चुपचाप बहक जाती हैं।
टेस्टिंग का फोकस
Playwright दो फ्लो को एंड-टू-एंड कवर करता है: लॉगिन और ऑर्डर मैनेजमेंट, वह गेट जिसके पीछे बाकी हर स्क्रीन बैठी है और वह मुख्य ट्रांज़ैक्शन जिसे संभालने के लिए यह ऐप बना है। इन दोनों के बाद आने वाला सब कुछ (शेड्यूलिंग, एक्सपोर्ट, रिपोर्टिंग) टेस्ट से नया सरफेस एरिया है, कोई चूक नहीं।
Stack
Vue 3, Vite, Pinia, Hasura के खिलाफ GraphQL Code Generator के साथ graphql-request, auth के लिए Firebase, mapbox-gl-draw के साथ Mapbox GL, vue-ganttastic के साथ FullCalendar, रिपोर्टिंग के लिए Chart.js, टेस्ट के लिए Playwright।