Skip to main content
FLEET MANAGEMENT & IOT VISUALIZATION

ENGINEERING A RESPONSIVE FLEET ORCHESTRATION INTERFACE

Bridging the gap between complex fleet data and intuitive user experience through adaptive UI architectures.

01
Engine systems
01
Data systems
04
Interface systems
staging.ujrah.io/en
01 — Overview

The problem worth engineering

Ujrah represents a shift in how fleet management systems are visualized. The challenge was to present high-density technical data (IoT sensors, TGA compliance, operational metrics) in an accessible, engaging format.

I engineered a 'Dual-Mode Layout Engine' where complex visualizations like the 'Smart Solutions Circle' use trigonometric positioning on desktop but transform into touch-optimized grids on mobile. The Hero section features a custom 'connector' animation engine that physically draws lines from the central infrastructure to feature cards, visualizing the platform's connectivity.

Performance was critical; I implemented device-aware animation timings (reducing delays by 60% on mobile) to ensure a snappy feel on lower-end devices while preserving the cinematic entrance effects on desktop.

  • Engineered a 'Trigonometric Radial Layout' system: For the Smart Solutions section, I avoided static positioning. Instead, I built a dynamic layout engine that calculates `x = 50 + radius * Math.cos(rad)` and `y`. This allows the ecosystem of 8+ hardware sensors to orbit a central hub perfectly. The system auto-adjusts the `radius` (180px vs 260px) based on viewport analysis.
  • Implemented 'Device-Aware Motion Choreography': In the Hero Section, standard animations felt too slow on mobile. I architected a conditional animation logic: `delay={isMobile ? index * 0.01 : 2 + index * 0.2}` and `duration: isMobile ? 0.2 : 0.5`. This creates a 'cinematic' 2-second staged reveal for desktop users while delivering an instant, high-performance load for mobile users.
  • Developed a 'Responsive Interaction Model' for the Fleet Grid: The Fleet Management section uses a sophisticated 'Hover-to-Reveal' pattern on desktop, where hovering a smooth bento-grid card cross-fades the icon for detailed bullet points. On mobile, this logic is intercepted via CSS media queries (`hidden lg:block`), forcing a 'Always-Visible' state to ensure critical information is accessible without touch interactions.
02 — Deep-Dive Modules

How it was built, system by system

01 / 06
Architected a 'Quadrant-Aware Labeling System'
Core Engine & Business LogicModule 06

Architected a 'Quadrant-Aware Labeling System'

In the radial layout, labels couldn't just sit next to icons; they had to flow outward. I wrote logic to detect the item's quadrant (`angle > 90 && angle < 270`) and dynamically apply CSS transforms (e.g., `translate(-100%, -50%)`) so text always aligns away from the center, maintaining perfect readability.

Core Engine & Business Logic1
Data, State & Performance1
Interface, Motion & Accessibility4

Related Projects

Explore more of my work

smoke
logo

"If Your Dreams do not scare you, they are too small !"

Got a project? Let’s vibe together and
make it ninjaa-precise—get in touch!

Call Me Now !

mail

noordragon2004@gmail.com

address

from egypt,mansoura

phone

+20 1145838187