Case study · Simulazione di prenotazione

03 — 04

AulaBeach

Scegliere una postazione è una questione spaziale, non una lista.

Un’applicazione Laravel per trovare uno stabilimento e simulare una prenotazione. Ricerca, disponibilità per data e fascia oraria, pianta della spiaggia, conferma e annullamento — con il sole che si muove sopra la mappa.

Ruolo
Full Stack Web Developer
Stato
Simulazione di prenotazione
Stack
Laravel · Livewire · Alpine.js · Tailwind CSS · MySQL
Sorgente
Repository privata

01 · Contesto

Una postazione non è un articolo in magazzino.

Uno stabilimento non vende trentasei unità identiche. La disponibilità dipende dalla data, dalla fascia oraria e dalla posizione fisica. La ricerca deve tenere conto di tutti e tre gli elementi prima di mostrare la pianta.

La cattura mostra l’applicazione in esecuzione, senza modifiche.

Cattura del prodotto
Risultati di ricerca AulaBeach con preferenze, filtri e tre stabilimenti con prezzo e valutazione.
Contesto di ricercaLe preferenze guidano la mappa3 stabilimenti · da €22

02 · Direzione

Come vuoi vivere la giornata?

AulaMatch non chiede un voto. Chiede che cosa desideri dalla giornata, poi valuta ogni postazione. Qui, quelle cinque preferenze influenzano direttamente la pianta che trovi più sotto.

1 preferenza ora guida la pianta qui sotto ↓

Cattura del prodotto Le stesse cinque preferenze, nell’applicazione
Il pannello delle preferenze AulaMatch nell’applicazione AulaBeach in esecuzione.

03 · Focus funzionale

La pianta

Vista dall’alto: il mare in cima, la passerella nel mezzo, i servizi in fondo.

Modello interattivo

Fascia oraria

Mezzogiorno · pieno sole

A4 m

B12 m

C20 m

D28 m

E36 m

F44 m

36 postazioni · 11 occupate

04 · Esperienza

Tre passaggi e un codice.

La prenotazione non lascia mai la stessa cornice. Postazione, dati, conferma — e l’annullamento resta disponibile fino al giorno prima. Non viene mai effettuato un pagamento reale e il prodotto lo dichiara in ogni schermata.

I dati dimostrativi dall’aspetto personale nella seconda cattura sono mascherati.

Cattura del prodotto Scelta nel modello: — · cattura registrata su A3
Primo passaggio: mappa con data, ospiti, fascia oraria e consigli AulaMatch. Secondo passaggio: nome, email e telefono mascherati con le condizioni della prenotazione dimostrativa. Terzo passaggio: conferma con codice dimostrativo e opzione di annullamento.
01 Postazione · scelta sulla mappa Prenotazione dimostrativa · nessun pagamento reale

05 · Responsive

La pianta resta una pianta.

La griglia 6×6 non diventa una lista sul telefono. Conserva la sua geometria e guadagna una barra persistente con la postazione scelta, così la mappa non deve rinunciare alla sua funzione.

Cattura del prodotto

Catture a 402 × 869. Tre momenti dello stesso percorso.

AulaBeach su telefono: destinazione, data, ospiti e azione di ricerca.
01Ricerca · data e ospiti
AulaBeach su telefono: dettaglio stabilimento, servizi, disponibilità e azione fissa.
02Stabilimento · azione fissa
AulaBeach su telefono: mappa completa sei per sei e barra della postazione scelta.
03Pianta · scelta fissa

06 · Che cosa lo sostiene

Una simulazione, dichiarata.

Disponibilità, punteggio e prenotazione restano separati: le preferenze e l’orario usati da AulaMatch non decidono mai se una postazione è davvero disponibile. Una richiesta attraversa cinque responsabilità, in quest’ordine.

  1. 01 · Ingresso

    Laravel

    Routing, validazione e protezione dimostrativa su ogni scrittura.

  2. 02 · Stato

    Livewire

    Mantiene data, ospiti, fascia oraria e postazione senza ricaricare la pagina.

  3. 03 · Consiglio

    AulaMatchService

    Valuta ogni postazione libera con regole deterministiche e spiegabili.

  4. 04 · Verità

    Disponibilità

    Data e stato della postazione. L’unica responsabilità autorizzata a dire no.

  5. 05 · Esito

    Prenotazione

    Emette il codice e mantiene aperto l’annullamento idoneo fino al giorno prima.

Repository
Privata. Codice disponibile su richiesta.
Che cosa è reale
Ogni cattura proviene dall’applicazione in esecuzione; sono mascherati solo i campi demo dall’aspetto personale. Distanze, prezzi, stati e regole di punteggio corrispondono al codice.
Che cosa è ricostruito
La pianta editoriale, il sole in movimento, l’inclinazione e l’istantanea fissa di 11 postazioni occupate sono costruiti per questo case study e non scrivono dati nel prodotto.
Progetto successivo · 04 Virginia