{"id":202,"date":"2026-02-09T09:21:34","date_gmt":"2026-02-09T09:21:34","guid":{"rendered":"https:\/\/iamraviraj.com\/blog\/?p=202"},"modified":"2026-02-10T22:40:20","modified_gmt":"2026-02-10T22:40:20","slug":"building-cardbundle-a-developers-journey","status":"publish","type":"post","link":"https:\/\/iamraviraj.com\/blog\/building-cardbundle-a-developers-journey\/","title":{"rendered":"Building CardBundle \u2014 A Developer’s Journey"},"content":{"rendered":"\n\n\n
\n
About the Builder<\/div>\n

Enterprise Architect. Hands-on Developer.<\/h2>\n

CardBundle wasn’t born in a boardroom. It was built by someone who bridges the gap between enterprise architecture and hands-on code \u2014 someone who draws system diagrams and then implements them.<\/p>\n

With deep expertise across the full technology spectrum, I brought a disciplined, architecture-first approach to what started as a personal itch: too many plastic loyalty cards, not enough pockets.<\/p>\n\n

\n
\n <\/span>AWS Certified Enterprise Architect\n <\/div>\n
\n <\/span>TOGAF Certified\n <\/div>\n
\n <\/span>PMP Certified\n <\/div>\n
\n <\/span>SME Mobile App Developer\n <\/div>\n
\n <\/span>Full-Stack Hands-on Engineer\n <\/div>\n<\/div>\n<\/section>\n\n\n\n
<\/div>\n\n\n\n
\n
The Problem<\/div>\n

Loyalty cards deserve better<\/h2>\n

We all carry them \u2014 supermarket cards, coffee shop punch cards, gym memberships. They clutter wallets, get lost, and their barcodes fade. Existing solutions were bloated, privacy-invasive, or locked into specific ecosystems.<\/p>\n

I wanted something minimal and universal: scan your card, store it, pull up the barcode at checkout. That’s it. No accounts with retailers, no data harvesting \u2014 just your cards, on your phone, always ready.<\/p>\n<\/section>\n\n\n\n

<\/div>\n\n\n\n
\n
At a Glance<\/div>\n

The build in numbers<\/h2>\n
\n
\n
2<\/div>\n
Platforms<\/div>\n <\/div>\n
\n
17<\/div>\n
Languages<\/div>\n <\/div>\n
\n
14<\/div>\n
API Endpoints<\/div>\n <\/div>\n
\n
4<\/div>\n
Barcode Formats<\/div>\n <\/div>\n
\n
2<\/div>\n
Native Widgets<\/div>\n <\/div>\n
\n
1<\/div>\n
Developer<\/div>\n <\/div>\n<\/div>\n<\/section>\n\n\n\n
<\/div>\n\n\n\n
\n
The Journey<\/div>\n

From first commit to the App Store<\/h2>\n\n
\n
<\/div>\n\n
\n
<\/div>\n
Phase 1 \u2014 Foundation<\/div>\n

Initial Architecture & Scaffolding<\/h3>\n

Started with a clear separation: a Sails.js backend serving a RESTful API backed by PostgreSQL, and an Expo-managed React Native frontend. Applied TOGAF principles \u2014 defined bounded contexts early (auth, cards, users, subscriptions) and established clean API contracts before writing a line of UI code.<\/p>\n <\/div>\n\n

\n
<\/div>\n
Phase 2 \u2014 Core Backend<\/div>\n

Auth, API & Data Layer<\/h3>\n

Built JWT-based authentication with Passport.js \u2014 access tokens (10min) and refresh tokens (15 days). Implemented a smart token refresh queue on the mobile client that prevents race conditions when multiple API calls fail simultaneously. Designed the LoyaltyCard model with Waterline ORM, supporting image uploads via Multer with automatic cleanup of old files on update\/delete.<\/p>\n <\/div>\n\n

\n
<\/div>\n
Phase 3 \u2014 Mobile Experience<\/div>\n

Scanning, Cards & State Management<\/h3>\n

Integrated expo-barcode-scanner with custom overlay UI and auto-format detection (CODE128, EAN-13, EAN-8, UPC-A). Built the card management flow with Redux Toolkit \u2014 async thunks for CRUD operations, Redux-Persist for offline access, and a card preview with luminance-aware text colors. Added card image flip animations for front\/back views.<\/p>\n <\/div>\n\n

\n
<\/div>\n
Phase 4 \u2014 Going Native<\/div>\n

Home Screen Widgets (iOS & Android)<\/h3>\n

This was the most challenging phase. Built iOS WidgetKit extensions using Swift with App Groups for data sharing, and Android widgets using react-native-android-widget. Created Redux middleware that intercepts card CRUD actions and automatically syncs data to both widget systems. Added deep linking (cardbundle:\/\/) so tapping a widget card opens the app directly to that card.<\/p>\n <\/div>\n\n

\n
<\/div>\n
Phase 5 \u2014 Global Reach<\/div>\n

17-Language Internationalization<\/h3>\n

Implemented i18n-js with expo-localization for automatic device locale detection. Full translation coverage across English, French, Spanish, Portuguese, German, Italian, Polish, Russian, Ukrainian, Korean, Japanese, Turkish, Hindi, Bengali, Marathi, Telugu, Tamil, and Gujarati. Every screen, button, error message, and placeholder \u2014 localized.<\/p>\n <\/div>\n\n

\n
<\/div>\n
Phase 6 \u2014 Production<\/div>\n

Deployment, Monitoring & Store Compliance<\/h3>\n

Deployed the backend to production, integrated Firebase Analytics and Crashlytics for real-time monitoring. Navigated Apple’s review process \u2014 encryption declarations, camera permission descriptions, App Transport Security compliance. Resolved Android Play Store 16KB page size warnings. Configured SMTP via Zoho for transactional emails (password resets, verification).<\/p>\n <\/div>\n<\/div>\n<\/section>\n\n\n\n

<\/div>\n\n\n\n
\n
Architecture<\/div>\n

System design overview<\/h2>\n

Applying enterprise architecture patterns to a mobile-first product. Clean separation of concerns, stateless API design, and event-driven widget synchronization.<\/p>\n\n

CLIENT LAYER<\/span>\nReact Native (Expo)<\/span> \u2500\u2500 Redux Toolkit \u2500\u2500 Redux-Persist\n \u2502 \u2502\n \u2502 REST \/ JWT Bearer \u2502 Widget Middleware<\/span>\n \u2502 \u2502\nAPI LAYER<\/span> \u25bc\nSails.js<\/span> \u2500\u2500 Passport.js iOS WidgetKit<\/span>\n \u2502 (JWT Auth) Android Widget<\/span>\n \u2502 \u25b2\nDATA LAYER<\/span> \u2502\nPostgreSQL<\/span> \u2500\u2500 Waterline App Groups \/ SharedPrefs\nFile Store<\/span> \u2500\u2500 Multer\n\nSERVICES<\/span>\nFirebase<\/span> \u2500\u2500 Analytics + Crashlytics\nNodemailer<\/span> \u2500\u2500 Zoho SMTP\nStripe<\/span> \u2500\u2500 Subscriptions<\/div>\n<\/section>\n\n\n\n
<\/div>\n\n\n\n
\n
Tech Stack<\/div>\n

Tools of the trade<\/h2>\n\n
\n
\n

Frontend<\/h4>\n

React Native 0.74 with Expo 51. TypeScript for type safety. TailwindCSS (twrnc) for styling with dark mode support.<\/p>\n React Native + Expo<\/span>\n <\/div>\n\n

\n

Backend<\/h4>\n

Sails.js v1.5 \u2014 a convention-over-configuration Node.js MVC framework. Waterline ORM for database abstraction.<\/p>\n Sails.js + PostgreSQL<\/span>\n <\/div>\n\n

\n

Authentication<\/h4>\n

Passport.js with JWT strategy. Dual-token system with transparent refresh. bcrypt password hashing.<\/p>\n JWT + Passport.js<\/span>\n <\/div>\n\n

\n

State Management<\/h4>\n

Redux Toolkit with 4 slices (auth, cards, user, language). Redux-Persist to AsyncStorage for offline support.<\/p>\n Redux Toolkit<\/span>\n <\/div>\n\n

\n

Native Widgets<\/h4>\n

iOS WidgetKit via @bittingz\/expo-widgets. Android widgets via react-native-android-widget. Redux middleware for sync.<\/p>\n WidgetKit + Android Widgets<\/span>\n <\/div>\n\n

\n

Observability<\/h4>\n

Firebase Analytics for user behavior tracking. Crashlytics for real-time crash monitoring. Custom event logging.<\/p>\n Firebase Analytics<\/span>\n <\/div>\n<\/div>\n<\/section>\n\n\n\n

<\/div>\n\n\n\n
\n
Challenges & Solutions<\/div>\n

What made it hard<\/h2>\n\n
    \n
  • \n Token refresh race conditions<\/strong>\n Multiple API calls failing simultaneously would trigger parallel refresh requests. Solved with a single-queue mechanism \u2014 the first 401 triggers a refresh, subsequent failures wait for the same promise, then all retry with the new token.<\/span>\n <\/li>\n
  • \n Dual-platform native widgets<\/strong>\n iOS WidgetKit (Swift) and Android widgets (Java\/Kotlin) have fundamentally different data-sharing models. Bridged them through Redux middleware that intercepts card state changes and writes to App Groups (iOS) and SharedPreferences (Android) simultaneously.<\/span>\n <\/li>\n
  • \n Barcode format detection<\/strong>\n Different loyalty cards use different barcode formats. Built a dynamic detection system that analyzes the scanned number pattern and selects the correct format (CODE128, EAN-13, EAN-8, UPC-A) for accurate rendering.<\/span>\n <\/li>\n
  • \n Apple review compliance<\/strong>\n Navigated encryption declarations (HTTPS\/TLS), camera permission justifications, and App Transport Security requirements. Each rejection was a lesson in reading Apple’s guidelines more carefully.<\/span>\n <\/li>\n
  • \n Email delivery in production<\/strong>\n Went through multiple SMTP port configurations (465, 587) and TLS settings with Zoho before landing on a stable email delivery pipeline for password resets and verification.<\/span>\n <\/li>\n<\/ul>\n<\/section>\n\n\n\n
    <\/div>\n\n\n\n
    \n
    Reflection<\/div>\n

    What I took away<\/h2>\n

    CardBundle started as a weekend project and evolved into a production application serving users across both major mobile platforms. Building it solo \u2014 from database schema design to App Store submission \u2014 reinforced something I’ve always believed: the best architects are the ones who still write code.<\/p>\n

    My enterprise architecture background (TOGAF, AWS) shaped how I approached system boundaries, API contracts, and separation of concerns. My PMP training kept scope creep in check. But it was the hands-on development \u2014 debugging a WidgetKit extension at midnight, wrestling with Expo prebuild configs, writing the 17th translation file \u2014 that made this product real.<\/p>\n

    Every loyalty card scanned, every barcode displayed at a checkout counter, every widget glanced at on a home screen \u2014 that’s architecture in action.<\/p>\n<\/section>\n\n","protected":false},"excerpt":{"rendered":"

    About the Builder Enterprise Architect. Hands-on Developer. CardBundle wasn’t born in a boardroom. It was built by someone who bridges the gap between enterprise architecture and hands-on code \u2014 someone who draws system diagrams and then implements them. With deep expertise across the full technology spectrum, I brought a disciplined, architecture-first approach to what started…<\/p>\n","protected":false},"author":1,"featured_media":206,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,16],"tags":[],"class_list":["post-202","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-engineering","category-vibe-coding"],"_links":{"self":[{"href":"https:\/\/iamraviraj.com\/blog\/wp-json\/wp\/v2\/posts\/202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iamraviraj.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iamraviraj.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iamraviraj.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iamraviraj.com\/blog\/wp-json\/wp\/v2\/comments?post=202"}],"version-history":[{"count":1,"href":"https:\/\/iamraviraj.com\/blog\/wp-json\/wp\/v2\/posts\/202\/revisions"}],"predecessor-version":[{"id":203,"href":"https:\/\/iamraviraj.com\/blog\/wp-json\/wp\/v2\/posts\/202\/revisions\/203"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iamraviraj.com\/blog\/wp-json\/wp\/v2\/media\/206"}],"wp:attachment":[{"href":"https:\/\/iamraviraj.com\/blog\/wp-json\/wp\/v2\/media?parent=202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iamraviraj.com\/blog\/wp-json\/wp\/v2\/categories?post=202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iamraviraj.com\/blog\/wp-json\/wp\/v2\/tags?post=202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}