FuelBuddy के UAE B2B बाज़ार में विस्तार के लिए एक समर्पित वेब पोर्टल की ज़रूरत थी। कॉर्पोरेट ग्राहकों को रिटेल कंज़्यूमर फ्लो के बजाय फ्लीट मैनेजमेंट, बल्क ऑर्डरिंग, और मल्टी-लोकेशन डिलीवरी शेड्यूलिंग चाहिए थी। मैंने इस पोर्टल को शुरुआती रिपॉज़िटरी से लेकर प्रोडक्शन तक बनाया, फ्रंटएंड आर्किटेक्चर और बैकएंड डेटा API दोनों को कवर करते हुए।
मैंने क्या बनाया
- फ्रंटएंड आर्किटेक्चर: एप्लिकेशन को शून्य से सेटअप किया, कंपोनेंट आर्किटेक्चर, क्लाइंट-साइड राउटिंग, और कॉर्पोरेट वर्कफ्लो के लिए एक सुसंगत डिज़ाइन सिस्टम सहित।
- B2B वर्कफ्लो: मल्टी-स्टेप ऑर्डर फॉर्म, बल्क-फ्यूल शेड्यूलिंग फ्लो, और ऑर्डर व वॉलेट हिस्ट्री के लिए चार्ट व टेबल व्यू वाले डेटा-सघन फ्लीट डैशबोर्ड बनाए।
- पेमेंट और ऑनबोर्डिंग: वॉलेट टॉप-अप और ऑर्डर पेमेंट के लिए Stripe इंटीग्रेट किया, और कॉर्पोरेट अकाउंट के लिए फोन-आधारित OTP रजिस्ट्रेशन बनाया।
- एंड-टू-एंड फीचर: Hasura GraphQL इंजन पर CRUD API बनाए, उन्हें UI स्टेट से जोड़ा, ऐप को एक इंस्टॉल करने योग्य PWA के रूप में शिप किया, और प्रोडक्शन तक बिज़नेस वैलिडेशन नियम संभाले।
यह क्यों मायने रखता था
पोर्टल को शिप करने से FuelBuddy को दुबई में कॉर्पोरेट ग्राहकों के लिए एक समर्पित वेब प्लेटफॉर्म मिला, जिसने बल्क फ्यूल ऑर्डर को सुव्यवस्थित किया और कंपनी के क्षेत्रीय बिज़नेस विस्तार को सहारा दिया।
जो असल में शिप हुआ
बल्क ऑर्डरिंग और बल्क शिफ्ट-शेड्यूलिंग Hasura के खिलाफ असली, काम करने वाले म्यूटेशन हैं, कोई प्लेसहोल्डर फॉर्म नहीं, साथ ही एक डैशबोर्ड जिसने एक पुराने लेगेसी वर्ज़न की जगह ली (दोनों अब भी कोडबेस में मौजूद हैं, नया वाला लाइव है)। Auth Hasura के अपने JWT क्लेम्स (x-hasura-default-role को सीधे टोकन से पढ़ा जाता है) के ज़रिए चलता है, न कि बाद में जोड़ी गई किसी अलग परमिशन लेयर के ज़रिए।
पेमेंट और ऑनबोर्डिंग, सिर्फ़ CRUD नहीं
वॉलेट टॉप-अप और डायरेक्ट ऑर्डर पेमेंट दोनों Stripe (@stripe/stripe-js, vue-stripe-js) के ज़रिए चलते हैं, स्टैंडअलोन ऑर्डर और वॉलेट ट्रांज़ैक्शन के लिए अलग पेमेंट रूट के साथ। रजिस्ट्रेशन फोन-आधारित OTP वेरिफिकेशन (vue3-otp-input, जिसमें अंतरराष्ट्रीय फोन फॉर्मेटिंग vue-tel-input संभालता है) के ज़रिए चलता है, कोई सादा ईमेल/पासवर्ड फॉर्म नहीं, जो कैज़ुअल साइन-अप के बजाय कॉर्पोरेट फ्लीट अकाउंट के लिए बने पोर्टल से मेल खाता है।
इंस्टॉल करने योग्य, सिर्फ़ रेस्पॉन्सिव नहीं
पोर्टल vite-plugin-pwa और Workbox के ज़रिए एक इंस्टॉल करने योग्य Progressive Web App के रूप में शिप होता है, autoUpdate सर्विस वर्कर रजिस्ट्रेशन के साथ, ताकि एक फ्लीट मैनेजर इसे अपनी होम स्क्रीन पर जोड़ सके और बिना मैनुअल रीइंस्टॉल के नए डिप्लॉय पा सके।
डेटा मॉडल और स्केल
- जनरेट किया गया GraphQL SDK (स्कीमा codegen से) 31,000 से ज़्यादा लाइनों का है, एक सचमुच बड़ा, टाइप किया गया API सरफेस, इक्का-दुक्का ad hoc क्वेरी नहीं।
- डेटा फेचिंग सीधे Hasura के खिलाफ
graphql-requestके ज़रिए होती है, बीच में कोई Apollo या urql क्लाइंट नहीं। - फ्लीट डैशबोर्ड
vue3-easy-data-tableऔरvue-chart-3(Chart.js) के ज़रिए रेंडर होते हैं, असली row काउंट वाले टेबल और चार्ट के लिए बने, न कि इक्का-दुक्का समरी कार्ड।
Stack
Vue 3, Vite, स्टेट के लिए Pinia, Hasura के खिलाफ GraphQL Code Generator के साथ graphql-request, पेमेंट के लिए Stripe, auth के लिए Firebase, डैशबोर्ड के लिए Chart.js, ऑफ़लाइन/इंस्टॉल-योग्य सपोर्ट के लिए Workbox सहित vite-plugin-pwa, टेस्ट के लिए Playwright।