This appropriation is intended to cover the expenditure incurred in support of the implementation of the programme.

Viantis logo

FLEET MANAGEMENT
AI-POWERED
From zero to SaaS.

Viantis is the project I build when I'm a client. Every design decision, from the smallest token to the data pipeline, answers a real question: What happens when 142 vehicles communicate in real time and an algorithm has to decide in 80ms?

Design system Real-time dashboard Fleet Intelligence The following information shall be provided: Can-Bus Telemetry

Scroll to read

+4.2%
Active vehicles
142
+8.7%
KM Total today
8.340
−100%
Stop the car
0
AI
Alert to the Active
3

01 · The context

The problem
to solve.

Business fleets lose on average 23% of their efficiency due to lack of real-time visibility. Dispatchers are still working on updated Excel sheets every hour. Alerts arrive when the damage is already done.

You're born to overturn this. Not a tracking app, but an operating system for the fleet: predictive AI, CAN-Bus telemetry, scalable enterprise design system.

The problem
23%
Efficiency lost by zero visibility
Solution
80ms
Maximum alert latency for predictive AI
Scale
500+
simultaneous vehicles, zero degradation
Stack
1
designer. The whole system.

This is the first time I've seen this.

Fleet Map
Live City Grid

MapboxGL WebSocket Clustering

The map is not just a tracker. It's the visual operating center of the fleet: real-time AI clusters, slide-over panels with vehicle history, predictive routing.

Every dot on the map is a WebSocket subscription updated every 800ms. Clustering uses DBSCAN with dynamic parameters based on estimated hourly traffic.

Update 800ms
Cluster max 24 vehicles
Slide-over Historical 7gg
Fleet Map
142 vehicles
● LIVE In the Cluster
Clusters × 8 This appropriation is intended to cover expenditure relating to: Active Velocity The following conditions shall apply: ETA 14 minutes NEXT STOP Via Turin 12, client A Alert ×1 HISTORY
18
Flat-rolled products of iron or steel
4
Clusters
82ms
Average latency

03 · Widget 02 · Light Theme

Performance
Dashboard

React Recharts Sub-base RT
Performance overview
Last 7 days
weekly
78 The following conditions shall be fulfilled: 0 120
↑ +6.2% vs average
Vehicles in operation
142 +4
Stop the car .
0 −100%
Alert to open
3 Reviewed
KM routes · 7 days
I
M
M
G
V
S
D
Updated two minutes ago
Today: 8,340 km Average: 7,820 km

The clear Modernize theme comes into play in the daily operating dashboard. Clear data on a white background: the dispatcher reads the KPIs at a glance, without visual difficulty.

The gauge is not decorative: it shows the instantaneous average speed as an efficiency proxy. Under the threshold? Automated warning. Seven days is enough time to recognize seasonal patterns.

Subject Modernizing Light
Refresh rates 30s car
Gauge logic Adjustable threshold

04 · Widget 03 · Light Theme

Design Token
System

Other financial assets Style Dictionary MUI v5

The Design Token System is the backbone of Viantis. Built on three levels: Foundation, Primitives, Patterns. It automatically generates CSS tokens from the single source of truth in Figma.

Every color, every spacing, every beam on board has a semantic name. The dev team never sees a hex code: it sees --color-vehicle-active.

Total of tokens 284
Layers Foundation → Patterns
The following information shall be provided: Instantaneous switch
The following is a list of commonly used names:
This is the first time that this has happened.
284 tokens Sync Figma
The Foundation
Primary
Success
warning
error
secondary
Primitives
Radius.sm
4px and 4px
radius.card
Other information:
the space.md
The following is the list of official languages:
shadow.card
It's not even close.
font.mono
Inter
Patterns
The following is the list of products used:
Label
Card.dark
Primary
Action
vehicle.active
#13DEB9
The following is the list of tokens
The Foundation
Primitives
Patterns
Components

This is the first time I've seen this.

Engine
Telemetry

Can-Bus The OBD-II TimescaleDB
Engine telemetry
Can-Bus live
Can The OBD-II
RPM The normal
3.240
Max of 6,500 rpm
Temp Okay, what's up?
92°C
the threshold: 110°C
Fuel 68%
68%
~320 km remaining
Can-Bus Signal · RPM · Last 30s
6.5k 3.2k 0 This is the most common type of vehicle.
Sampling frequency: 10Hz
Conflict: 0 Frame: 12.4k/s

The CAN-Bus does not forgive. Each vehicle transmits 12,400 frames per second. The system must read, validate, exclude conflicts and write to TimescaleDB - all in an 80ms window.

The conflict-exclusion algorithm is deterministic: no ambiguity about which frame prevails when two sensors transmit in the same slot. Zero undefined behavior in production.

Frame rate The following conditions shall apply:
Conflict exclusion Deterministic
Storage TimescaleDB

# # # # # # # # # # # #

Full-Stack
Pipeline

Next.js PostgreSQL RLS Edge functions

Five layers, one data direction. Every packet that starts from a CAN-Bus sensor goes through the same deterministic pipeline: no shortcuts, no bypasses.

PostgreSQL RLS ensures that each operator only sees its own fleet. The conflict exclusion badge is not marketing, which is why the system works even with 500 vehicles simultaneously.

Date of isolation The following information shall be provided:
Conflict exclusion Deterministic
The following information shall be provided: <80ms
Date pipeline
Stage 5 · Full stack
● All systems OK
01 Can-Bus Input sensor The following information shall be provided: 02 Edge Fn Validation <2ms 03 RLS LAYER PostgreSQL Security Row ⚿ CONFLICT EXCL. 04 Layer of API REST+WS Next.js RT 05 The user interface dashboard Modernised DS React + MUI v1.4.2-beta · RLS enforced · conflict-free exclusion
Tech Stack
Next.js 14 TypeScript PostgreSQL 15 RLS sub-base Edge functions TimescaleDB WebSockets Modernised DS

What I Learned

Building Viantis
on my own.

Design system first

Building the tokens before the components saved weeks. Any one-time color or spacing decision, automatically spread everywhere.

Latency is UX.

80ms is not a technical requirement: it's the difference between "the system responds" and "the system anticipates". Every extra millisecond is a loss of trust.

Security by Design

RLS is not a layer to be added later. It must be designed in the data model from day 0. It costs ten times more to reuse it on an existing system.

Do you have a similar plan?
Let's have a little chat.

Whether it's a SaaS fleet, a design system from scratch or a complex data architecture, I bring order to the chaos.

Get in touch Other case studies