Barbershop è un progetto indipendente dedicato alla realizzazione di un sito web per barbershop sviluppato interamente in codice, sia nella parte visibile agli utenti sia nell’area gestionale riservata al barbiere.
Il progetto unisce un sito di presentazione in stile barberia tradizionale a un sistema completo per la prenotazione degli appuntamenti. Inoltre, il backend permette di consultare clienti e prenotazioni, modificare i servizi disponibili e aggiornare direttamente i contenuti informativi mostrati nel frontend.
Ho sviluppato l’intera struttura con HTML, CSS, JavaScript, AJAX e PHP. Di conseguenza, ogni componente del sito, dal layout pubblico alla dashboard amministrativa, segue una logica costruita specificamente per il progetto.
Dal punto di vista grafico, ho scelto uno stile old barber basato su marrone, nero e bianco sporco. Immagini, tipografia, pulsanti e componenti riprendono quindi l’atmosfera delle barberie classiche, mantenendo però una navigazione moderna e responsive.
Il Progetto Barbershop
- Settore: barbershop e cura della persona
- Tipologia: sito web custom con area pubblica e gestionale
- Sviluppo: frontend e backend realizzati in codice
- Funzione principale: prenotazione online degli appuntamenti
- Area utenti: login, scelta del servizio, data e orario
- Area amministrativa: appuntamenti, clienti, servizi e comunicazioni
- Tecnologie: HTML, CSS, JavaScript, AJAX e PHP
- Stile grafico: old barber con tonalità marroni, nere e bianco sporco
L’obiettivo era costruire una soluzione capace di gestire l’intero percorso del cliente. Infatti, il sito non doveva limitarsi a presentare la barberia e i relativi servizi, ma doveva permettere anche di prenotare un appuntamento senza utilizzare piattaforme esterne.
Allo stesso tempo, il barbiere doveva poter controllare il lavoro quotidiano attraverso un’area riservata semplice da consultare.
Un Sito Sviluppato Interamente in Codice
Ho sviluppato sia il frontend sia il backend senza utilizzare WordPress, page builder o temi preconfezionati.
Questa scelta mi ha permesso di controllare direttamente:
- struttura delle pagine;
- grafica e responsive design;
- accesso degli utenti;
- flusso della prenotazione;
- disponibilità di giorni e orari;
- gestione dei servizi;
- messaggi informativi;
- elenco dei clienti;
- dashboard amministrativa;
- risposte dei form AJAX.
Inoltre, ogni funzione comunica con le altre parti del sistema. Quando il barbiere modifica un servizio nell’area amministrativa, per esempio, il sito aggiorna automaticamente nome, descrizione, prezzo e informazioni mostrate agli utenti.
Design Old Barber
La grafica riprende l’immaginario delle barberie classiche attraverso tonalità marroni, nere e bianco sporco.
Per ottenere questo risultato ho lavorato su:
- palette cromatica;
- tipografia;
- immagini a tema barberia;
- sfondi e texture;
- bordi e componenti grafici;
- pulsanti;
- schede dei servizi;
- moduli di prenotazione;
- dashboard riservata.
Tuttavia, lo stile vintage non compromette l’usabilità. Al contrario, la struttura mantiene una gerarchia chiara e permette all’utente di individuare rapidamente servizi, prezzi e pulsante per la prenotazione.
Hero e Call to Action per la Prenotazione
La hero introduce immediatamente l’atmosfera del progetto e presenta il principale invito all’azione.
Il pulsante dedicato alla prenotazione accompagna l’utente verso il percorso riservato. Quindi, dopo il clic, il cliente può accedere oppure effettuare il login e iniziare la scelta del servizio.
La parte iniziale comunica:
- identità della barberia;
- stile del progetto;
- tipologia dei servizi;
- possibilità di prenotare online;
- accesso alle principali sezioni.
Servizi e Listino Prezzi
La sezione dei servizi presenta i trattamenti disponibili attraverso schede coordinate con il design generale.
Ogni servizio può includere:
- nome del trattamento;
- descrizione;
- prezzo;
- durata prevista;
- collegamento alla prenotazione.
Inoltre, ho organizzato un listino prezzi facilmente consultabile. L’utente può quindi confrontare le diverse opzioni prima di iniziare la prenotazione.
Gestione Dinamica dei Servizi
Il barbiere può modificare i servizi direttamente dall’area amministrativa.
In particolare, il backend permette di aggiornare:
- nome del servizio;
- descrizione;
- prezzo;
- durata;
- disponibilità nel sistema di prenotazione.
Dopo il salvataggio, il frontend mostra automaticamente i nuovi dati. In questo modo, il gestore non deve intervenire manualmente nel codice ogni volta che cambia un prezzo o aggiunge un trattamento.
Area di Login per Cliente e Barbiere
Il progetto prevede accessi distinti in base al tipo di utente.
Il cliente utilizza il login per prenotare e accedere alle funzioni previste dal proprio profilo. Il barbiere, invece, entra nell’area amministrativa e raggiunge gli strumenti di gestione.
La separazione degli accessi permette quindi di mostrare a ogni utente soltanto le funzioni necessarie.
Sistema di Prenotazione Integrato
Il sistema di prenotazione rappresenta la funzione centrale del progetto.
Dopo aver selezionato il pulsante “Prendi un appuntamento”, l’utente accede al proprio profilo e inizia un percorso guidato.
La procedura comprende:
- accesso o autenticazione;
- scelta del servizio;
- visualizzazione del prezzo;
- visualizzazione della durata;
- selezione del giorno disponibile;
- scelta dell’orario;
- conferma dell’appuntamento.
Inoltre, il sistema mostra soltanto le disponibilità realmente selezionabili. Di conseguenza, l’utente non deve contattare il barbiere per verificare manualmente giorni e orari.
Scelta del Servizio
Durante la prima fase della prenotazione, il cliente visualizza l’elenco dei servizi disponibili.
Ogni opzione mostra le informazioni necessarie per compiere una scelta consapevole:
- nome del trattamento;
- descrizione sintetica;
- prezzo;
- durata prevista.
Dopo la selezione, il sistema utilizza anche la durata del servizio per organizzare correttamente le disponibilità successive.
Giorni e Orari Disponibili
Dopo aver scelto il trattamento, l’utente può consultare i giorni disponibili.
Una volta selezionato il giorno, il sistema mostra gli orari ancora liberi.
Questo flusso rende il processo semplice e progressivo. Prima si sceglie il servizio, quindi il giorno e infine l’orario.
Form con Invio AJAX
I moduli presenti nel sito utilizzano AJAX per trasmettere i dati senza ricaricare completamente la pagina.
Il sistema permette di:
- controllare i campi richiesti;
- inviare i dati in modo asincrono;
- mostrare messaggi di errore;
- confermare l’operazione;
- mantenere l’utente nella stessa sezione.
JavaScript gestisce l’interazione nel browser, mentre AJAX comunica con il backend PHP. Successivamente, il sistema restituisce una risposta comprensibile all’utente.
Dashboard Amministrativa del Barbiere
Il barbiere accede a una dashboard riservata dalla quale può controllare le principali attività.
La dashboard riunisce in un unico ambiente:
- appuntamenti programmati;
- elenco dei clienti;
- dati delle prenotazioni;
- servizi disponibili;
- prezzi e durata dei trattamenti;
- messaggi informativi;
- strumenti di modifica.
Di conseguenza, il barbiere può controllare il lavoro quotidiano senza accedere a sezioni scollegate o utilizzare applicazioni esterne.
Gestione degli Appuntamenti
La dashboard permette di consultare la lista degli appuntamenti e le relative informazioni.
Per ogni prenotazione, il barbiere può verificare:
- cliente;
- servizio scelto;
- giorno;
- orario;
- durata;
- informazioni collegate all’appuntamento.
Inoltre, l’area gestionale consente di modificare i dati previsti dal sistema. In questo modo, il barbiere può mantenere aggiornata la pianificazione anche quando intervengono variazioni.
Lista e Gestione dei Clienti
Il backend comprende una sezione dedicata ai clienti registrati.
Il barbiere può consultare l’elenco e accedere alle informazioni associate ai profili. Inoltre, può modificare i dati previsti dalla piattaforma.
La lista clienti permette quindi di:
- identificare gli utenti registrati;
- consultare i dati disponibili;
- collegare i clienti alle prenotazioni;
- aggiornare le informazioni;
- mantenere ordinato l’archivio.
Messaggio Informativo Modificabile
Il sito comprende anche un messaggio informativo aggiornabile dal pannello amministrativo.
Questa funzione permette al barbiere di pubblicare rapidamente comunicazioni come:
- chiusure estive;
- variazioni degli orari;
- giorni di pausa;
- festività;
- informazioni urgenti;
- comunicazioni relative alle prenotazioni.
Dopo la modifica nel backend, il frontend mostra automaticamente il nuovo messaggio. Pertanto, il gestore può aggiornare la comunicazione senza intervenire nel codice della pagina.
Frontend e Backend Collegati
Uno degli aspetti principali del progetto riguarda il collegamento tra il sito pubblico e il pannello gestionale.
Il flusso segue una struttura precisa:
- il barbiere configura i servizi;
- il frontend mostra nomi, descrizioni, prezzi e durata;
- il cliente seleziona il trattamento;
- il sistema propone giorni e orari disponibili;
- l’utente conferma la prenotazione;
- la dashboard registra l’appuntamento;
- il barbiere consulta cliente e servizio scelto.
Inoltre, lo stesso collegamento permette di aggiornare il listino e il messaggio informativo. Di conseguenza, la parte pubblica rimane allineata alle impostazioni definite nell’area amministrativa.
Footer e Chiusura del Percorso
Il footer completa il sito riprendendo colori, tipografia e atmosfera della grafica old barber.
La sezione finale può raccogliere:
- collegamenti di navigazione;
- contatti;
- orari;
- accesso alla prenotazione;
- informazioni utili;
- riferimenti legali.
Esperienza Responsive
Ho sviluppato il sito per adattarsi a desktop, tablet e smartphone.
Durante il lavoro ho controllato:
- ridimensionamento della hero;
- navigazione mobile;
- leggibilità dei servizi;
- consultazione del listino;
- utilizzo del login;
- selezione del servizio;
- calendario delle disponibilità;
- scelta degli orari;
- compilazione dei form;
- consultazione della dashboard.
In particolare, il sistema di prenotazione deve risultare semplice anche da smartphone. Per questo motivo, i passaggi rimangono separati e i pulsanti mantengono dimensioni facilmente utilizzabili.
Un Progetto tra Sito Web e Gestionale
Barbershop non rappresenta soltanto un sito di presentazione.
Il progetto integra infatti:
- design old barber;
- frontend sviluppato in codice;
- backend personalizzato;
- servizi e listino;
- registrazione e login;
- prenotazione online;
- calendario delle disponibilità;
- gestione degli orari;
- dashboard amministrativa;
- lista clienti;
- gestione degli appuntamenti;
- modifica dei servizi;
- messaggi informativi dinamici;
- form AJAX.
Di conseguenza, il progetto unisce presentazione, acquisizione del cliente e organizzazione del lavoro quotidiano.
Tecnologie Utilizzate
- HTML: struttura delle pagine e dei componenti.
- CSS: grafica old barber, responsive design e interfacce.
- JavaScript: interazioni e comportamento dinamico.
- AJAX: invio dei dati e aggiornamenti senza ricaricare le pagine.
- PHP: logica del backend, autenticazione e gestione delle funzioni.
Risultato Finale
Il risultato è un sito web per barbershop sviluppato interamente in codice e completo di area pubblica, sistema di prenotazione e dashboard gestionale.
La grafica old barber crea un’identità forte e riconoscibile, mentre servizi, prezzi e call to action accompagnano il cliente verso la prenotazione.
Inoltre, il sistema permette di selezionare il trattamento, controllare prezzo e durata, scegliere un giorno disponibile e prenotare uno specifico orario.
Dal lato amministrativo, il barbiere può gestire appuntamenti, clienti, servizi e comunicazioni. Infine, il collegamento diretto tra frontend e backend mantiene sempre aggiornate le informazioni mostrate nel sito.
La sezione finale può raccogliere:
- collegamenti di navigazione;
- contatti;
- orari;
- accesso alla prenotazione;
- informazioni utili;
- riferimenti legali.
Esperienza Responsive
Ho sviluppato il sito per adattarsi a desktop, tablet e smartphone.
Durante il lavoro ho controllato:
- ridimensionamento della hero;
- navigazione mobile;
- leggibilità dei servizi;
- consultazione del listino;
- utilizzo del login;
- selezione del servizio;
- calendario delle disponibilità;
- scelta degli orari;
- compilazione dei form;
- consultazione della dashboard.
In particolare, il sistema di prenotazione deve risultare semplice anche da smartphone. Per questo motivo, i passaggi rimangono separati e i pulsanti mantengono dimensioni facilmente utilizzabili.
Un Progetto tra Sito Web e Gestionale
Barbershop non rappresenta soltanto un sito di presentazione.
Il progetto integra infatti:
- design old barber;
- frontend sviluppato in codice;
- backend personalizzato;
- servizi e listino;
- registrazione e login;
- prenotazione online;
- calendario delle disponibilità;
- gestione degli orari;
- dashboard amministrativa;
- lista clienti;
- gestione degli appuntamenti;
- modifica dei servizi;
- messaggi informativi dinamici;
- form AJAX.
Di conseguenza, il progetto unisce presentazione, acquisizione del cliente e organizzazione del lavoro quotidiano.
Tecnologie Utilizzate
- HTML: struttura delle pagine e dei componenti.
- CSS: grafica old barber, responsive design e interfacce.
- JavaScript: interazioni e comportamento dinamico.
- AJAX: invio dei dati e aggiornamenti senza ricaricare le pagine.
- PHP: logica del backend, autenticazione e gestione delle funzioni.
Risultato Finale
Il risultato è un sito web per barbershop sviluppato interamente in codice e completo di area pubblica, sistema di prenotazione e dashboard gestionale.
La grafica old barber crea un’identità forte e riconoscibile, mentre servizi, prezzi e call to action accompagnano il cliente verso la prenotazione.
Inoltre, il sistema permette di selezionare il trattamento, controllare prezzo e durata, scegliere un giorno disponibile e prenotare uno specifico orario.
Dal lato amministrativo, il barbiere può gestire appuntamenti, clienti, servizi e comunicazioni. Infine, il collegamento diretto tra frontend e backend mantiene sempre aggiornate le informazioni mostrate nel sito.
