# Wellbeing Nutrition: Shopify पर ऐप का ग्राउंड-अप रीबिल्ड

> Wellbeing Nutrition के iOS और Android ऐप को React Native में स्क्रैच से रीबिल्ड करना, एक पतली Node डेटा लेयर के ज़रिए Shopify से जोड़ना, और पुराने ऐप के ऊपर एक सहज अपडेट के रूप में शिप करना।

Canonical URL: https://saifsiddiqui.in/hi/work/wellbeing-nutrition/ (this is its markdown representation; the same URL serves HTML to browsers)
Other languages: en: https://saifsiddiqui.in/work/wellbeing-nutrition/ · kn: https://saifsiddiqui.in/kn/work/wellbeing-nutrition/ · ur: https://saifsiddiqui.in/ur/work/wellbeing-nutrition/ · te: https://saifsiddiqui.in/te/work/wellbeing-nutrition/ · ar: https://saifsiddiqui.in/ar/work/wellbeing-nutrition/ · hi-Latn: https://saifsiddiqui.in/hi-latn/work/wellbeing-nutrition/

**भूमिका:** 0→1 बनाया  
**स्टैक:** React Native, Node.js, Shopify Storefront API, GraphQL, GoKwik, CleverTap

**लिंक्स**

- iOS: https://apps.apple.com/in/app/wellbeing-nutrition/id6654917685
- Android: https://play.google.com/store/apps/details?id=com.coffye.pjfzfc

## समस्या

Wellbeing Nutrition एक D2C न्यूट्रिशन ब्रांड है जिसकी वेबसाइट Shopify पर बनी और पॉलिश्ड
है। जो उसके पास नहीं था वो था एक अच्छा ऐप। मौजूदा ऐप Shopify के App Maker से बना था, और
अनुभव में यह साफ़ दिखता था: यह काम करता था, पर कभी स्मूद नहीं लगता था। मैंने इसे Infinite
Locus में उठाया, और ब्रीफ़ बिलकुल स्पष्ट था: React Native में स्क्रैच से एक बिलकुल नया iOS
और Android ऐप बनाना जो तेज़ और पॉलिश्ड लगे, और यह बिना किसी नए बैकएंड के करना। ऑर्डर,
कैटलॉग, और डैशबोर्ड Shopify पर ही चलते रहेंगे, ठीक वैसे जैसे वेब पर चलते थे।

दिलचस्प कंस्ट्रेंट यही आख़िरी हिस्सा था। Shopify वेब React ऐप में आसानी से जुड़ जाता है;
React Native के लिए ऐसा कोई तुलनीय रास्ता नहीं है।

## फ़ैसले

**सीधे Shopify से बात करो, एक ऐसे क्लाइंट से जो इसके लिए बना ही नहीं था।** वेब SDK को वहाँ
ज़बरदस्ती लगाने के बजाय जहाँ उसकी जगह नहीं थी, मैंने Shopify के GraphQL API का इस्तेमाल किया
ताकि स्टोर से जुड़ सकूँ और ऐप को ज़रूरी सब कुछ खींच सकूँ: प्रोडक्ट्स, कलेक्शन, कार्ट, ऑर्डर।
इससे असली Shopify डेटा बीच में किसी अतिरिक्त सर्विस के बिना एक React Native ऐप में बहने लगा।

**डेटा को वहाँ रीशेप करो जहाँ यह सस्ता है, वहाँ नहीं जहाँ यह भारी पड़े।** Shopify डेटा को
अपने ही शेप में लौटाता है, उस शेप में नहीं जो मेरी स्क्रीन्स को चाहिए था, इसलिए पहले वर्ज़न ने
Shopify से डेटा खींचा और हर रिस्पॉन्स को डिवाइस पर ही साफ़ किया। यह काम करता था, पर हर क्वेरी
को फ़ोन पर प्रोसेस करने से ऐप भारी और धीमा हो गया, जो ब्रीफ़ का बिलकुल उलटा था। तो मैंने वह एक
हिस्सा जोड़ा जो ब्रीफ़ में मूल रूप से नहीं था: एक पतली Node सर्विस जो Shopify और ऐप के बीच
बैठती है। यह भारी GraphQL क्वेरीज़ चलाती है, डेटा को साफ़ और रीशेप करती है, और ऐप को एक
सिंपल API के ज़रिए ठीक वही देती है जो उसे चाहिए। यही एक कदम है जिसने ऐप को स्मूद बना दिया। हर
चीज़ इसके ज़रिए नहीं जाती: हल्की क्वेरीज़ आज भी ऐप से सीधे Shopify पर जाती हैं, ताकि मुझे उस
हॉप की क़ीमत न चुकानी पड़े जिसकी ज़रूरत नहीं है।

