# Amwork Frontend Onboarding

<br />

### Estimated onboarding time: 32h

<br />

## 0. Изучение принципов функционирования системы, основные модули, конструктор, почта и чат (3h)

- Обзор системы - [Видео](https://youtu.be/4ja2NV0jzi4);

- Миссия и ЦКП (аналогично, нужен доступ) – [Документ](https://docs.google.com/document/d/1Cr4F3NGfqmaKGa1thj6ZEmk3qBEuTAJOpXvTWnHcSHQ/edit#heading=h.583bnomucdu0);

- Должностная инструкция фронтенд-разработчика (аналогично, нужен доступ) – [Документ](https://docs.google.com/document/d/1vyqA7rVTP5lpnFxNiBq40fFU7QkPIz2Cy4GdHHBqW7M/edit#heading=h.1y8n5q2j5rnp);

- Как давать и получать обратную связь – [Документ](https://docs.google.com/document/d/199JyxIyxR32FzkCbMSqdT5UgY8fsNb93KhXXV8SvV5E/edit);

- Глоссарий терминологии – [Документ](https://docs.google.com/document/d/1-F13hYkrgAkKiEF4qiYQN3ewqOpIxxbhIOQAnUkK8h8/edit);

– Правило итеративного рефакторинга – [Статья](https://habr.com/ru/companies/piter/articles/431670/).

- Cоздать несколько новых **секций** в системе, организовать разные **связи**, тонкую настройку;
- Изучить базовые поля карточки сущности, фид, задачи;
- Рассмотреть **раздел настроек**, поменять глобальные настройки аккаунта.

<br />

## 1. Введение, настройка окружения (2h)

- **Клонирование репозитория** с проектом, установка зависимостей:

```bash
# Создание папки проекта
mkdir amwork
cd amwork

# Клонирование репозитория
git clone https://gitlab.amwork.app/amwork/frontend.git .

# Установка зависимостей
npm install
```

- **Запуск проекта**, изучение скриптов в `package.json`:

```bash
# Запуск проекта в режиме development
npm start

# Сборка проекта
npm run build

# Запуск проекта в режиме production
npm run serve

# Запуск линтера
npm run lint

# Компиляция TypeScript
npm run ts

# Запуск Storybook
npm run storybook

# Сборка Storybook
npm run storybook:build
```

<br />

## 2. Storybook, style-guide и документация (6h)

```bash
npm run storybook
```

_Storybook_ будет доступен на – [http://localhost:6006/](http://localhost:6006/).

- Запустить _Storybook_, изучить общие компоненты, разобраться с методами кастомизации этих компонентов посредством пропсов;
- Изучить `Intro.mdx`, выписать вопросы по организации кода, стилей и _git-style_, если не до конца понятно, почему что-то сделано именно таким образом;
- Добавить состояния для _stories_ какого-то из `/Common` компонентов, возможно, написать _stories_ для какого-то из пропущенных компонентов из этой же директории;
- Написать свой компонент, аналогичный `<PrimaryButton />`, но с другими стилями, и добавить его в _Storybook_.

<br />

## 3. Изучение построения директорий, разбивку на модули, названия файлов (2h)

- Посмотреть на **структуру директорий**, разобраться, какие компоненты находятся в каких директориях, какие файлы в них находятся, какие названия файлов используются:

```mathematica
Module
├── components
│   ├── Component.tsx
│   ├── Common
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   └── ...
│
├── pages
│   ├── Page
│   │   ├── hooks
│   │   │   └── usePage.ts
│   │   ├── models
│   │   │   └── DataModel.ts
│   │   ├── helpers
│   │   │   └── helper.ts
│   │   └── ui
│   │       └── PageComponent.tsx
│
├── hooks
│   └── useHook.ts
│
├── models
│   └── Model.ts
│
└── helpers
    └── helper.ts
```

- Изучить **нейминги** файлов и структурных компонентов (например, что оберточные компоненты содержат в себе слово `Wrapper`, а корневой компонент в файле всегда называется `Root`).

<br />

## 4. Изучение организации роутинга (2h)

- Посмотреть, по какому принципу организован **роутинг** на фронте, `<AppRouter />`, `routes`;
- Изучить **глобальные** `HOC` (`withPage`, `withAuth` и т.д.).

<br />

## 5. Изучение моделей (InputModel, SelectModel, MultiselectModel и т.д.) (4h)

- Понять, в чем смысл их использовать. Рассмотреть принимающие их компоненты;
- Разобраться с **валидацией** форм;
- Разобраться с базовым использованием форм (`useLocalObservable`, `validateForm`).

Компоненты, на которые стоит обратить внимание – `<MySelect />`, `<MyInput />` и другие из директории `/Forms`.

<br />

## 6. Изучение работы с данными, api service, MobX stores, Tanstack Query (8h)

- Изучить _api-service_, организацию классов с методами запроса эндпоинтов, `BaseApi`;
- Изучить базовую концепцию организации _MobX stores_;
- Изучить документацию _Tanstack Query_, базовые хуки, понять, когда мы используем этот подход, а когда нужно вести работу через _store_;
- Изучить работу с асинхронными данными в компонентах и работу глобальных _store_.

<br />

## 7. Изучение работы c assets, Figma (3h)

- Рассмотреть устройство макетов в _Figma_, понять, каким образом мы оттуда вытаскиваем разные виды _assets_;
- Изучить глобальные стили, глобальные `css` переменные;
- Изучить работу с `svg` и `png` файлами, отличие `src/assets` от `/public`.

<br />

## 8. Введение в лэндинг (4h)

- Изучение нейминга `scss` классов, базовых компонентов, типографии;
- Понять, как организован **каркас** страницы;
- Изучение работы с `@media` запросами, `scss` переменными, миксинами;
- Понять, как организована работа с **изображениями**.

<br />

## 9. Общие вопросы по системе, консультации по работе с проектом (4h)
