અમે 8 અઠવાડિયામાં ક્રોસ-પ્લેટફોર્મ એપ કેવી રીતે બનાવી: એક વાસ્તવિક કેસ સ્ટડી
હું એક દાયકાથી વધુ સમયથી એપ્સ બનાવી રહ્યો છું. ચુસ્ત ડેડલાઇન જેટલું ઝડપ વિશે મને કંઈ શીખવ્યું નથી.
લોજિસ્ટિક્સ સ્ટાર્ટઅપ અમારી પાસે આવ્યું. તેમને ડ્રાઇવરો અને ડિસ્પેચરો માટે ક્રોસ‑પ્લેટફોર્મ એપ જોઈતી હતી. ડેડલાઇન? આઠ અઠવાડિયા. કોઈ છૂટછાટ નહીં.
અમે 56મા દિવસે ડિલિવર કર્યું. અમે તે બરાબર કેવી રીતે કર્યું તે અહીં છે.
The Challenge
ક્લાયન્ટ, B2B લોજિસ્ટિક્સ કંપની, પાસે કોઈ મોબાઇલ એપ નહોતી. તેમના ડ્રાઇવરો કાગળના લોગ અને ફોન કોલ વાપરતા. ડિસ્પેચરો સ્પ્રેડશીટ્સ સંભાળતા.
They wanted:
- ડિસ્પેચર્સ માટે રિયલ-ટાઇમ ટ્રેકિંગ
- ડ્રાઇવરો માટે જોબ સોંપણીઓ
- ડિલિવરીના ફોટો અપલોડ્સ
- ગ્રામીણ વિસ્તારો માટે ઓફલાઇન મોડ
પ્લેટફોર્મ્સ: iOS અને Android. સિંગલ કોડબેઝ. બે મહિનાથી ઓછા સમયમાં.
ક્રોસ-પ્લેટફોર્મ શા માટે? તેના પર આવીશું.
Why Cross-Platform?
અમે નેટિવ એપ્સ પર વિચાર કર્યો. બે અલગ ટીમો. બે કોડબેઝ. તેમાં ઓછામાં ઓછા 14–16 અઠવાડિયા લાગત.
ક્રોસ-પ્લેટફોર્મે અમને એક કોડબેઝ આપ્યો. અમે બંને પ્લેટફોર્મ્સ પર 85% કોડ ફરીથી વાપર્યો. તે માંથી વાસ્તવિક સંખ્યા છે React Native’s docs — કંપનીઓ 60–90% કોડ પુનઃઉપયોગ નોંધે છે.
| Factor | નેટિવ (iOS + Android) | ક્રોસ-પ્લેટફોર્મ (React Native) |
|---|---|---|
| Development time | 14–16 weeks | 8 weeks |
| Code reuse | 0% | 85% |
| Team size | 6 developers | 4 developers |
| Initial cost | $120,000–$160,000 | $80,000–$100,000 |
| Performance | Excellent | નેટિવના ~95% (વાસ્તવિક ટેસ્ટ) |
| Maintenance | Two codebases | One codebase |
સમજૂતી? અદ્યતન કેમેરા ફિલ્ટર જેવા કેટલાક નેટિવ ફીચર્સને વધુ બિલ્ડ સમય લાગ્યો. પણ લોજિસ્ટિક્સ એપ માટે, ક્રોસ-પ્લેટફોર્મ સંપૂર્ણ કામ કર્યું.
According to a Statista survey, 38% વિકાસકર્તાઓ ક્રોસ-પ્લેટફોર્મ પ્રોજેક્ટ્સ માટે React Native વાપરે છે. તે સૌથી લોકપ્રિય ફ્રેમવર્ક છે.
Our Tech Stack
અમે ગુણવત્તા સાથે સમાધાન કર્યા વગર ડેવલપમેન્ટ ઝડપી બનાવતા ટૂલ્સ પસંદ કર્યા.
- Framework: React Native
- Bootstrapping: Expo — પ્રારંભિક સેટઅપમાં અમારા 2 અઠવાડિયા બચાવ્યા
- Backend: Firebase — ઓથેન્ટિકેશન, Firestore, ક્લાઉડ ફંક્શન્સ
- CI/CD: GitHub Actions + Azure DevOps for testing
- Error tracking: Sentry
- Analytics: Amplitude
Flutter કરતાં React Native શા માટે? ક્લાયન્ટ પાસે પહેલેથી JavaScript ડેવલપર્સ હતા. Dart શીખવાની જરૂર નહોતી.
Expo એ અમને મિનિટોમાં ડિવાઇસ પર એપ ચલાવવા દીધી. અમે Xcode કે Android Studio ગોઠવવામાં સમય બગાડ્યો નહીં.
The 8-Week Timeline
દરેક અઠવાડિયું મહત્વનું હતું. અહીં અમારું ચોક્કસ શેડ્યૂલ છે.
સપ્તાહ 1: ફાઉન્ડેશન & પ્રોટોટાઇપ
- Set up Expo project
- ઇન્સ્ટોલ કરેલ expo-location, expo-camera, expo-file-system
- (બોટમ ટૅબ્સ + સ્ટેક) નેવિગેશન માળખું ડિઝાઇન કર્યું
- Figmaમાં ક્લિક કરી શકાય તેવો પ્રોટોટાઇપ બનાવ્યો
- ક્લાયન્ટે શુક્રવાર સુધીમાં પ્રવાહ મંજૂર કર્યો
સપ્તાહ 2: ઓથેન્ટિકેશન & યુઝર રોલ્સ
- ઇમેઇલ/પાસવર્ડ સાથે Firebase Auth
- બે ભૂમિકાઓ: ડ્રાઇવર, ડિસ્પેચર
- ડેટા એક્સેસ મર્યાદિત કરવા માટે Firestore નિયમો
- iOS સિમ્યુલેટર અને Android ઇમ્યુલેટર બંને પર ટેસ્ટ કરેલ
સપ્તાહ 3: રીઅલ-ટાઇમ જોબ બોર્ડ
- જોબ અપડેટ્સ માટે Firestore લિસનર
- પુલ-ટુ-રીફ્રેશ સાથે FlatList
- જોબ સ્થિતિ: બાકી, સ્વીકૃત, પરિવહનમાં, પૂર્ણ
- ડ્રાઇવરોને ફક્ત નજીકના કામો દેખાય છે (જીઓલોકેશન ફિલ્ટર)
સપ્તાહ 4: ઓફલાઇન મોડ
- Used
redux-persist+@react-native-async-storage/async-storage - કેશ કરેલી જોબ્સ અને યુઝર ડેટા સ્થાનિક રીતે
- સિંક કતાર: ઓનલાઇન પાછા આવો ત્યારે અપડેટ્સ મોકલાય છે
- એરપ્લેન મોડ સાથે ટેસ્ટ કર્યું — કામ કર્યું
સપ્તાહ 5: ફોટો અપલોડ & ફોર્મ્સ
expo-image-pickerfor camera/gallery- <200KB સુધી ક્લાયન્ટ-સાઇડ પર ઇમેજીસ કોમ્પ્રેસ કરો
- અપલોડ માટે Firebase Storage
- ડિલિવરી પુરાવા માટે ડાયનેમિક ફોર્મ બનાવ્યું
સપ્તાહ 6: ડિસ્પેચર ડેશબોર્ડ
- સર્ચ અને ફિલ્ટર સાથે વેબ જેવું ટેબલ વ્યૂ
- ડ્રાઇવર લોકેશન દર્શાવતો રિયલ-ટાઇમ નકશો
- ડ્રાઇવર પ્રદર્શન મેટ્રિક્સ (સમયસર ડિલિવરી દર)
- Used
react-native-mapsfor the map
સપ્તાહ 7: ટેસ્ટિંગ & ડિબગિંગ
- Jest સાથે યુનિટ ટેસ્ટ (80% કવરેજ)
- Detox સાથે E2E ટેસ્ટ (ફક્ત ક્રિટિકલ પાથ)
- દરેક બિલ્ડ પર Sentry ભૂલ ટ્રેકિંગ
- 10 વાસ્તવિક ડ્રાઇવરો સાથે યુઝર સ્વીકૃતિ પરીક્ષણ
સપ્તાહ 8: પોલિશ & ડિપ્લોયમેન્ટ
- પ્રદર્શન ઑપ્ટિમાઇઝેશન (લેઝી લોડિંગ ઇમેજ, ફરીથી રેન્ડર ઘટાડવું)
- એપ સ્ટોર સ્ક્રીનશોટ અને વર્ણનો
- Submitted to Apple App Store and Google Play Store
- બંને 2 દિવસમાં મંજૂર
Development Process
અમે બે-અઠવાડિયાના સ્પ્રિન્ટ્સ ચલાવ્યા. Slack દ્વારા દૈનિક સ્ટેન્ડઅપ્સ. દર ત્રણ દિવસે ફીડબેક લૂપ.
અમે ફીચર બ્રાન્ચિસ વાપરી. દરેક પુલ રિક્વેસ્ટ GitHub Actions વર્કફ્લો ટ્રિગર કરતી હતી: લિન્ટ, ટેસ્ટ, Expo સાથે બિલ્ડ, પછી Expo Go વાપરીને ટેસ્ટ ડિવાઇસ પર અપલોડ.
લાંબા ડિપ્લોયમેન્ટ ચક્ર નહીં. કમિટથી ડિવાઇસ પર લાઇવ ટેસ્ટ સુધી: લગભગ 10 મિનિટ.
Testing and QA
અમે શક્ય બધું સ્વચાલિત કર્યું.
- યુનિટ ટેસ્ટ: Jest + React Native Testing Library
- E2E: ક્રિટિકલ ફ્લો માટે Detox (લોગિન, જોબ સ્વીકૃતિ, ફોટો અપલોડ)
- મેન્યુઅલ પરીક્ષણ: iOS માટે TestFlight, Android માટે આંતરિક ટ્રેક
- એરર ટ્રેકિંગ: Sentry એ લોન્ચ પહેલાં 12 બગ પકડ્યા
એક વાસ્તવિક ઉદાહરણ: ગેલેરીમાંથી ઇમેજ પસંદ કરતી વખતે Android પર ક્રેશ. Sentry એ ચોક્કસ લાઇન નંબર આપ્યો. 2 કલાકમાં સુધાર્યો.
ડિપ્લોયમેન્ટ અને લોન્ચ
Expo eas build પ્રોડક્શન બિલ્ડ્સ સરળ બનાવ્યા.
અમે તબક્કાવાર રોલઆઉટ વાપર્યું: પહેલા દિવસે 1% વપરાશકર્તાઓ, બીજા દિવસે 10%, ત્રીજા દિવસ સુધીમાં 100%.
કોઈ મોટી સમસ્યા નથી. iOS 17 પર એક નોટિફિકેશન પરમિશન બગ — એક કલાકમાં હોટફિક્સ મોકલ્યો.
Results and Metrics
એપ 8મા અઠવાડિયે લાઇવ થઈ.
- Drivers: પ્રથમ મહિનામાં 150 સક્રિય
- Jobs processed: પ્રથમ મહિનામાં 3,200
- Photo uploads: 2,800
- Crash-free rate: 99.6% (Sentry ડેટા)
- App Store rating: 4.7 stars
- ડિસ્પેચર સંતોષ: 92% (આંતરિક સર્વેક્ષણ)
બે નેટિવ એપ બનાવવાની સરખામણીમાં ક્લાયન્ટે $40,000 બચાવ્યા. તે એક Forrester અભ્યાસ અંદાજ — ક્રોસ-પ્લેટફોર્મ ખર્ચ 30–50% ઘટાડે છે.
Lessons Learned
- Start with Expo. અમારા સેટઅપના બે અઠવાડિયા બચ્યા. જો તમને Expo માં ન હોય તેવા નેટિવ મોડ્યુલ્સ જોઈતા હોય, તો તમે પછીથી ઇજેક્ટ કરી શકો છો.
- ઑફલાઇન મોડની વહેલી યોજના બનાવો. અમે તે 4થા અઠવાડિયામાં ઉમેર્યું. જો અમે 7મા અઠવાડિયા સુધી રાહ જોઈ હોત, તો અમે ડેડલાઇન ચૂકી ગયા હોત.
- દરરોજ વાસ્તવિક ડિવાઇસ પર ટેસ્ટ કરો. સિમ્યુલેટર્સ બગ ચૂકી જાય છે. અમે દરરોજ Expo Go પર બિલ્ડ્સ પુશ કર્યા.
- ઓવર-એન્જિનિયરિંગ ન કરો. અમે Firebase અને Firestore વાપર્યું. કોઈ કસ્ટમ બેકએન્ડ નહીં. તેનાથી ડેવલપમેન્ટ સમય 40% ઘટ્યો.
- દર 3 દિવસે ક્લાયન્ટ પ્રતિસાદ. ફરી કામ અટકાવે છે. અમે લેખિત સ્પેક્સ નહીં, ટૂંકા વિડિયો ડેમો મોકલ્યા.
Final Thoughts
8 અઠવાડિયામાં ક્રોસ-પ્લેટફોર્મ એપ શક્ય છે. તમારે યોગ્ય ટૂલ્સ, મજબૂત સમયરેખા અને સતત સંદેશાવ્યવહારની જરૂર છે.
અમે React Native, Expo, Firebase અને GitHub Actions વાપર્યા. દરેક પસંદગીએ સમય બચાવ્યો.
જો તમે તમારા વ્યવસાય માટે ક્રોસ-પ્લેટફોર્મ એપનો વિચાર કરી રહ્યા હો, તો સ્પષ્ટ ટાઇમલાઇનથી શરૂઆત કરો. ફીચર ક્રીપ ટાળો. તમે જાણતા હો તે ફ્રેમવર્ક વાપરો.
અમે તે લોજિસ્ટિક્સ, રિટેલ અને હેલ્થકેર માટે કર્યું છે. દરેક પ્રોજેક્ટે અમને કંઈક નવું શીખવ્યું.
તમારું પણ એ જ રીતે મોકલો
અમે આ કેવી રીતે તપાસ્યું (સપ્ટેમ્બર 2026): અમે સપ્ટેમ્બર 2026માં સમયરેખા, સ્ટેક અને લિંક્સ ફરીથી તપાસ્યા; ટાંકેલા આંકડા આ પોસ્ટમાં જણાવેલા કેસ-સ્ટડી માપ છે.
આઠ અઠવાડિયા એ સિસ્ટમ છે, નસીબ નહીં. આ માર્ગદર્શિકાઓ તેના ભાગો આવરી લે છે:
- Next.js SEO: SSR vs ISR vs SSG — તમારા એપ માર્કેટિંગ પેજ માટે વેબ-સાઇડ રેન્ડરિંગ કૉલ્સ
- Next.js Core Web Vitals ઑપ્ટિમાઇઝેશન — તમારા લોન્ચને જરૂરી સ્પીડ સ્કોર મેળવો
- RAG ચેટબોટ અમલીકરણ — શિપ કર્યા પછી ઇન-એપ જવાબો ઉમેરો
વારંવાર પૂછાતા પ્રશ્નો
1. શું તમે ખરેખર 8 અઠવાડિયામાં ક્રોસ-પ્લેટફોર્મ એપ બનાવી શકો?
હા, જો એપ મધ્યમ જટિલતાવાળી હોય. અમારી ટાઇમલાઇન 5–8 સ્ક્રીન, ન્યૂનતમ નેટિવ ફીચર્સ અને સ્ટાન્ડર્ડ બેકએન્ડ ધરાવતી એપ્સ માટે યોગ્ય છે. જટિલ એનિમેશન કે હાર્ડવેર ઇન્ટિગ્રેશન માટે 2–3 અઠવાડિયા ઉમેરો.
2. ક્રોસ-પ્લેટફોર્મ ડેવલપમેન્ટ માટે કયું ફ્રેમવર્ક ઝડપી છે: React Native કે Flutter?
જો તમારી ટીમ JavaScript/TypeScript જાણે છે તો React Native ઝડપી છે. Flutter માટે Dart શીખવું પડે છે. અમારા અનુભવમાં, Expo સાથે React Native પ્રારંભિક સેટઅપ પર 1–2 અઠવાડિયા બચાવે છે. પરફોર્મન્સ-ક્રિટિકલ એપ્સ (દા.ત., ગ્રાફિક્સ-ભારે) માટે, Flutter વધુ સારું હોઈ શકે છે.
3. ક્રોસ-પ્લેટફોર્મ એપમાં ઑફલાઇન મોડ કેવી રીતે સંભાળો છો?
We use redux-persist Redux સ્ટેટ સ્થાનિક રીતે કેશ કરવા. Jobs અને વપરાશકર્તા ડેટા AsyncStorageમાં સંગ્રહાય છે. જ્યારે ઉપકરણ ઓફલાઇન જાય છે, ત્યારે એપ કેશ કરેલો ડેટા વાંચે છે. ફરી ઓનલાઇન આવે ત્યારે, સિંક કતાર બાકી અપડેટ્સ મોકલે છે.
4. નેટિવ અને ક્રોસ-પ્લેટફોર્મ ડેવલપમેન્ટ વચ્ચે સામાન્ય ખર્ચ તફાવત કેટલો છે?
According to a Forrester અભ્યાસ, ક્રોસ-પ્લેટફોર્મ ડેવલપમેન્ટ ખર્ચ 30–50% ઘટાડી શકે છે. અમારા ક્લાયન્ટ માટે, બચત $40,000 હતી. જાળવણી પણ સસ્તી છે કારણ કે તમે એક કોડબેઝ અપડેટ કરો છો.
5. એપ iOS અને Android બંને પર સારી દેખાય તેની ખાતરી કેવી રીતે કરો છો?
અમે React Native ના સુસંગત ઘટકો વાપરીએ છીએ અને સંપૂર્ણ જરૂરી ન હોય ત્યાં સુધી પ્લેટફોર્મ-વિશિષ્ટ સ્ટાઇલિંગ ટાળીએ છીએ. અમે દરરોજ બંને ડિવાઇસ પર પરીક્ષણ કરીએ છીએ. Expo નું યુનિવર્સલ બિલ્ડ સુનિશ્ચિત કરે છે કે એ જ કોડ બંને પ્લેટફોર્મ્સ પર ચાલે.
તમારી ક્રોસ-પ્લેટફોર્મ એપ ઝડપથી બનાવો
તમારી પાસે ડેડલાઇન છે. અમારી પાસે પ્રક્રિયા છે.
At DG10 Agency, અમે ક્રોસ-પ્લેટફોર્મ એપ વિકાસમાં નિષ્ણાત છીએ. અમે સાબિત 8-અઠવાડિયા સમયરેખા અનુસરીએ છીએ. અમે React Native, Expo, Firebase અને સ્વચાલિત CI/CD વાપરીએ છીએ.
કોઈ બકવાસ નહીં. કોઈ વિલંબ નહીં. બંને સ્ટોર્સ પર ફક્ત કાર્યરત એપ.
Contact us today તમારો પ્રોજેક્ટ શરૂ કરવા. અમે 48 કલાકમાં તમારી કસ્ટમ સમયરેખા તૈયાર કરીશું.