Приложение для трейдеров для Деметра.Трейдинг. Трейдеры — продающие кораблями зерно иностранным закупщикам В приложение, трейдеры ведут сделки, соединяют их в заказ по определённым признакам, прикрепляют заказы к короблям для поставки. Акредитируют корабли и контрагентов, заводят задачи по объектам для разных ролей Строили только фронтенд приложение. Команда состояла из пары аналитиков, пары тестироващиков, руководителя проекта и 3-х фронтенд разработчиков, включая меня Стэк приложения: - typescript — типизация - react — рендерер - rect-router v6 — роутер - mobx — стейт менеджер - mobx-state-tree, mobx-utils — тулзы для работы с mobx - antd — библиотека компонентов - vite — сборщик приложения - yarn — пакетный менеджер - tailwind — стили дизайн системы - postcss, css modules — работа со стилями - jest — написание тестов - stylelint, eslint, prettier, commitlint, husky, lint-staged — линтинг файлов - ahooks — полезные хуки реакта - react-responsive — работа с медиазапросами в react - axios — работа с http - framer-motion — работа с анимацией - i18next — работа с интернационализацией - lodash — хелперы CI/CD - docker - nginx Мои задачи: - Реализация фич и доведение их до релиза вместе с командой - Ведение технической документации - Коучинг и менторинг разработчиков - Контроль качества архитектурных и дизайн решений

Проект Аккую — атомная электростанция строящаяся в Турции Росатомом. Заказчик компания «Консист», она поставляет ПО на станцию и будет использовать системы для других АЭС Наша система состояла из двух подсистем — Автоматизированная система управления документами и Информационная система управления конфигурации. Вкратце, одна управляет жизненным циклом документов, а вторая оцифровка оборудования АЭС и управление их реквизитами. По сути, делали административный портал для делопроизводителей на АЭС На проект пришёл в роли тимлида фронтенд разработки, где была заложена архитектура с микросервисами платформенным и системным архитекторами Первоначальный стэк: - vue-cli - webpack 4 - vue - pinia - single-spa - import-maps Стэк приложения: - vue - pinia - typescript - webpack5 - webpack-module-federation - single-spa - husky, eslint, stylelint, commitlint CI/CD - docker - nginx - traefik - ansible - Gitlab CI Микрофронтенды (далее МФы) были на js и некоторая копипаста с похожего проекта, которую подвергли рефакторингу Я выявил пулл задач, которые мне нужно сделать до старта разработки и задачи на развитие Первые задачи были: 1. Интернационализация. Для английского и турецкого и русского языка 2. Для типизации добавил тайпскрипт 3. Переехал на webpack5, чтобы собирался быстрее и было доступно расширенное api vue-cli и webpack-module-federation 4. webpack-module-federation — для шаринга зависимостей между микрофронтендами и заменой import-maps. С import-maps инстансы pinia, vue висели в объекте window и сторы были доступны из консоли, что было небезопасно, поэтому инстансы переехали в webpack 5. Микрофронтенды не умели между собой общаться и не имели глобальное состояние. Я спроектировал и реализовал взаимодействие между микрофронтендами при помощи pinia и CustomEvents 6. Девопса не было, системный архитектор был нагружен задачами. CI/CD конфиг фронта вынес в отдельный репозиторий и расширял им конфиги микрофронтендов. Сами CI джобы выполнялись с плэйбуками ansible. Настройку окружения микрофронтеда оставил на переменные гитлаба 7. Аналогично поступил с конфигами линтера. Сделал shared eslint и stylelint config и расширял им локальный конфиг микрофронтенда 8. Сделал отдельную служебную библиотеку с компонентами по Atomic design, для будущей дизайн системы (её не было), доменными аннотациями — базовые предметно ориентированные сущности или системные аннотации, адаптерами для апи, утилиты работы с апи, общими сторами pinia, базовой конфигурацией сборщиков МФов, скриптами для всякого разного, служебными утилитами. Короче говоря, SDK с Ui-kit 9. Создал в конфлюенсе базу, где описал, как работать с проектом, код стайл, архитектурными принципы и полезные ссылочки для чтения. Эта база хорошо послужила для онбординга новых фронтов. На ревью удобно тыкать пальцем в документ, а не объяснять всё заново🐸 В целях было набрать 8 фронтов в команду, по 4 на каждую подсистему При старте, имел проактивную позицию в формирование релизного и agile процессов. Организовывал встречки, говорил о проблемах, показывал возможные решения в excalidraw и корректировал видение обсуждая проблемы с лидами, системным архитектором и менеджерами У нас были процесс проектирования и планирования. Проектирование — обсуждение проблемных моментов реализации, корректировка дизайна нарисованного аналитиком и требований для разработки. Планирование — оценка задач в человекочасах Во время проектирования, делали упор на обсуждение хороших UX паттернов и UI нарисованного аналитиком. Я предложил сделать гайды по описанию базовых вещей — поведение фильтров, разных кнопок (сохранить, отмена, завершить, назад и тп) в карточках редактирования и прочего. Команде не хватало дизайнера, который создал бы нам дизайн-систему — описал принципы работы системы в отдельном документе, причесал типографику, палитру, икноки и типовые компоненты Ввёл процесс кросс-ревью, где по определённым правилам мы скидывали в одном чате Мерж реквесты с тикетами ревьювили друг друга. В ревью мог принимать любой разработчик. Такой процесс снизил нагрузку на меня и расшарил опыт между всей командой фронтендеров

