The Challenge


 For Vlue, the initial challenge was implementing a user-friendly interface for the support team to verify drivers partnering with the platform. The client proposed a highly customized design, which required extensive UI design work with meticulous attention to detail. Later, the client requested a second application where the main focus was map integration using Here Maps, while reusing components from the first application.


The Solution


 For the first application, the Atomic Design methodology was applied, building components from the smallest elements (atoms) to larger structures. This centralized component management and enabled easy reuse. For the second application, after a preliminary study of Here Maps’ JavaScript SDK, an NX Monorepo solution was implemented. This allowed both applications to coexist while sharing all pre-designed components as external libraries, ensuring design consistency across both platforms.

Technologies


 Vue 3, Nuxt 3, NX, TypeScript, Tailwind CSS Implementation Process:
As outlined in the solution, the process began by designing components based on the client’s Figma prototype. When the second app was required, the NX Monorepo architecture was adopted. Both applications were integrated into the monorepo, and shared code (e.g., components, styles) was refactored into reusable libraries accessible to both projects.


Results & Client Benefits


 The solutions delivered two visually consistent applications, reinforcing Vlue’s corporate identity. The first app streamlined the support team’s driver verification process, improving both functionality and user experience for a task previously deemed tedious. The second app provided businesses with a platform to partner with Vlue and schedule rides in advance, enhancing operational efficiency.