Frontend

Get started

npm install
npm start

Expo iOS or Android

Architecture

Workflow

• App.ts Application entry point
• src/components
  • UI Kit
  • Components that will be used across the apps (web/native)
  • Should be abstract as much as possible
• src/store
  • Redux store configuration
• src/sagas
  • Redux store configuration
    • combineSagas.ts - combine all saga file (you have to add all watchSaga functions here)
    • sagas.ts - main redux-saga fetch configuration
• src/actions
  • actions.ts - add all action types (you have to add all action types)
• src/reducers
  • reducers.ts - add all reducers (you have to add all reducers)
• src/screens
  • Main screens
• src/utils
  • Standalone reusable pieces of code

Component folder structure

• Container.tsx - connects Component with redux, define which state, action you want to use in Component
• Component.tsx - Main TSX body of component, if you want to use translations ->use withTranslation()(Component) and pass WithTranslation prop to function.
• _actions.tsx - Define component actions - define request, success, error params in <any, any, any>
• _reducers.tsx - reducer of component
• _sagas.tsx - define API request calls
• _styles.tsx - Component styling

Navigation outside Component - without access to props (_sagat.ts)

import { navigate } from '../../utils/navigationService';
...
yield navigate(Routes.CatchScreen);
...

Redux Devtools Extentsion

• Download Redux Devtools Extentsion https://github.com/zalmoxisus/redux-devtools-extension
• Open Devtools - ctrl+M, specify port
• Run expo app

Libs used

• TypeScript
  • Typed superset of JavaScript
  • Compile time type checking
• React
• React Native
• React Native Elements
  • UI Kit
  • Reusable across native and web
• React Navigation
  • Routing
• MobX
  • State management
• Expo
  • Tools for building universal apps in React Native

Automatic code formatting

npm run prettier-watch

Lint and typescript hints

npm run eslint:watch

Run automated tests (jest)

npm run test

Run continuous automated tests (jest)

npm run test:watch