**गुम हिस्सों को metaobjects से मॉडल करो।** जहाँ स्टोरफ़्रंट किसी ऐसी चीज़ को नेटिवली
एक्सपोज़ नहीं करता था जो ऐप को चाहिए थी, वहाँ मैंने उसे रखने के लिए Shopify metaobjects बनाए
और उन्हें उसी पाइपलाइन के ज़रिए भेजा, ताकि ऐप को बिना कोई कस्टम सिस्टम ऑफ़ रिकॉर्ड खड़ा किए
एक साफ़, कंसिस्टेंट डेटा मॉडल मिले।

**इसे एक नए ऐप के रूप में नहीं, एक अपडेट के रूप में शिप करो।** WBN टीम चाहती थी कि रीबिल्ड
मौजूदा यूज़र्स तक पुराने App Maker ऐप के अपडेट के रूप में पहुँचे, न कि एक नई लिस्टिंग के रूप
में। मैंने यह निकाला कि मौजूदा ऐप को कैसे टेक ओवर किया जाए ताकि नया बिल्ड उसकी जगह शिप हो:
वही यूज़र्स, वही स्टोर लिस्टिंग, रेटिंग अछूती। किसी को कुछ दोबारा डाउनलोड नहीं करना पड़ा, और
बाहर से यह बदलाव अदृश्य था।

**लॉगिन और चेकआउट, बनाया नहीं, लिया।** नो-बैकएंड लॉजिक सबसे ज़्यादा उन दो फ़्लो पर लागू
हुआ जिन्हें मैं ख़ुद हाथ से बनाना सबसे कम चाहता था: लॉगिन और पेमेंट्स। मैंने दोनों के लिए
GoKwik इंटीग्रेट किया, ताकि लौटने वाले ग्राहकों को तेज़ फ़ोन-नंबर लॉगिन और इंडियन पेमेंट्स के
लिए ट्यून किया गया चेकआउट मिले, और कोई ऑथ या पेमेंट इन्फ़्रास्ट्रक्चर मुझ पर न आए।

**पहले इंस्ट्रुमेंट करो, फिर एंगेज करो।** मैंने प्रोडक्ट एनालिटिक्स और लाइफ़साइकल मैसेजिंग के
लिए CleverTap जोड़ा, ताकि ब्रांड देख सके कि ऐप असल में कैसे इस्तेमाल हो रहा है और लॉन्च से ही
लोगों तक पुश और कैंपेन के ज़रिए पहुँच सके, न कि अंधेरे में शिप करके महीनों बाद एंगेजमेंट जोड़े।

## नतीजा

{/* TODO(saif): metrics slot, installs / MAU / share of orders via app,
    repeat-purchase rate or AOV vs web. Qualitative until real numbers land. */}

दोनों ऐप शिप हुए और
[App Store](https://apps.apple.com/in/app/wellbeing-nutrition/id6654917685) तथा
[Google Play](https://play.google.com/store/apps/details?id=com.coffye.pjfzfc) पर
लाइव हैं, पुराने App Maker ऐप के ऊपर एक सहज अपडेट के रूप में डिलीवर किए गए ताकि मौजूदा
ऑडियंस और रेटिंग बरक़रार रहे। नतीजा एक तेज़, नेटिव जैसा महसूस होने वाला React Native ऐप है जो
पूरी तरह Shopify पर चलता है, जिसमें एक छोटी Node डेटा लेयर सिर्फ़ वहीं भारी काम करती है जहाँ
यह मायने रखता है। ब्रांड ने अपना कॉमर्स स्टैक बनाए रखा और आख़िरकार उसे एक ऐप अनुभव मिला जो
उसकी वेबसाइट से मेल खाता है।

सारा काम: [/hi/work/](/hi/work/)

---

Mohd Saif, Product Engineer. I build solutions, not dead software.
Email: saifmd238@gmail.com · GitHub: https://github.com/Saif-09 · LinkedIn: https://www.linkedin.com/in/mohd-saif-134076141/ · Résumé (PDF): https://saifsiddiqui.in/resume

More for agents:
- [/llms.txt](/llms.txt): short summary of this site
- [/llms-full.txt](/llms-full.txt): the complete text of every page in one fetch
- [/agents.md](/agents.md): when to use this site, and how to query it
- [/sitemap-index.xml](/sitemap-index.xml): every URL, in seven languages