---
title: Arquitectura de Directoris
info: Una mirada detallada a la nostra arquitectura de directoris
image: /images/user-guide/fields/field.png
---
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.