Case study · progetto demo
Due attività, un solo sito: ristorante e guest house sotto lo stesso tetto
Una SPA con due identità visive distinte per un ristorante di famiglia e il B&B che ne condivide le mura, con prenotazioni via WhatsApp ed email e senza alcun backend a pagamento.
Il problema
Molte attività a conduzione familiare, specie in località turistiche, non gestiscono un solo servizio ma due legati fra loro — qui un ristorante e un piccolo B&B nello stesso edificio. La scelta tipica è tra due siti separati (doppio costo di sviluppo e manutenzione, nessun rimando naturale fra i due) oppure un unico sito che appiattisce le due identità in un'unica pagina generica, perdendo il tono specifico di ciascuna: la cucina non deve "sembrare" un B&B, e viceversa.
Contesto e vincoli
Progetto demo pensato per dimostrare un vincolo concreto: una sola applicazione deve comportarsi, agli occhi di chi la visita, come due siti coerenti e distinti. Vincoli dichiarati:
- un'unica applicazione, due identità visive complete (palette, font dei titoli, tono delle call to action) che cambiano in base alla sezione visitata, non due siti copiati e incollati;
- nessun backend: le richieste — tavolo o camera — devono arrivare al titolare via WhatsApp o email, senza costi di hosting dinamico o abbonamenti a piattaforme di prenotazione terze;
- il menu di navigazione deve restare completamente operabile da mobile su entrambe le sezioni, senza sparire sotto una certa larghezza senza un sostituto funzionante.
Processo e decisioni
La decisione strutturale è stata costruire un'unica SPA con Vue 3
e Vue Router 4, caricati senza alcuno step di build tramite
importmap direttamente da CDN: nessun npm
install, nessun bundler, pubblicabile caricando i file così
come sono su qualunque hosting statico. Il routing è basato su hash
(createWebHashHistory) proprio per non richiedere
regole di riscrittura lato server.
Per far convivere due brand nella stessa app, un hook
router.afterEach aggiunge o rimuove una classe
bnb-mode sul body in base al percorso
visitato. Due fogli di stile — uno per il ristorante, uno per il
B&B, quest'ultimo interamente scoperto sotto body.bnb-mode
— permettono alla stessa struttura di componenti (header, griglia di
card, footer) di leggersi come due brand distinti: blu profondo e
accenti vino per il ristorante, tono caldo e legno per la guest
house, senza duplicare il markup.
Per le prenotazioni ho scelto di non introdurre alcun backend: il
modulo valida i dati lato client e costruisce un messaggio
precompilato, aperto poi come link wa.me o come
mailto:. Zero costi ricorrenti, attivo da subito — a
fronte di un limite dichiarato apertamente: nessun calendario di
disponibilità in tempo reale, la conferma resta manuale da parte del
titolare. Una scelta di scopo esplicita per un'attività di queste
dimensioni, non una scorciatoia nascosta.
Infine, entrambi gli header usano lo stesso pattern per il menu
mobile: un pulsante hamburger con aria-expanded
collegato a un pannello a tendina ancorato sotto l'header, che si
chiude automaticamente al click su un link. Su schermi stretti il
menu resta un vero pannello raggiungibile, non un elenco di link che
scompare senza lasciare alternative.
Soluzione
Il risultato è un'unica applicazione statica, deployabile come un qualsiasi sito senza server dedicato, che si presenta come due brand coerenti e riconoscibili — e che raccoglie prenotazioni reali senza alcun costo di gestione mensile.
Risultati
Nessuna dipendenza da installare: Vue e Vue Router sono caricati a
runtime da CDN tramite importmap, quindi l'intero
progetto è una cartella di file statici — HTML, CSS e moduli
JavaScript — pubblicabile così com'è, senza pipeline di build da
mantenere nel tempo.
Nota: progetto dimostrativo a scopo di portfolio. Attività, indirizzo e contatti sono fittizi.