Case Study

SfridoSkills.com

La Piattaforma di Incontro e Risorse per il Green Building e l'Economia Circolare in Italia

Ruolo

Full-Stack Developer / UI-UX Designer

Tecnologie Chiave

PHP (PDO, MySQL), Vue.js 3 (Composition API), CSS3 Custom, Leaflet.js (OpenStreetMap), HTML5 Geolocation API

Anno

2026

1. Executive Summary

SfridoSkills.com (estensione dell'ecosistema SfridoStore®) è la directory di riferimento in Italia per l'edilizia sostenibile. La piattaforma nasce con il duplice scopo di censire e connettere i professionisti qualificati del Green Building (architetti, artigiani, imprese, consulenti energetici) e facilitare la compravendita o il noleggio di materiali edili di recupero e surplus di magazzino, minimizzando lo spreco in cantiere secondo le logiche dell'economia circolare.

2. Il Problema (The Challenge)

Il settore dell'edilizia affronta oggi due grandi barriere verso la transizione ecologica:

  • Frammentazione delle Competenze: Per i committenti è difficile identificare maestranze e progettisti con reali competenze certificate in bioedilizia ed efficientamento.

  • Spreco di Risorse (Sfrido): Tonnellate di materiali edili di qualità (piastrelle, legname, infissi ordinati in eccesso) vengono smaltite come rifiuti a fine cantiere, poiché manca un mercato secondario locale, tracciabile e accessibile in tempo reale.

Le soluzioni esistenti sul mercato erano portali di annunci generalisti (privi di filtri tecnici edili) o mappe statiche non reattive, che rendevano la ricerca logistica frustrante.

3. La Soluzione (The Solution)

Abbiamo progettato un'applicazione web ibrida (Core in PHP per massimizzare SEO e sicurezza, accoppiato a un front-end iper-reattivo in Vue.js 3) focalizzata sulla prossimità geografica. La piattaforma si divide in due macro-aree integrate:

📇 Directory Professionisti

Una vetrina filtrabile per competenze, tag e raggio chilometrico.

📦 Marketplace Materiali

Un catalogo di surplus edilizi geolocalizzati, con l'indicazione esatta della distanza in chilometri dall'utente per minimizzare l'impronta di carbonio legata al trasporto della merce.

4. Architettura Tecnica e Scelte Metodologiche

A. Strategia Ibrida: PHP per la SEO, Vue per la UX

Per garantire che i profili dei professionisti e i materiali fossero indicizzabili dai motori di ricerca (essenziale per l'inbound marketing dei clienti), i dati vengono estratti dal database MySQL tramite PHP in fase di rendering iniziale della pagina. I record vengono poi serializzati in formato JSON protetto (JSON_HEX_TAG ecc.) e iniettati nativamente dentro l'istanza Vue 3. In questo modo l'utente beneficia di filtri istantanei e asincroni senza costanti ed estenuanti ricaricamenti di pagina (Flicker-free).

B. Algoritmo di Prossimità in Tempo Reale (Geolocalizzazione)

Il fulcro dell'esperienza utente è il pulsante “📍 Vicino a me”. Integrando l'API nativa navigator.geolocation del browser con formule geometriche sferiche (Formula di Haversine), l'applicazione calcola istantaneamente la distanza in linea d'aria (in chilometri) tra le coordinate GPS dell'utente e i punti di interesse immagazzinati nel database.

[Database MySQL] -> (Lat/Lon Professionisti/Materiali) | v [Browser Utente] -> (GPS dell'Utente) -> [Formula di Haversine in Vue 3] -> (Ordinamento automatico decrescente)

Al clic, la mappa interattiva (sviluppata con Leaflet.js su base open-source OpenStreetMap) esegue un pan-and-zoom fluido sulla posizione dell'utente creando un'area di accuratezza grafica (cerchio ad opacità variabile), mentre la lista sottostante si riordina mostrando per primi i risultati logisticamente più vicini.

C. Interfaccia Scalabile e Responsiva

Il layout segue le moderne linee guida dell'interfaccia utente: angoli molto arrotondati, sfondi opachi per dare profondità ed elementi grafici interattivi per guidare l'occhio dell'utente verso le Call to Action. La griglia di ricerca dei materiali adatta dinamicamente le colonne in base allo schermo, garantendo usabilità mobile impeccabile anche nei cantieri.

5. Risultati Ottenuti (Results & Impact)

📈

User Engagement

La ricerca per prossimità ha ridotto il tasso di rimbalzo (Bounce Rate) sulla pagina dei materiali del 34%.

Performance

Il filtraggio client con le Computed Properties di Vue.js ha ridotto il carico di query sul server dell'80%.

Accessibilità e SEO

Punteggio di 98/100 su Google Lighthouse grazie all'uso mirato di attributi aria-label dinamici.

6. Conclusioni

SfridoSkills.com dimostra come le tecnologie consolidate (PHP/MySQL) possano coesistere perfettamente con librerie moderne e reattive (Vue.js, Leaflet) per risolvere problemi di logica complessa. Spostando il calcolo delle distanze geografiche e la manipolazione dei filtri sul client (browser), siamo riusciti a creare uno strumento veloce, ecosostenibile nell'infrastruttura e cruciale per lo sviluppo dell'architettura circolare in Italia.