pimi-connect-app

Project structure

We use a feature-based approach in our project so we keep all files related to a specific feature close to each other

We keep tests close to the tested files

• /components - global reusable components in a whole app

• /features - ready to use application features that work independently from each other

• /screens - screens of the application (same as views in a web)

• /controllers - api connection functions

• /types - global typescript types

• /utils - helper functions that are reusable in a whole app

• /hooks - global custom hooks reusable in a whole app

! All tests, styling files, feature-specific hooks, utils, etc. should be stored directly in the feature itself !

Styling

File style.ts contains all the global styling that is being used in the app (flex, grid, variables, etc.)

You should declare all reusable stylings there

Theming

Example of how do we declare colors for different themes

Example of how do we use themes in component

Form

When we want to create a form, we use an external library called react-hook-form

If you are new to react-hook-form library then we recommend you create your form along with documentation: https://react-hook-form.com/get-started

ESlint

When pushing the branch to the remote repo there shouldn't be any eslint error as well as warning

To sort imports:

Translations

Structure

To add a new translation file

• create file in /public/locales/pl and every other language folder
• import it to the typescript declaration file and add it to the resources as shown below - /src/types/i18next.d.ts:

Recommended way of translationing

• Import { t } from 'i18-next';
• const { t } = useTranslation('common');, where common is the name of the file from which we want to get a translation (namespace)
• use translated text in the app - t('Hello', {ns: 'common'}) - where Hello is the translated text and common is the name of the file (if we have imported only one namepsace then it can be skipped)

Start development

• Clone repository

git clone https://github.com/grupadotnet/pimi-connect-app.git

• Make sure u have yarn installed (or even node)

To install node: https://nodejs.org/en/download

To install yarn (in any terminal):

npm install -G yarn

• Install required dependencies

In a project main directory:

yarn

• start app

yarn start

In the end, your terminal should look like this