⚠️ WARNING: Outdated Guide ⚠️

Attention users and contributors,

This guide is outdated and may contain obsolete information. Exercise caution when using it. I am working on updates.

Thank you

Frontend React application architecture

Key concepts and glossary

Before starting over to get to know the project you need to check out the definitions of main concepts and technical structure that must be strictly followed to keep the project organized.

Directory structure

• build - generated sources ready for deployment
• scripts - helper scripts (translation generation, init, etc.)
• src - main development code subdirectories:
  • assets - font, icon and image resources (not directly used in code, but needed for development)
  • components - represents all reusable pieces in project ( button, event, etc. )
  • config - main(default) config file(s)
  • connection - websocket connection files
  • constants - constant definitions
  • helpers - the space for functions and code blocks that can be reused through the entire project subdirectories:
    • hooks - all hooks
    • other files and folders - some helper functions
  • pages - In this context pages represent routes (/live, /user, /dashboard etc.)
  • sections - Section can both be and not be a big part of pages but can contain components
  • skeletons - Loader animation
  • skin - a specific partner's website.
  • store - contains redux toolkit actions, reducers and selectors (both sync and async)
  • styles - all project styles

Component structure

Each component is a directory with the following files:

• index.js - file containing component definition and main code.
• componentName.test.js - file containing component test.

Build process

CRA/VITE

Running tasks

npm or yarn can be used to run tasks from package.json the following tasks are available:

• start - starts development localhost
• test - starts all components test
• init - generate html files
• build - start build for production
• download-translations-mobile - downloads skin translation json files from translation tool.

###Code Style

1. • Order of internal imports and libraries
2. • Code structure of react components

I. Order of internal imports and libraries When we import libraries or internal modules it is important to maintain clear structure and ordering. Code style requirements

• Firstly it is required to import external libraries
  • Import react at first
  • The rest imports must be ordered by the length of the lines in ascending order (from short to long)
• After scripting external imports insert an empty line
• Internal modules must be in the following order:
  • Configs
  • Constants
  • Helpers
  • Stores
  • Skeletons
  • Pages
  • Sections
  • Components
• relative imports ( before add empty line )
  • Imports with related paths
• Styles imports ( before add empty line )
  • Styles

NOTE: All above-mentioned import groups must be ordered by length of line in ascending order (from short to long).

II. Code structure of react components This part defines the correct body structure of react components. These points are essential for keeping code clean and readable. Code style requirements

• Code blocks must be in following order
  • Start with styling scripts if they have no dependency with variables
    • In case there is a dependency with variables use styles by necessity
  • Write all external methods ( useDispatch, useHistory etc. )
  • Selectors
  • Use state
  • Hook
  • Other variables
  • Render UI
• Insert an empty line before return in function
• If the rendering component depends on condition then it must not be scripted with the ternary method but with IF logic instead.

NOTE: Between all above-mentioned blocks there must be empty lines. Please keep the principle of ordering by length from short to long through all cases.