Progetto Personale · SaaS B2B · Fleet Management · 2024/2025

Viantis logo

FLEET MANAGEMENT
AI-POWERED
Da Zero a SaaS.

Viantis è il progetto che costruisco quando sono il cliente. Ogni decisione di design, dal token più piccolo alla pipeline dati, risponde a una domanda reale: cosa succede quando 142 veicoli comunicano in tempo reale e un algoritmo deve decidere in 80ms?

Design System Real-Time Dashboard Fleet Intelligence PostgreSQL RLS CAN-Bus Telemetry

Scorri per leggere

+4.2%
Veicoli Attivi
142
+8.7%
KM Totali Oggi
8.340
−100%
Fermi Macchina
0
AI
Alert AI Attivi
3

01 · Il Contesto

Il problema
da risolvere.

Le flotte aziendali perdono in media il 23% di efficienza per mancanza di visibilità in tempo reale. I dispatcher lavorano ancora su fogli Excel aggiornati ogni ora. Gli alert arrivano quando il danno è già fatto.

Viantis nasce per ribaltare questo. Non un'app di tracking, ma un sistema operativo per la flotta: AI predittiva, telemetria CAN-Bus, design system enterprise scalabile.

Problema
23%
efficienza persa per visibilità zero
Soluzione
80ms
latenza massima alert AI predittivo
Scala
500+
veicoli simultanei, zero degradazione
Stack
1
designer. Tutto il sistema.

02 · Widget 01 · Dark Theme

Fleet Map
Live City Grid

MapboxGL WebSocket AI Clustering

La mappa non è solo un tracker. È il centro operativo visivo della flotta: cluster AI calcolati in tempo reale, slide-over panel con storico del veicolo, routing predittivo.

Ogni punto sulla mappa è un WebSocket subscription aggiornato ogni 800ms. Il clustering usa DBSCAN con parametri dinamici basati sul traffico stimato dell'ora.

Aggiornamento 800ms
Cluster max 24 veicoli
Slide-over Storico 7gg
Fleet Map
Live · 142 veicoli
● LIVE AI CLUSTER
CLUSTER×8 VAN-014 · Milano Centro Attivo VELOCITÀ 78 km/h ETA 14 min PROSSIMA FERMATA Via Torino 12, Cliente A ALERT ×1 STORICO
18
Rotte attive
4
Cluster AI
82ms
Latenza media

03 · Widget 02 · Light Theme

Performance
Dashboard

React Recharts Supabase RT
Performance Overview
Ultimi 7 giorni
Settimanale
78 km/h avg 0 120
↑ +6.2% vs media
Veicoli attivi
142 +4
Fermi macchina
0 −100%
Alert AI aperti
3 REVIEW
KM percorsi · 7 giorni
L
M
M
G
V
S
D
Aggiornato 2 min fa
Oggi: 8.340 km Media: 7.820 km

Il tema chiaro Modernize entra in gioco nella dashboard operativa giornaliera. Dati chiari su sfondo bianco: il dispatcher legge i KPI in un colpo d'occhio, senza fatica visiva.

Il gauge non è decorativo: mostra la velocità media istantanea come proxy di efficienza. Sotto la soglia? Alert automatico. I 7 giorni servono per riconoscere pattern stagionali.

Tema Modernize Light
Refresh rate 30s auto
Gauge logic Soglia adattiva

04 · Widget 03 · Light Theme

Design Token
System

Figma Tokens Style Dictionary MUI v5

Il Design Token System è la spina dorsale di Viantis. Costruito su tre livelli: Foundation, Primitives, Patterns. Genera automaticamente i token CSS dalla singola fonte di verità in Figma.

Ogni colore, ogni spaziatura, ogni raggio di bordo ha un nome semantico. Il team dev non vede mai un hex code: vede --color-vehicle-active.

Token totali 284
Layers Foundation → Patterns
Dark/Light Switcher istantaneo
Token System
Viantis · v2.4.0
284 tokens Sync Figma
Foundation
primary
success
warning
error
secondary
Primitives
radius.sm
4px
radius.card
12px
space.md
16px
shadow.card
0 4px 20px…
font.mono
Inter
Patterns
chip.primary
Label
card.dark
btn.primary
Action
vehicle.active
#13DEB9
Gerarchia token
Foundation
Primitives
Patterns
Components

05 · Widget 04 · Dark Theme

Engine
Telemetry

CAN-Bus OBD-II TimescaleDB
Engine Telemetry
VAN-014 · CAN-Bus live
● CAN OBD-II
RPM Normal
3.240
max 6.500 rpm
Temp OK
92°C
soglia: 110°C
Carburante 68%
68%
~320 km restanti
CAN-Bus Signal · RPM · Last 30s
6.5k 3.2k 0 CAN-BUS DETERMINISTIC · CONFLICT-FREE · 80ms WINDOW
Freq. campionamento: 10Hz
Conflitti: 0 Frame: 12.4k/s

Il CAN-Bus non perdona. Ogni veicolo trasmette 12.400 frame al secondo. Il sistema deve leggere, validare, escludere i conflitti e scrivere su TimescaleDB: tutto in una finestra di 80ms.

L'algoritmo di conflict-exclusion è deterministico: nessuna ambiguità su quale frame prevalga quando due sensori trasmettono nello stesso slot. Zero undefined behavior in produzione.

Frame rate 12.4k/s
Conflict exclusion Deterministico
Storage TimescaleDB

06 · Widget 05 · Dark Theme

Full-Stack
Pipeline

Next.js PostgreSQL RLS Edge Functions

Cinque layer, un'unica direzione dei dati. Ogni pacchetto che parte da un sensore CAN-Bus percorre la stessa pipeline deterministica: nessuna scorciatoia, nessun bypass.

PostgreSQL RLS garantisce che ogni operatore veda solo la propria flotta. Il conflict exclusion badge non è marketing: è il motivo per cui il sistema funziona anche con 500 veicoli simultanei.

Data isolation PostgreSQL RLS
Conflict exclusion Deterministico
Latency P99 <80ms
Data Pipeline
5 stage · Full-stack
● All systems OK
01 CAN-Bus Sensor Input 12.4k f/s 02 Edge Fn Validation <2ms 03 RLS LAYER PostgreSQL Row Security ⚿ CONFLICT EXCL. 04 API Layer REST+WS Next.js RT 05 Dashboard UI Modernize DS React + MUI v1.4.2-beta · RLS enforced · conflict-free exclusion
Tech Stack
Next.js 14 TypeScript PostgreSQL 15 Supabase RLS Edge Functions TimescaleDB WebSockets Modernize DS

07 · Quello che ho imparato

Costruire Viantis
da soli.

Design System First

Costruire i token prima dei componenti ha salvato settimane. Ogni decisione di colore o spaziatura presa una sola volta, propagata ovunque automaticamente.

Latency è UX

80ms non è un requisito tecnico: è la differenza tra "il sistema risponde" e "il sistema si anticipa". Ogni millisecondo in più è fiducia persa.

Security by Design

RLS non è un layer da aggiungere dopo. Va progettato nel modello dati dal giorno 0. Retrofittarlo su un sistema esistente costa dieci volte di più.

Hai un progetto simile?
Parliamone.

Che si tratti di un fleet SaaS, un design system da zero o un'architettura dati complessa: porto ordine nel caos.

Scrivimi Altri Case Study