Project File Structure

Description of the folders structure

The main folders of the projects are:

• LinkerStudio: This folder contains most of the framework implementation and it is subdivided into two key folders:

  • Core

  • Modules

• src: This folder contains main code from where the LinkerStudio navigation, screens, functionality will be called to be displayed in the app.

Base Folder Structure

This is the main structure of each module folder that implements a functionality, including core and src folders:

|-/components
    |- atoms
    |- molecules
    |- organisms
    |- templates
|-/constants
|-/hooks
|-/localization
|-/navigation
|-/redux
|-/services
|-/utils

A module can go without creating each folder listed above. For example, if a module doesn't use API calls, then the services folder doesn't need to be created.

Core Folder

This folder contains the basic core UI components and elements that are commonly used independently of the app that will be created. Also, this core components will be reused in the different modules' implementation.

Core folder structure is the same presented above, but it also contains a themes folder to manage the Figma theme tokens.

|-/core
    |-/components
    |-/constants
    |-/hooks
    |-/localization
    |-/navigation
    |-/redux
    |-/services
    |-/themes
    |-/utils

A module could have folders that are specific to its implementation.

Here's a brief explanation of what you can find in each folder in the core module.

• Components: Contains the folders for each component following the atomic design used in the project.

• Constants: All constants used in the project, to follow a guideline these, are exported in uppercase letters.

• Hooks: Here we can find the hooks that can be used for functionalities in the application.

• Navigation: Here goes everything that has to do with navigation.

• Redux: The folders of each data section of the app, slice and thunk are set up in the Redux folder.

• Services: A file is declared for each service data type. Here you can find an example service file to see how to use the baseApiClient service that is also included in this folder

• Themes: It contains the Light, Dark and General tokens used in the project for font size, font type, font weight, colors, etc.

• Utils: Here goes the storing reusable methods and logic’s like validations, responsiveness, date formats, storage, etc.

Modules Folder

This folder contains the sub folders of the different modules included in the project. These modules could be authentication, aggregators, etc.

Each module folder should contain the logic, UI components and (optionally) the templates used in that module.

If the module will implement different third party services libraries, the recommended structure is:

|-/modulename
    |-/common
        ...Base Folder Structure
    |-/thirdservicename1
        ...Base Folder Structure
    |-/thirdservicename2
        ...Base Folder Structure

The common folder will contain the common functionality that will be the same independently of the third party service that will be used at the end. And, usually, this common folder will contain the outputs that can be implemented from this specific module.

If a module doesn't need different third party services, then the folder structure will be:

|-/modulename
    ...Base Folder Structure