Mastercard

During my time at Mastercard's R&D Foundry, I worked on developing rapid prototypes and innovative solutions. My projects included a personalized retail demo app and two Android applications, enabling seamless user experiences and cutting-edge technology integrations.

Personalized Retail Demo App

This project integrated a web agent, iOS frontend, a virtual try-on service, and a large language model (LLM) recommender to create an immersive shopping experience:

• Users could receive personalized clothing recommendations (e.g., winter wear) from an LLM.
• Augmented reality (AR) allowed users to virtually try on clothes, visualizing the fit before purchasing.

Key Contributions

• Researched and integrated the IDM-VTON virtual try-on API, replacing a slower and less accurate model. This improved image generation speed by 67% and enhanced the quality of AR visualizations.
• Designed and implemented a GraphQL API, enabling flexible and efficient queries for retrieving try-on images and product recommendations.
• Implemented Socket.IO for real-time, bi-directional communication between the frontend and backend, ensuring seamless updates and interactions.

Technical Challenges and Design Decisions

• WebSockets and Socket.IO for Real-Time Updates:
  • Socket.IO: Used for real-time, bi-directional communication to handle dynamic updates like product recommendations and user interactions.
    • Chosen over message queues (e.g., RabbitMQ) due to lower latency (no polling/subscriptions) and reduced overhead—ideal for a quick prototype.
    • Note on Scaling: While WebSockets enable fast, direct client-server communication, they can be more complex to scale horizontally (e.g., requiring sticky sessions or specialized load balancing) compared to a message queue's built-in distribution mechanisms. Sticky sessions ensure clients remain connected to the same backend server, preventing dropped WebSocket connections, but can lead to uneven load distribution; an alternative is using Redis or a distributed store to synchronize sessions across multiple servers.
  • Faced challenges with managing disconnections due to socket ID volatility; resolved by implementing a **session object** tied to a session ID, ensuring consistent state across reconnections.
• GraphQL API:
  • Chose GraphQL for its ability to retrieve related data in a single query (e.g., try-on images and recommendations) without over-fetching or under-fetching, improving client efficiency.
  • Allowed dynamic, client-specific queries, such as fetching only the fields required for personalized recommendations and virtual try-on functionality.
  • GraphQL uses a single endpoint and a strongly-typed schema.
  • Both GraphQL and REST APIs are stateless and don't reply on stored session state.
  • GraphQL prevents over or under fetching, avoids potential multiple API calls and supports evolving APIs without versioning, as you can just edit the schema, as compared to RESTful APIs.
  • However, since the queries can be complex, traditional HTTP caching is harder as compared to REST. Caching must occur as the query level. REST is also much simpler, with HTTP methods.
• SSH and Ngrok for Secure Testing:
  • Used SSH for secure communication between local and remote systems, ensuring safe server management and testing.
  • Leveraged ngrok to expose the local server securely to external clients, enabling real-time collaboration and debugging.
  • Understood ngrok's operation: creating a persistent, secure and encrypted tunnel, mapping public URLs to local services, and inspecting traffic via a web dashboard.

Android Application Demos

Loan Payment Mobile App Demo

Developed a user-centric app for managing loan payments, offering features such as:

• Viewing loan details and transaction history.
• Scheduling payments and setting reminders.

Gained proficiency in:

• Kotlin: Leveraged the MVVM architecture to enhance maintainability and scalability.
• Navigation Graph: Designed smooth user flows for intuitive navigation.

• What is MVVM?
• MVVM is a design pattern that separates UI, business logic, and data handling into distinct components.
• It consists of:
  • Model (M): Manages data, business logic, and API calls.
  • ViewModel (VM): Acts as a bridge between Model and View, handling UI-related logic without direct references to the UI.
  • View (V): Displays UI and listens to ViewModel for data updates.
• Separation of Concerns:
  • Maintainability: UI code remains independent of business logic, making the app easier to modify.
  • Reusability: ViewModels can be shared across multiple Views, reducing code duplication.
  • Testability: ViewModels can be unit tested without relying on UI components.

In particular, I learned how the MVVM architecture helps prevent resource and memory leaks:

Consider an Activity (UI page) with a counter. Without the MVVM model:

• If the UI state changes, such as rotating the device (e.g., switching from portrait to landscape) or toggling night mode, the Activity is destroyed and recreated.
• The counter value would reset because the old Activity instance is discarded, and the new one starts fresh.
• If the counter data were stored as a static field tied to the class and was referencing an activity instance, the old Activity might not get garbage collected. In Java, the mark and sweep algorithm checks if there are any references (reachable from the code). This would result in a memory leak because the old Activity is still being referenced.

With MVVM:

• The counter logic is decoupled from the UI. It resides in the ViewModel, which persists across configuration changes (e.g., screen rotation).
• The counter value persists because the ViewModel remains the same, even if the Activity is destroyed and recreated. The ViewModel holds the data independently and shares it with the Activity when needed.
• The ViewModel is lifecycle-aware and not directly tied to the Activity’s UI lifecycle. When the Activity is permanently destroyed (e.g., the user exits the app or the app crashes), the ViewModel is cleared, releasing any resources it holds and ensuring no memory leaks occur.

Car Dashboard Integration System Demo

Built a tablet app demo integrated with IoT-based car dashboards, offering real-time insights and features:

• Provided navigation assistance, similar to Google Maps.
• Displayed vehicle data, including temperature and diagnostics.
• Implemented PubNub for low-latency messaging between the car dashboard, mobile app, and server.

Key takeaways included:

• Hands-on experience with PubNub for seamless message passing across endpoints.

Key Takeaways

• Learned GraphQL API design and Socket.IO for real-time data exchange.
• Gained insights into session management and handling reconnections in real-time systems.
• Learned Kotlin, Navigation Graph, and IoT integration for Android apps.
• Acquired in-depth knowledge of SSH, ngrok, and their applications in secure server management and testing workflows.
← Back to Home