Architettura del Progetto - lucadileo9/template-catalog GitHub Wiki

Panoramica

Il progetto Γ¨ organizzato in modo modulare per supportare la creazione e la gestione di template indipendenti (es. siti per pizzerie, centri estetici, ecc.). Ogni template Γ¨ autosufficiente e contiene le sue risorse specifiche, mentre alcune risorse sono condivise a livello globale per garantire coerenza e riusabilitΓ .

La struttura si divide in due parti principali:

  1. Cartelle Globali: Contengono risorse condivise tra tutti i template, come componenti ShadCN, utility globali e configurazioni.
    • app/: Cartella principale dell'app Next.js, gestisce il routing e le pagine globali.
      • page.tsx: Pagina principale del catalogo template.
      • [...slug]/page.tsx: Carica il template richiesto in base al percorso URL.
    • components/: Contiene componenti condivisi tra tutti i template.
    • config/: File di configurazione globale (es. template validi, siti esterni).
    • public/: Contiene risorse statiche globali e sottocartelle per le risorse specifiche di ciascun template.
    • components.json: Configurazione ShadCN per componenti UI globali.
  2. Cartelle dei Template: Contengono risorse specifiche per ciascun template, come pagine, stili e immagini.
    • config.js: Contiene la configurazione del template, inclusi colori, menu items e logo.
    • styles/GlobalStyle.tsx: Gestisce i colori dinamici del template tramite variabili CSS (--primary, --secondary, ecc.).
    • app/layout.tsx: Definisce il layout del template, inclusi header, footer e altre sezioni comuni.
    • app/page.tsx: Pagina principale del template.
    • public/<nome-template>/: Contiene risorse statiche specifiche del template, come immagini o file. SONO NELLA CARTELLA GENERALE

Struttura Dettagliata

└── lucadileo9-template-catalog/
    β”œβ”€β”€ README.md                     # Documentazione generale del progetto.
    β”œβ”€β”€ components.json               # Configurazione ShadCN per componenti UI globali.
    β”œβ”€β”€ next.config.js                # Configurazione di Next.js (alias, immagini).
    β”œβ”€β”€ package.json                  # Dipendenze e script del progetto.
    β”œβ”€β”€ plopfile.js                   # Configurazione Plop per generatori automatici.
    β”œβ”€β”€ postcss.config.js             # Configurazione PostCSS per Tailwind.
    β”œβ”€β”€ tailwind.config.js            # Configurazione di Tailwind CSS.
    β”œβ”€β”€ tsconfig.json                 # Configurazione TypeScript (alias, compilatore).
    β”œβ”€β”€ .eslintrc.json                # Configurazione ESLint per linting.
    β”œβ”€β”€ app/                          # Cartella principale dell'app Next.js.
    β”‚   β”œβ”€β”€ globals.css               # Stili globali con variabili CSS.
    β”‚   β”œβ”€β”€ layout.tsx                # Layout globale dell'app.
    β”‚   β”œβ”€β”€ page.tsx                  # Pagina principale del catalogo template.
    β”‚   β”œβ”€β”€ [...slug]/                # Routing dinamico per i template.
    β”‚   β”‚   └── page.tsx              # Carica il template richiesto.
    β”‚   └── components/               # Componenti locali dell'app.
    β”‚       └── button/               # Esempio di componente locale.
    β”‚           └── index.tsx         # Implementazione del componente.
    β”œβ”€β”€ components/                   # Componenti condivisi tra tutti i template.
    β”‚   β”œβ”€β”€ lib/                      # Funzioni di utilitΓ  globali.
    β”‚   β”‚   └── utils.ts              # Funzioni comuni (es. date, validazioni).
    β”‚   └── ui/                       # Componenti ShadCN globali.
    β”‚       └── button.tsx            # Componente globale ShadCN (es. pulsante).
    β”œβ”€β”€ config/                       # Configurazioni globali.
    β”‚   β”œβ”€β”€ templates.ts              # Array dei template validi (`validTemplates`).
    β”‚   └── external-sites.ts         # File con i siti esterni prodotti.
    β”œβ”€β”€ public/                       # Risorse statiche globali (es. favicon). 
    β”‚   β”œβ”€β”€ estetista/                # Risorse specifiche per il template estetista.
    β”œβ”€β”€ templates/                    # Cartelle dei template indipendenti.
    β”‚   β”œβ”€β”€ estetista-template/       # Template specifico per un centro estetico.
    β”‚      β”œβ”€β”€ config.js              # Configurazione del template (colori, menu, logo).
    β”‚      β”œβ”€β”€ description.md         # Descrizione del template.
    β”‚      β”œβ”€β”€ plopfile.js            # Configurazione locale di Plop (opzionale).
    β”‚      β”œβ”€β”€ app/                   # Pagine e layout del template.
    β”‚      β”‚   β”œβ”€β”€ layout.tsx         # Layout del template.
    β”‚      β”‚   └── page.tsx           # Pagina principale del template.
    β”‚      β”œβ”€β”€ components/            # Componenti locali del template.
    β”‚      β”‚   └── index.ts           # Esportazione centralizzata dei componenti.
    β”‚      └── styles/                # Stili locali del template.
    β”‚          β”œβ”€β”€ globals.css        # Stili globali del template.
    β”‚          └── GlobalStyle.tsx    # Gestisce i colori dinamici del template.
    └── .plop/                        # Configurazione di Plop per generatori.
        β”œβ”€β”€ generators/               # Generatori di Plop.
        β”‚   β”œβ”€β”€ component.js          # Genera nuovi componenti.
        β”‚   β”œβ”€β”€ route.js              # Genera nuove pagine/routes.
        β”‚   └── template.js           # Genera nuovi template.
        └── templates/                # Template Handlebars per la generazione.
            β”œβ”€β”€ component/            # Template per componenti.
            β”‚   β”œβ”€β”€ component.hbs     # Struttura base del componente.
            β”‚   └── types.hbs         # Tipi TypeScript associati.
            β”œβ”€β”€ route/                # Template per pagine/routes.
            β”‚   └── page.hbs          # Struttura base di una pagina.
            └── template/             # Template per interi template.
                β”œβ”€β”€ config.hbs        # File `config.js`.
                β”œβ”€β”€ description.hbs   # File `description.md`.
                β”œβ”€β”€ footer.hbs        # Componente Footer.
                β”œβ”€β”€ globals-css.hbs   # File `globals.css`.
                β”œβ”€β”€ header.hbs        # Componente Header.
                β”œβ”€β”€ hero.hbs          # Componente Hero.
                β”œβ”€β”€ layout.hbs        # Layout del template.
                β”œβ”€β”€ page.hbs          # Pagina principale del template.
                └── placeholder-image.hbs # Immagine segnaposto.