Come ho rilevato la lingua per paese senza selettore manuale: il caso iFace Simulator

Il problema: spiegare modelli di formazione medico-estetica a mercati diversi

iFace produce modelli di formazione fisici e digitali perché i medici possano esercitarsi su procedure estetiche prima di operare. Aveva bisogno di un sito che spiegasse ogni simulatore con chiarezza e funzionasse in più lingue in base al paese del visitatore, senza obbligarlo a scegliere la lingua a mano.

Come si costruisce ogni simulatore: rotte a caricamento differito, senza un registro centrale

Non c'è un array di configurazione che elenca i simulatori disponibili. Ognuno è, letteralmente, una riga di import() differito più una riga di <Route> nel router.

const R1   = lazy(() => import('./components/R1/R1'));
const Lips = lazy(() => import('./components/Lips/Lips'));
const INose = lazy(() => import('./components/INose/INose'));

<Route path="simulators/r1" element={<R1 />} />
<Route path="simulators/lips" element={<Lips />} />
<Route path="simulators/inose" element={<INose />} />
{/* Models */}
<Route path="models/discovery-model" element={<DiscoveryModel />} />

Aggiungere un nuovo simulatore significa aggiungere queste due righe, non modificare un sistema di moduli. È un'architettura semplice finché il numero di simulatori non cresce molto, momento in cui un registro dati varrebbe probabilmente la pena.

Come il sito decide in quale lingua mostrarti il contenuto

Il sito usa i18next con tre pacchetti di traduzione completi: inglese, spagnolo e portoghese. Non c'è italiano, nonostante io lo parli: il prodotto punta specificamente a mercati anglofono, ispanofono e lusofono.

import en from './locales/en/translation.json';
import es from './locales/es/translation.json';
import pt from './locales/pt/translation.json';

const resources = { en: { translation: en }, es: { translation: es }, pt: { translation: pt } };

i18n.use(initReactI18next).init({
  resources,
  lng: 'en',
  fallbackLng: 'en',
});

La decisione su quale lingua mostrare non dipende da un selettore che il visitatore sceglie: un componente geolocalizza l'IP con ipapi.co e la confronta con elenchi di paesi ispanofoni e lusofoni scritti direttamente nel codice. Se il paese coincide, reindirizza a /es o /pt; altrimenti resta su /en.

Non è una piattaforma di simulatori spaziali: è un negozio con un carrello semplice

Ogni prodotto ha un oggetto carrello semplice, con id, nome e prezzo.

{
  cartId: 'r1-simulator',
  cartName: 'R1 Simulator',
  price: 344,
}

Come ho validato questa architettura

Ho eseguito npm run build contro il repository reale (Vite 7, React 19) e ho misurato il risultato invece di descriverlo a memoria.

La build stessa ha segnalato un chunk JavaScript di oltre 500 KB (index-BEfQztCT.js, 560 KB non compresso), qualcosa che vale la pena dividere ulteriormente se il sito continua a crescere.

La lingua di un prodotto la decide il suo mercato, non la biografia di chi lo costruisce.

Il mio ruolo in questo progetto

Il mio ruolo in iFace Simulator ha incluso lo sviluppo del frontend, l'integrazione di Sanity come CMS e la strategia multilingue, come parte del mio lavoro in MANYA Digital.

Cosa farei diversamente: una descrizione pubblica che non corrispondeva al progetto

Prima di scrivere questo articolo, la pagina di questo progetto sul mio sito descriveva una «piattaforma di simulatori spaziali» con una «dashboard di controllo in tempo reale». Rivedendo il repository reale, ho scoperto che si tratta di un sito di marketing ed e-commerce per modelli di formazione medico-estetica, senza dashboard né dati in tempo reale di alcun tipo. Ho già corretto quella descrizione nella pagina del progetto; la documento qui perché è esattamente il tipo di errore che vale la pena ammettere invece di lasciare correre.

Cosa proverei dopo

Verificherei che esista un selettore di lingua manuale visibile per quando la geolocalizzazione sbaglia (per esempio con una VPN), e dividerei il chunk JavaScript di 560 KB segnalato dalla build prima che il sito aggiunga altri simulatori.