> For the complete documentation index, see [llms.txt](https://razortheory.gitbook.io/unicef-project-connect/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://razortheory.gitbook.io/unicef-project-connect/technical-documentation/frontend/structure.md).

# Application Structure

This application is based on [Project connect Frontend Template App](https://unicef.visualstudio.com/_git/OI-Connect). 

### Files Structure

{% tabs %}
{% tab title="application\_root/:" %}
I\
\- `.storybook/` \
\- `src/` \
        I\
        \- `@/` \
        \- `__mocks__/` \
        \- `api/` \
        \- `assets/` \
        \- `core/` \
        \- `lib/`\
        \- `stories/` \
        \- `ui/`

\
\- `webpack/`

\- `package.json` \
\- ...Other configuration files
{% endtab %}
{% endtabs %}

In the application root directory you can find all configuration files for the development and build process. Here you can find configs for code linting, jest config for UI-test tool, and config files for deployment with Docker.  You can find all source files in `src/` directory. `webpack/` directory contains environment configuration and **webpack** configuration files. In the `storybook/` directory you can find **storybook** configuration files.

### Source Directory Structure

{% tabs %}
{% tab title="application\_root/src/:" %}
I\
\- `@/` \
        I\
        \- `country/`\
        \- `dashboard/`\
        \- `history-modal/`\
        \- `map/`\
        \- `popup/`\
        \- `project/`\
        \- `scroll/`\
        \- `sidebar/`\
        \- `week-graph/`\
\- `__mocks__/` \
\- `api/` \
\- `assets/` \
        I\
        \- `fonts/`\
        \- `images/`\
        \- `styles/`\
\- `core/`\
\- `lib/` \
\- `stories/`\
\- `ui/`
{% endtab %}
{% endtabs %}

In `src/` you can find:

1. `@/` directory with application custom components;
2. `__mocks__/` directory with mock files for UI testing;
3. `api/` directory with all application endpoints and request functions, also contains a file with all responces types;
4. `assets/`  directory with fonts, images, and all application styles;
5. `core/` directory with application main elements;
6. `lib/` directory contains custom libraries implementations, helpers and utils;
7. `stories/` directory for storybook files;
8. `ui/`  directory with elements that are used in different pages several times;