Содержание: - 🤓 О стэке и приложениях - 🦧 О моих задачах, как тимлида - 🐙 О предметной области - 😎 О достижениях моих и разработки 🤓 О стэке и приложениях Основное приложение маркетплейса (подробности о проекте чуть ниже) реализовано на стэке: - React - Redux - RxJs - Typescript - express, node.js (для SSR) и - react-intl - интернационализация - webpack - eslint - sass, BEM, PostCSS - работа со стилями Для структурирования компонентов применилась идеология Atomic design, синхронизированная с ui-kit от дизайнеров. Для отображения бизнесу, дизайнерам и FE разработчикам типовых компонентов используется Storybook. Проект переезжал при мне на Next.js Второе приложение для операторов, чтобы настраивать контент сайта, со стэком на: - React - Mobx - Typescript - CRA Документы для подписания договоров писали на чистом html Эмейлы присали помощи фреймворка foundation-emails. Эмейлы собирали gulp-ом, внутри сборки встроен был panini js, который реализиует компонентный подход 🦧 Мои задачи, как тимлида 1. Разработка фич: Кроссбраузерная вёрстка под десктоп, мобилку, планшет с проверкой PixelPerfect. Программирование по сценарию бизнес логики с учётом взаимодействия с бэком по RestApi. 2. Помощь по задачам разработчикам. К примеру, трудности работы с гитом, непонимание реализации логики 3. Ревью задач по всем командам. Проверяю код на производительность алгоритмов, ошибки в логике, нарушение архитектурных требований и различных бест практис 4. Прокачка разработчиков в технических и софт скиллах, также улучшение навыков ревьюверов для ускорения процесса ревью. Для этого я активно даю обратную связь лично и в рамках ревью менторю и коучу 5. Мерж задачек. Для упрощения процесса, написал небольшого бота на node.js, который обращается к сервисам Jira, Gitlab, Telegram и Slack через RestaApi, чтобы брать готовые тикеты текущего релиза, рибейзить и мержить Мерж реквесты в гитлабе, закрывать тикеты в Джире и оповещать о процессе в ранее перечисленные месседжеры. Это очень экономит время https://github.com/Wishez/AgroMerger 6. Выпуск релизов и хотфиксов 🐙 О предметной области Поле.рф — это агромаркетплейс для покупки зерна закупщиками у аграриев (фермеры), продажи сельскохозяйственных товаров различными поставщиками для фермеров, поддержка консультированием и финансированием бизнес пользователя для достижения его бизнес целей. Все эти процессы создают сессию. В сессии есть статусная модель, по которой движется процесс. В некоторых статусах, нужно редактировать заказы, показать разницу участникам после редактирования, обмениваться объёмным количеством документов (процесс аккредитировании), подписывать счёт и договор оферты. Помимо бизнес пользователей, есть администраторы маркетплейса, которые могут вмешиваться в процесс сделок, помогая бизнес пользователю от имени бизнес пользователя (имперсонализация). 😎 О достижениях моих и разработки MVP сайта запустили с командой за пол года с начала Февраля (2021) по конец Июля (2021) для регионов Воронежская область и Курская область. Дальше перешли на договор поддержки Time & Material, продолжили расширять и корректировать функциональность платформы. Я подготовил почву front-end проекта для начала разработки — заложил основной стэк, архитектурные концепции AtomicDesign, 7-1 Sass Architecture для общих стилей, разделение доменного слоя и прикладного слоя. доменный слой — работа с сущностями аннотациями тайпскрипта, сервисами и сущностями стейт менеджера. Прикладной слой — сайд эффекты redux-observable и интерфейс. Описал работу с проектом в README.md Общались активно, вместе с РП, с дизайн агентством, которые предоставили UX. Обсуждали с дизайн систему (документированное ими поведение системы, ui-kit, типографика, система отступов, палитра, иконки) Общались с продактами со стороны заказчика, для понимания бизнес процесса и предметной области. Забавный факт: некоторых поставщиков помечают красной меткой, если они плохо себя показали, как бизнес партнёр😄 Собеседовал front-end разработчиков на проект для усиления front-end команды Когда появлялись новые разработчик, давал по максимуму представление о проекте, помогал при надобности, активно ревьювил их код и помогал доработать, если сроки поджимали Старался держать код чистым для более простой поддержки в будущем, но закрывал глаза на некоторые проблемные моменты в угоду скорости, оставляя доработку на будущий техдолг В MVP вошёл следующий функционал: посадочные страницы (главная, минеральные удобрения, продажа урожая, финансирование), имперсонализация, каталог минеральных удобрений, список лотов на продажу урожая, авторизация/регистрация, оформление заказа. В ЛК списки и детали: аккредитаций, заказов на покупку минеральных удобрений, заявок на продажу зерна, мой урожай, чтобы аграрии могли выставлять в список лотов урожай. Также отображение документов пользователя, его информации об организации, чаты, нотификации, адреса складов агрария После MVP У нас начали улучшаться процессы: 1. Каждый разработчик оценивает время на разработку, при необходимости изменяя оценку задачи с комментарием, для выстраевания правильных ожиданий перед продактами 2. Разделились на команды «Инфопортал/Финансирование/Агроподдержка», «Процессы продажи урожая», «Процессы покупки сельхозтоваров» 3. Процесс грумминга, где мы обсуждаем проект собирая скрытые требования для аналитики 4. Декомпозиция задач после грумминга 5. Ретроспектива - говорим о проблемах и пытаемся решить их до следующего ретро 6. Увеличили количество ревьюверов и команду front-end разработчиков. На тот момент 9 разработчиков, из них 4 ревьювера 7. Добавился процесс no_qa для тестирования задачи самим разработчикам, по усмотрению ревьювера, для ускорения процесса выпуска задач и снятие нагрузки с QA 8. Релизы выпускаются тогда, когда есть что выпустить. Бывает 2-3 раза в неделю. 1 раз точно 9. Добавил процесс «Дежурный фронтендер». В день релиза на регресс, идут по 2 разных фронтендера, которые оперативно фиксят баги 10. Каждые 2 недели, собираемся с дизайнерами всем фронтендерским составом и обсуждаем дизайн систему и разные клёвые идеи Расширили функциональность портала: 1. Экспансия в регионы. Добавили 88 регионов России (разрабатывал) 2. Добавили агроконсультирование (ревьювил) 3. Добавили больше категорий в каталог помимо Миниральных удобрений (ревьювил) 4. Сделали инфопортал с публикациями поделёнными на два типа - Новость и Статья. Для контент менеджера добавили возможность управлять публикациями и рубриками на портальной админке (я сделал главную страницу журнала, навигацию по рубрикам, страницу новостей, остальные задачи активно ревьювил и помогал в доработках админки контент менеджера) 5. Переработали и перерабатываем дизайн систему: а. Перерабатываем шрифты. Стандартизируем систменые-атомарные классы типографики б. Дополнили сторибук базывами вещиами. Палитрой, иконками, шрифтами. С учётом динамического изменения при доработке системы в. Делаем сервис для ресазайза, компресса и конвертации картинок в webp на лету, чтобы показывать только качественные лёгкие картинки 6. Делаем тех.долг задачки на рефакторинг, упрощаем сложные решения. К примеру: a. оптимизиравали сервесный слой приложения. Основную работу с restApi вынесли в отдельные сервесные модули; б. переносим в доменный слой аннотации и вещи, которые мало от чего зависят; в. оптимизация загрузки приложения (вес картинок, их ленивая загрузка, вес бандла) и СЕО (дескрипшины, пустые ссылки, проверяем везде ли есть ссылки ведущие на другие страницы); г. перерабатываем старые компоненты, которые стали супер универсальными. Их разделяем на более маленькие и менее ответсвенные; д. переезжаем на Next.js, чтобы отказаться от ручной доработки сборки и оптимизации серверново рендера; 7. Ускорил время сборки CI. Снизил время с 12 минут до 3х перейдя с 4ого на 5й webpack и переработав процесс сборки, в том числе и CI 8. Мултикорзина. Горжусь своими скелетончиками при загрузке и обновление данных😍 9. Мултизаявка и заполнение заявок на продажу зерна по черновикам (ревьювер) 10. Добавляются лэндосы с финансирование партнёров (ревьювер) 11. Размечеваем gtm-событиями разные разделы (разрабатываю и ревьювю)

