---
title: Folder Architecture
info: A detailed look into our folder architecture
image: /images/user-guide/fields/field.png
---

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

Σε αυτόν τον οδηγό, θα εξερευνήσετε τις λεπτομέρειες της δομής καταλόγου του έργου και πώς συμβάλλει στην οργάνωση και διατηρησιμότητα του Twenty.

By following this folder architecture convention, it's easier to find the files related to specific features and ensure that the application is scalable and maintainable.

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

## Σελίδες

Περιλαμβάνει τα ανώτατου επιπέδου εξαρτήματα που ορίζονται από τις διαδρομές της εφαρμογής. Εισάγουν περισσότερα χαμηλού επιπέδου εξαρτήματα από τον φάκελο modules (λεπτομέρειες παρακάτω).

## Μονάδες

Κάθε μονάδα αντιπροσωπεύει ένα χαρακτηριστικό ή μια ομάδα χαρακτηριστικών, που περιλαμβάνει τα συγκεκριμένα εξαρτήματα, καταστάσεις και λογική λειτουργίας.
Όλες θα πρέπει να ακολουθούν τη δομή παρακάτω. Μπορείτε να ενσωματώσετε μονάδες μέσα σε μονάδες (αναφερόμενες ως υπομονάδες) και θα ισχύουν οι ίδιες κανόνες.

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

### Περιβάλλοντα

Ένα περιβάλλον είναι ένας τρόπος να μεταφέρετε δεδομένα μέσω του δένδρου εξαρτημάτων χωρίς να πρέπει να περάσετε props χειροκίνητα σε κάθε επίπεδο.

Δείτε [React Context](https://react.dev/reference/react#context-hooks) για περισσότερες λεπτομέρειες.

### GraphQL

Περιλαμβάνει fragments, queries, και mutations.

Δείτε [GraphQL](https://graphql.org/learn/) για περισσότερες λεπτομέρειες.

- Fragments

Ένα fragment είναι ένα επαναχρησιμοποιήσιμο κομμάτι ενός query, το οποίο μπορείτε να χρησιμοποιήσετε σε διάφορα μέρη. Χρησιμοποιώντας fragments, είναι πιο εύκολο να αποφύγετε την επανάληψη κώδικα.

Δείτε [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) για περισσότερες λεπτομέρειες.

- Queries

Δείτε [GraphQL Queries](https://graphql.org/learn/queries/) για περισσότερες λεπτομέρειες.

- Mutations

Δείτε [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) για περισσότερες λεπτομέρειες.

### Hooks

Δείτε [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) για περισσότερες λεπτομέρειες.

### Καταστάσεις

Περιέχει τη λογική διαχείρισης καταστάσεων. Το [RecoilJS](https://recoiljs.org) χειρίζεται αυτό.

- Επιλογείς: Δείτε [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) για περισσότερες λεπτομέρειες.

Η ενσωματωμένη διαχείριση καταστάσεων του React εξακολουθεί να χειρίζεται την κατάσταση μέσα σε ένα εξάρτημα.

### Εργαλεία

Πρέπει να περιέχει μόνο επαναχρησιμοποιήσιμες καθαρές συναρτήσεις. Διαφορετικά, δημιουργήστε προσαρμοσμένα hooks στον φάκελο `hooks`.

## Ενδιάμεσο Περιβάλλον Χρήσης

Περιέχει όλα τα επαναχρησιμοποιήσιμα εξαρτήματα διεπαφής χρήσης στην εφαρμογή.

Αυτός ο φάκελος μπορεί να περιέχει υποφακέλους, όπως το `data`, `display`, `feedback`, και `input` για συγκεκριμένους τύπους εξαρτημάτων. Κάθε εξάρτημα πρέπει να είναι αυτοτελές και επαναχρησιμοποιήσιμο, έτσι ώστε να μπορείτε να το χρησιμοποιήσετε σε διαφορετικά μέρη της εφαρμογής.

Χωρίζοντας τα εξαρτήματα διεπαφής χρήσης από τα άλλα εξαρτήματα στον φάκελο `modules`, είναι πιο εύκολο να διατηρείτε μια συνεπή σχεδίαση και να πραγματοποιείτε αλλαγές στη διεπαφή χρήσης χωρίς να επηρεάζετε άλλα μέρη (επιχειρησιακή λογική) του κώδικα.

## Διασύνδεση και εξαρτησίες

Μπορείτε να εισάγετε κώδικα άλλης μονάδας από οποιαδήποτε μονάδα εκτός από τον φάκελο `ui`. Αυτό θα κρατήσει τον κώδικα εύκολο στη δοκιμή.

### Εσωτερικό

Κάθε μέρος (hooks, states, ...) μιας μονάδας μπορεί να έχει έναν φάκελο `internal`, ο οποίος περιέχει μέρη που χρησιμοποιούνται μόνο μέσα στη μονάδα.
