Fleet Companion
2021
2 weeks
Frontend Development
Building the Fleet Companion UI with React Native
We’ve all seen those clunky, gray and blue enterprise apps that look like they were designed in 2005. They’re functional, sure, but they’re a nightmare to navigate. When I set out to build the Fleet Companion mobile app, my goal was simple: take a complex logistics problem and wrap it in a UI that actually feels good to use.
The Problem: Information Overload
Fleet management is chaotic. Drivers need to know three things instantly:
Where am I going?
What am I carrying?
When does it need to be there?
Most existing solutions cram this into tiny tables. Fleet Companion was designed to solve this by using a "Card-First" architecture, giving drivers high glanceability and reducing cognitive load while they’re on the move.
The Tech Stack:
Since this project focused on delivering a high-fidelity UI, the choice of tools was critical.
React Native: The obvious choice for cross-platform performance while maintaining a native look and feel.
NativeWind: Used to keep styles organized and ensure that "Pixel Perfect" wasn't just a buzzword.
Figma: Our "Source of Truth" for every margin, padding, and hex code.
Case Study:
The real challenge wasn't just making it look like the design it was making it feel like the design.
The Translation Process
I treated the Figma file as a blueprint. Every component, from the Delivery Progress Bar to the Vehicle Status Badge, was built as a reusable atomic unit. This meant that when I needed to change a primary brand color, I did it in one place, and the entire app followed suit.Tackling the Map Overlay
One of the trickiest parts of the UI was the "Bottom Sheet" interaction. In logistics apps, you often need to see the map and the delivery details simultaneously. I implemented a gesture-sensitive bottom sheet that allows drivers to swipe up for a full manifest or swipe down to see their route.Responsive vs. Adaptive
A "pixel-perfect" UI on an iPhone 15 Pro can look like a disaster on a budget Android device. I used a combination of percentage based layouts and PixelRatio adjustments to ensure the fleet cards felt consistent, regardless of the hardware.
The "Oh No" Moment
Halfway through the build, I realized the custom fonts from Figma weren’t rendering correctly on Android, they were getting clipped at the bottom of the buttons. It’s the kind of tiny detail that drives a developer crazy. After two hours of tweaking lineHeight and includeFontPadding: false, I finally got that perfect vertical alignment. It was a small win, but it’s the difference between a "good" app and a "polished" one.
Final Thoughts:
What’s Next? Right now, Fleet Companion is a beautiful shell a high-fidelity UI ready for a backend. The next step is hooking this up to a real-time WebSocket or Firebase stream to move those truck icons across the map in real-time. Building this taught me that "UI only" doesn't mean "easy." Translating a designer's vision into a living, breathing application requires a obsessive attention to detail and a lot of patience with Flexbox. Key Takeaway: Don't just build the design. Build the intent behind the design. Every margin exists for a reason usually to make the user's life a little easier.
