Approfondimento Tecnico — Progetto “Artitam”

Panoramica tecnica del sito monopagina dedicato a un artigiano che si occupa di ristrutturazioni interne, cartongesso, bagni, imbiancature e lavori di rifinitura. Il progetto integra una galleria fotografica automatica, un’architettura React modulare e un flusso di aggiornamento realizzato tramite automazioni esterne.

Obiettivo tecnico del progetto

Il sito è nato con un obiettivo preciso: fornire all'artigiano uno strumento semplice, moderno e facilmente aggiornabile per mostrare i lavori eseguiti.

Data la quantità di foto che genera durante i cantieri e la necessità di aggiornare la gallery senza conoscenze tecniche, la scelta migliore è stata:
automatizzare il caricamento delle immagini e separare completamente la logica dalla gestione dei file.

Il risultato è un sito leggero, reattivo, scalabile e già pronto per essere migrato da Altervista a Vercel.

Architettura React

Il progetto è stato sviluppato come single-page applicationin React, suddivisa in sezioni indipendenti:

Ogni blocco è un componente isolato, facilmente aggiornabile senza toccare l’intera struttura. La gallery non utilizza immagini inserite a mano. Un workflow esterno (Google Drive → Google Apps Script → GitHub) aggiorna automaticamente la lista delle foto. Ogni volta che l’artigiano carica nuove immagini su Drive, lo script le legge e aggiorna il repository con il nuovo set. Il componente React importa direttamente la lista aggiornata e rigenera la gallery senza intervento manuale.

Galleria fotografica automatica

La parte più avanzata del progetto è il sistema di caricamento automatico delle immagini. L'artigiano carica le foto su Google Drive, e un sistema esterno (Google Apps Script) gestisce:

Il risultato: nessun intervento manuale per aggiornare il sito. Appena l'artigiano invia nuove foto, la pagina si aggiorna da sola.

Snippet del componente Gallery

// Import delle immagini generate automaticamente
import images from "../data/gallery.json";

export default function Gallery() {
  return (
    <div className="grid md:grid-cols-3 gap-4">
      {images.map((src, i) => (
        <img
          key={i}
          src={src}
          className="rounded-xl shadow-[0_0_8px_#39FF1440]"
          alt="Lavoro realizzato"
        />
      ))}
    </div>
  );
}

Hosting attuale e migrazione su Vercel

La demo del sito è attualmente ospitata su Altervista, scelta effettuata per permettere al cliente di visualizzare rapidamente la struttura e a me di testare la gallery automatica.

Tuttavia, il progetto è già pronto per essere migrato su Vercel, dove beneficerà di:

La migrazione avverrà non appena il cliente approverà la versione finale dello stile grafico e fornirà il materiale fotografico definitivo.

SEO locale e struttura contenuti

Il progetto integra una SEO on-page pensata appositamente per attività artigiane locali. Sono state curate:

Collaborazione Social

Parallelamente allo sviluppo del sito, è iniziata una collaborazione per la gestione del comparto social. Il materiale fotografico e video raccolto per i cantieri verrà utilizzato non solo per i post e i reel, ma anche per alimentare la galleria del sito e rafforzare la presenza online dell'artigiano con una strategia coerente.

Evoluzioni tecniche previste

Con la consegna del materiale fotografico definitivo e la scelta dello stile grafico, il progetto prevede una serie di miglioramenti tecnici pensati per rendere il sito più veloce, completo e professionale.

← Torna alla pagina del progetto