---
title: Arquitectura de Directoris
info: Una mirada detallada a la nostra arquitectura de directoris
image: /images/user-guide/fields/field.png
---

<Frame>
  <img src="/images/user-guide/fields/field.png" alt="Header" />
</Frame>

En aquesta guia, exploraràs els detalls de l'estructura del directori del projecte i com contribueix a l'organització i mantenibilitat de Twenty.

Mitjançant aquesta convenció d'arquitectura de directoris, és més fàcil trobar els fitxers relacionats amb funcions específiques i assegurar-se que l'aplicació sigui escalable i fàcil de mantenir.

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

## Pàgines

Inclou els components de nivell superior definits per les rutes de l'aplicació. Importen components de nivell més baix de la carpeta de mòduls (més detalls a continuació).

## Mòduls

Cada mòdul representa una funció o un grup de funcions, comprenent els seus components específics, estats i lògica operativa.
Tots haurien de seguir l'estructura següent. Pots acoblar mòduls dins de mòduls (anomenats submòduls) i s'aplicaran les mateixes regles.

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

### Contextos

Un context és una manera de passar dades a través de l'arbre de components sense haver de passar atributs manualment a cada nivell.

Consulta [React Context](https://react.dev/reference/react#context-hooks) per a més detalls.

### GraphQL

Inclou fragments, consultes i mutacions.

Consulta [GraphQL](https://graphql.org/learn/) per a més detalls.

- Fragments

Un fragment és una peça reutilitzable d'una consulta, que pots utilitzar en diferents llocs. Mitjançant fragments, és més fàcil evitar duplicar codi.

Consulta [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) per a més detalls.

- Consultes

Consulta [GraphQL Queries](https://graphql.org/learn/queries/) per a més detalls.

- Mutacions

Consulta [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) per a més detalls.

### Hooks

Consulta [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) per a més detalls.

### Estats

Conté la lògica de gestió dels estats. [RecoilJS](https://recoiljs.org) s'encarrega d'això.

- Selectors: Consulta [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) per a més detalls.

La gestió d'estat integrada de React encara gestiona l'estat dins d'un component.

### Utils

Hauria de contenir només funcions pures reutilitzables. En cas contrari, crea hooks personalitzats dins la carpeta "hooks".

## Interfície d'usuari

Conté tots els components d'interfície d'usuari reutilitzables utilitzats en l'aplicació.

Aquesta carpeta pot contenir subcarpetes, com ara "data", "display", "feedback" i "input" per a tipus específics de components. Cada component hauria de ser autònom i reutilitzable, de manera que es pugui utilitzar en diverses parts de l'aplicació.

Separant els components d'UI dels altres components de la carpeta "modules", és més fàcil mantenir un disseny consistent i fer canvis a la UI sense afectar altres parts (lògica de negoci) del codi base.

## Interfície i dependències

Es pot importar el codi d'altres mòduls excepte la carpeta "ui". Això mantindrà el seu codi fàcil de provar.

### Intern

Cada part (hooks, estats, ...) d'un mòdul pot tenir una carpeta "intern", que conté parts que només s'utilitzen dins del mòdul.
