LizaAlert (frontend)

Платформа для обучения добровольцев "ЛизаАлерт" - frontend

Полезные ссылки:

Notion

Макет

Стайлгайд

Стек:

• React v17
• TypeScript v4.9
• react-router-dom v6
• Redux Toolkit
• Axios
• Formik & Yup
• SCSS module
• Docker & Nginx

Инструкции по запуску dev-режима

Версия Node.js должна быть не менее v16. На время установки пакетов рекомендуется отключить антивирус, чтобы корректно поставился и инициализировался lefthook

1. Установить зависимости командой:

npm ci

Пакеты поставятся на основе дерева в package-lock.json.

В дальнейшем в PR не должно быть изменений package-lock.json за исключением тех случаев, когда нужно поставить в проект новый пакет или обновить зависимости.

2. После успешной установки зависимостей создать файл .env.development, скопировать в него переменные из .env.example и обновить в соответствии с текущими доменами/IP бекенда

После этого можно писать код и коммитить.

Запуск базовой версии

npm run start

Запуск версии с моковыми данными

Необходимо, если бекенд не готов или упал. Чаще всего разработка ведется в mock-режиме.

npm run start:mock

Приложение откроется по адресу http://localhost:3000/

Где брать задачи

Раньше задачи заводились через Github issue, теперь задачи заводятся в Linear. Для получения доступов обращаться к наставнику.

Чтобы интеграция и трекинг задач работали корректно, мы указываем номер или id задачи в названии ветки, коммита и в заголовке PR.

Файловая структура:

Приложение построено на основе атомарного дизайна. Распределение по директориям:

• components/atoms: простые компоненты, из которых строятся более сложные компоненты. Не могут включать в себя другие атомы
• components/molecules: состоят из атомов и представляют собой цельный полезный элемент. Могут включать простую логику
• components/organisms: сочетания молекул, существующих вместе. Также могут включать в себя другие организмы и атомы
• components/templates: разметка. В разметке не может быть бизнес-логики и состояния
• api: файлы запросов к API, модели API и моковые данные
• assets: изображения, шрифты и иконки
• config: конфигурационные файлы проекта
• hooks: кастомные реакт-хуки
• lib: самописные библиотеки
• pages: конечная точка роутера, финальный рендер целой страницы
• router: роутер проекта
• store: файлы по работе с глобальным стором
• styles: глобальные стили и переменные
• types: файлы с глобальными и конфигурационными типами
• utils: утилитарные простые функции и глобальные константы

Работа с git:

1. Участник клонирует проект
2. Устанавливает зависимости по инструкции
3. Создаёт ветку с нужным префиксом (см. ниже)
4. Комитит изменения, в начале названия комита пишет номер задачи который он решает: со знака # для Github issue ИЛИ MIL- TR- (в зависимости от префикса команды) для задач из Linear и короткого описания на английском языке в kebab-case:

Github: #21-create-button-component,

Linear: MIL-1-create-button-component или TR-1-create-button-component

5. По окончании работы над задачей делает Pull Request. Заголовок PR должен быть по шаблону Номер задачи (MIL-1, TR-1): название задачи, описание тоже заполнить по шаблону (подтягивается автоматически)
6. После оформления Pull Request в GitHub запускаются автотесты. Если после проверки тестами рядом с PR есть красный крестик, значит код в PR невалидный. Смотрим тесты, ищем причину, по которой они не прошли, исправляем, снова комитим в ту же ветку, пока не появится зелёная галочка
7. После этого проходит ревью. Обязательны апрувы от наставника и elaineir
8. Если Pull Request прошел ревью, elaineir делает squash коммитов и мерджит в master-ветку
9. Самостоятельно PR не мерджим, в master не пушим

Префиксы веток:

• feature: разработка фичи, доработки
• hotfix: исправление ошибок, багов
• docs: изменения в документации

Пример именования ветки: feature/MIL-1

• feature - префикс
• MIL-1 - номер (из Linear) или id (Github issue) задачи

Если задача не заведена, то вид ветки следующий: feature/create-button-component. Вместо id или номера задачи добавить короткое описание.

Если есть какие-то вопросы по проекту, его структуре, пишите elaineir в телеграм, ссылка есть в профиле.

Чеклист перед сдачей на ревью:

• Все пункты стайлгайда
• Не допускать ошибок в консоли
• Использовать миксины и scss - переменные
• Использовать готовые компоненты, следить за изменениями проекта
• Осуществлять реэкспорт компонентов и модулей через файлы index.ts в папке компонента или модуля
• Выносить объявление функций, не зависящих от пропов, вне компонента
• Обновлять стейт с учётом последнего состояния
• Выносить “магические значения” в константы
• Удалять обработчики при размонтировании компонентов, следить за утечками памяти