Разрабатывал интерфейсную часть сайта Tele2, используя стэк React, Redux, RxJs прикрученный к Redux библиотекой redux-observable + серверный рендер на node.js написанный на express. Проект собирался webpack-ом. Для css есть настройка sass с компонентным подходом по BEMу Приложение большое, поэтому команда была разделена на много подкоманд (стримов). Поначалу, мне досталась честь поработать в стриме e-shop - доработка части электронного магазина. Через некоторое время, мигрировал в стрим «SYS», после переименованный в «Site». Все команды работали по своеобразному скраму и аджайлу, управляя всеми тикетами и спринтами, сначала в Jira, потом в Tfs. В них присутствовали, Product owner со стороны заказчика, координатор, который управлял коммуникациями между командой и внешними людьми, бэк-энд, фронт-энд разработчики, тестировщики, автотестировщики. Дизайнеров было 3е на весь проект Миссией стрима «Site», а значит и моей, была: 1. интеграция сторонних сервисов. К примеру: госуслуги, теле2pay 2. Дизайн долг: редизайн страниц и редизайн ui кита 3. Доработка и разработка частей сайта: профиль, главная, шапка, футер, инфопортал, журнал, мия «умный помощник» и прочего 4. Техдолг задачи. Рефакторинг, обновление библиотек для улучшения dev experience 5. Разметка событиями аналитики действий пользователя Мне досталась честь переехать с 15ого на 16й React, обновить версии redux, react-redux, rxjs и сделать лениво подгружаемые редусеры при загрузке лэзи компонентов Иногда меня подключали к сторонним от стрима активности. К примеру, я сделал MVP для маркета, который в данный момент выглядит так https://msk.tele2.ru/stock-exchange/internet Одной из запоминающихся задач стала разработка смены номера. Там был барабан с номерами, который нужно было крутить, как в казино:)) Интересно было разрабатывать такой «рандомайзер» В стриме было 2 фронтенд разработчика, включая меня. Мы отдавали друг другу задачи на код ревью и поверх наших комментариев, добавлялись добивающие комментарии нашего тимлида по проекту Становился временным тестировщиком, чтобы разгрести быстрее колонку Ready For Test В простоях задач и на выходных, разрабатывал гос. портал/дэшборда для господина Мишустина. На нём выводились разные графики о статистике ковида, графы национальных целей и прочее. Система была написана на React, Redux, с прикрученным Typescript-ом. Первой задачей вывод иерархии национальных целей с графическом представление библиотекой react-flow. На каждой вершине выводилась красивенько разная информация, можно было на неё нажать и провалиться вниз по дереву, сохраняя историю переходов. После этой задаче, выводил диаграммы: получал данные из metabase и выводил либой react-charts. Самым интересным из диаграмм была работа с geojson — вывод карт с покрытием регионов Также, меня подключали к доработке магазина Phosagro. Это крупный продавец минеральных удобрений. После, на доработку этого портала нашли разработчика, которого я курировал и, в процессе ревью выполненных им задач, обучал. Благодарен всей команде Фосагро за то, что их акции растут😍

Верстал и программировал интерфейсы применяя Front-end технологии, как нативные html, css, js, так и на фреймворках Vue, React. Писал back-end на Python/Django и проектировал макеты в Figma