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: Transportation App

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 and Benefits for the Client:

• Brand Consistency: The implementation of these solutions resulted in two applications with a unified visual identity, reinforcing Vlue’s professional image.
• Operational Efficiency:
  • The first application reduced driver verification time by eliminating manual processes and improving the support team’s experience.
  • The second application enabled companies to schedule recurring trips and manage deliveries.
• Technical Scalability: The use of NX Monorepo and modular components reduced development time for the second application by avoiding code redundancies.