One of the core challenges in building HaulAds was creating a seamless connection between the web-based campaign management system and the desktop app used to display ads on trucks. Ensuring real-time delivery of ad content across devices with varying internet conditions required a resilient architecture. Managing dynamic, tiered subscriptions for users and administrators added another layer of complexity, especially with support for gifting subscriptions. Accurate geo-plotting of ad playback locations, along with real-time updates, required deep integration with mapping APIs and efficient data syncing across user interfaces. Finally, implementing a clean, smooth, and engaging UI with complex interactions and animations while keeping the platform performant was a significant technical hurdle.

To tackle these challenges, we built the desktop app using Electron, allowing seamless communication with the backend via WebSockets to fetch and display ads in real-time. For location plotting and targeting, we utilized the Google Maps API, enabling pinpoint accuracy and dynamic display of ad playback locations as map dots. Subscription logic, including gift subscriptions and admin-level controls, was designed with a flexible schema in MongoDB to support changes without disrupting user access. GSAP animations were used to provide a polished, responsive UI that enhances usability. Robust role-based access control and real-time chat features were integrated to ensure a scalable and collaborative environment for both users and admins.