Progetto “Metal Works” — Sito + Shop in LocalStorage
Un progetto grezzo, personale e spontaneo — il primo vero sito che ho costruito all’inizio del mio percorso. Realizzato usando Bootstrap, HTML, CSS e JavaScript puro, senza framework. Un piccolo laboratorio dove ho iniziato a sperimentare con layout, componenti, card, sezioni eventi… e soprattutto con uno shop funzionante basato interamente su localStorage.
Obiettivo
L’obiettivo non era creare un prodotto perfetto, ma iniziare a costruire qualcosa di mio. Un sito “tema metal” con look ruvido e minimale, utile per fare pratica con:
• Bootstrap
• layout responsive base
• struttura a sezioni
• prime interazioni JavaScript
• un piccolo sistema e-commerce senza backend
Tutto ciò che oggi so fare meglio è partito da qui.
Funzionalità Principali
- ✔ Sito home con stile metal, cards eventi e sezione info.
- ✔ Prime basi di responsive design con Bootstrap.
- ✔ Sezione contatti semplice e diretta.
- ✔ Shop completo simulato: gestione prodotti, card dinamiche, pulsante acquisto, anteprima prodotti.
- ✔ Carrello persistente tramite LocalStorage: il contenuto rimane anche dopo il refresh.
- ✔ Filtri, categorie e selezione prodotti realizzati in JavaScript puro.
- ✔ Esperimento reale tipo e-commerce senza backend.
Lo Shop
Lo shop è la parte più interessante del progetto. È stato costruito interamente in JavaScript, leggendo un array di prodotti e creando le card dinamicamente. Ogni azione dell’utente — selezionare categorie, filtrare articoli o aggiungere prodotti — aggiorna in tempo reale la vista e il contenuto del carrello, salvato in localStorage.
Anche se semplice, questo shop rappresenta il mio primo approccio a concetti fondamentali:
- • Gestione dello stato (simulata con localStorage).
- • Filtri basati su categorie.
- • Rendering dinamico delle card prodotto.
- • Aggiornamento del carrello in tempo reale.
- • Persistenza dei dati tra refresh.
- • Struttura base da cui nasce ogni vero e-commerce.
È un progetto grezzo, ma “vivo”: clicchi, filtri, ordini, aggiorni, ricarichi… e tutto continua a funzionare. È qui che ho davvero iniziato a pensare come uno sviluppatore.
Screenshot Home Page
Approfondimento Tecnico
Tecnicamente il progetto è semplice, ma ha insegnato molto:
- • Uso di Bootstrap come primo approccio al responsive design.
- • JavaScript puro senza librerie o framework.
- • Carrello gestito al 100% lato client.
- • Categorie e filtri con funzioni modulari.
- • Persistenza tramite localStorage.
- • Prime logiche di separazione tra dati e interfaccia.
Questo progetto è la fotografia perfetta dell’inizio del mio percorso: poche competenze, tanta voglia di fare, e un risultato che — pur grezzo — ha gettato le basi per tutto ciò che è arrivato dopo.