---
title: Map Architectuur
info: Een gedetailleerd overzicht van onze maparchitectuur
image: /images/user-guide/fields/field.png
---

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

In deze gids verkent u de details van de projectmapstructuur en hoe deze bijdraagt aan de organisatie en onderhoudbaarheid van Twenty.

Door deze maparchitectuurconventie te volgen, is het gemakkelijker om bestanden die met specifieke functies te maken hebben te vinden en te zorgen dat de applicatie schaalbaar en onderhoudbaar is.

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

## Pagina's

Includes the top-level components defined by the application routes. Zij importeren meer low-level componenten uit de modules map (meer details hieronder).

## Modules

Each module represents a feature or a group of feature, comprising its specific components, states, and operational logic.
Ze moeten allemaal de onderstaande structuur volgen. Je kunt modules nestelen binnen modules (vermeld als submodules) en dezelfde regels zijn van toepassing.

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

### Contexten

Een context is een manier om gegevens door de componentenboom door te geven zonder op elke niveau props handmatig door te moeten geven.

Zie [React Context](https://react.dev/reference/react#context-hooks) voor meer details.

### GraphQL

Omvat fragmenten, queries en mutaties.

Zie [GraphQL](https://graphql.org/learn/) voor meer details.

- Fragmenten

Een fragment is een herbruikbaar stuk van een query, dat je op verschillende plaatsen kunt gebruiken. Door gebruik te maken van fragmenten is het gemakkelijker om het dupliceren van code te vermijden.

Zie [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) voor meer details.

- Queries

Zie [GraphQL Queries](https://graphql.org/learn/queries/) voor meer details.

- Mutaties

Zie [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) voor meer details.

### Hooks

Zie [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) voor meer details.

### Staten

Contains the state management logic. [RecoilJS](https://recoiljs.org) doet dit.

- Selectors: Zie [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) voor meer details.

React's ingebouwde statusbeheer beheert nog steeds de toestand binnen een component.

### Utils

Dit moet alleen herbruikbare pure functies bevatten. Anders, maak aangepaste hooks in de `hooks` map aan.

## UI

Bevat alle herbruikbare UI componenten die in de applicatie worden gebruikt.

Deze map kan submappen bevatten, zoals `data`, `weergave`, `feedback` en `invoer` voor specifieke soorten componenten. Elke component moet zelfstandig en herbruikbaar zijn, zodat je deze in verschillende delen van de applicatie kunt gebruiken.

Door de UI componenten te scheiden van de andere componenten in de `modules` map, is het gemakkelijker om een consistent ontwerp te behouden en wijzigingen aan te brengen aan de UI zonder andere delen (de bedrijfslogica) van de codebasis te beïnvloeden.

## Interface en afhankelijkheden

You can import other module code from any module except for the `ui` folder. Dit zal ervoor zorgen dat de code gemakkelijk te testen blijft.

### Intern

Elk onderdeel (hooks, staten, ...) van een module kan een `intern` map hebben, die onderdelen bevat die alleen binnen de module gebruikt worden.
