upstream-twenty/packages/twenty-docs/l/it/developers/contribute/capabilities/frontend-development/folder-architecture-front.mdx

---
title: Architettura delle Cartelle
icon: folder-tree
info: Uno sguardo dettagliato all'architettura delle nostre cartelle
---

In questa guida, esplorerai i dettagli della struttura delle directory del progetto e come contribuisce all'organizzazione e alla manutenibilità di Twenty.

Seguendo questa convenzione di architettura delle cartelle, è più facile trovare i file relativi a funzionalità specifiche e garantire che l'applicazione sia scalabile e manutenibile.

```
front
└───modules
│   └───module1
│   │   └───submodule1
│   └───module2
│   └───ui
│   │   └───display
│   │   └───inputs
│   │   │   └───buttons
│   │   └───...
└───pages
└───...
```

## Pagine

Include i componenti di alto livello definiti dalle rotte dell'applicazione. Importano componenti di livello inferiore dalla cartella modules (vedi dettagli sotto).

## Moduli

Ogni modulo rappresenta una funzionalità o un gruppo di funzionalità, comprendente i suoi componenti specifici, stati e logica operativa.
Dovrebbero tutti seguire la struttura sottostante. Puoi nidificare moduli all'interno di moduli (indicati come sottomoduli) e le stesse regole si applicano.

```
module1
  └───components
  │   └───component1
  │   └───component2
  └───constants
  └───contexts
  └───graphql
  │   └───fragments
  │   └───queries
  │   └───mutations
  └───hooks
  │   └───internal
  └───states
  │   └───selectors
  └───types
  └───utils
```

### Contesti

Un contesto è un modo per passare dati attraverso l'albero dei componenti senza dover trasmettere i props manualmente a ogni livello.

Vedi [React Context](https://react.dev/reference/react#context-hooks) per ulteriori dettagli.

### GraphQL

Include frammenti, query e mutazioni.

Vedi [GraphQL](https://graphql.org/learn/) per ulteriori dettagli.

* Frammenti

Un frammento è un pezzo riutilizzabile di una query, che puoi usare in posti diversi. Usando i frammenti, è più facile evitare la duplicazione di codice.

Vedi [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) per ulteriori dettagli.

* Query

Vedi [GraphQL Queries](https://graphql.org/learn/queries/) per ulteriori dettagli.

* Mutazioni

Vedi [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) per ulteriori dettagli.

### Hook

Vedi [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) per ulteriori dettagli.

### Stati

Contiene la logica di gestione degli stati. [Jotai](https://jotai.org) se ne occupa.

* Selettori: Gli atomi derivati (utilizzando `createAtomSelector`) calcolano valori da altri atomi e vengono memoizzati automaticamente.

La gestione degli stati integrata di React si occupa ancora dello stato all'interno di un componente.

### Utilità

Dovrebbe contenere solo funzioni pure riutilizzabili. In caso contrario, crea hook personalizzati nella cartella `hooks`.

## UI

Contiene tutti i componenti UI riutilizzabili usati nell'applicazione.

Questa cartella può contenere sottocartelle, come `data`, `display`, `feedback` e `input` per tipi specifici di componenti. Ogni componente dovrebbe essere autonomo e riutilizzabile, così da poterlo utilizzare in diverse parti dell'applicazione.

Separando i componenti UI dagli altri componenti nella cartella `modules`, è più facile mantenere un design coerente e apportare modifiche alla UI senza influenzare altre parti (logica di business) del codice.

## Interfaccia e dipendenze

Puoi importare codice di altri moduli da qualsiasi modulo, tranne la cartella `ui`. Questo manterrà il suo codice facile da testare.

### Interni

Ogni parte (hook, stati, ...) di un modulo può avere una cartella `internal`, che contiene le parti utilizzate solo all'interno del modulo.