Перейти к содержимому
mcar.

Frontend-разработчик · Москва · гибрид, удалённо

Макар Короленко

Четыре года во фронтенде amoCRM: amo мессенджер (web и Electron), сервис промо-лендингов на Astro, AI-ассистент. Сам веду задачи от ТЗ до прода.

Опыт

amoCRM · 10.2022 — сейчас

amo messenger — корпоративный мессенджер в вебе и на десктопе, десятки тысяч пользователей. С 2026 года ещё промо-сайты и AI-ассистент amoCRM.

Продукты: amo.tm, amocrm.ru

01Промо amoCRM · 2026

Сервис промо-лендингов с нуля

Старое промо было тяжёлым, а любую правку текста выкладывал разработчик.

  • Предложил вынести лендинги в отдельный сервис на Astro, предложение приняли
  • Поднял сервис с нуля: GitLab CI, nginx, UI-kit в Storybook
  • Сделал генерацию лендингов из Markdown с проверкой контента в CI
  • По Вебвизору нашёл, где лендинг теряет посетителей, и сделал окно регистрации с первого экрана
  • Настроил вёрстку лендингов AI-агентом по макетам Figma

РезультатКонтент-команда публикует лендинги сама, без разработчика.

02amoCRM · 2026

AI-ассистент amoCRM

Ассистент отвечает в чате и сам выполняет действия в CRM через MCP.

  • Участвовал в разработке чата: стриминг по SSE, протокол AG-UI
  • Сделал onboarding-тур: ассистент помогает новому клиенту настроить аккаунт в диалоге
  • Собрал виджет AI-агента для сайтов

РезультатАссистент и тур работают в проде.

03amo messenger · 2025

Звонки и конференции

В мессенджере не было звонков.

  • Сам сделал декомпозицию и ТЗ
  • Звонки, конференции и демонстрация экрана на Jitsi в вебе и на десктопе
  • Спроектировал препроцессинг видео с учётом лицензий на кодеки

РезультатЗвонки в проде с 2025 года.

  • Jitsi
  • Electron
  • WebSocket
  • React

amo.tm

04amo messenger

Права, закрепы и тёмная тема

Функции мессенджера, которые я делал сам или с коллегой.

  • Права доступа к каналам
  • Закреплённые сообщения и реакции
  • Вместе с коллегой — тёмная тема на дизайн-токенах и Tailwind

РезультатНовые экраны собираются на токенах и общих компонентах.

  • React
  • Redux
  • Tailwind
  • Дизайн-токены

05amo messenger

Сборка, линтер и CI

Сборка была медленной, линтер не работал, тесты не были обязательными.

  • Вместе с коллегой перевёл сборку с Create React App на Rsbuild
  • Восстановил линтер и сделал тесты обязательными в CI
  • Начал миграцию на TypeScript

РезультатСборка ускорилась с 10–20 до 3–5 секунд.

  • Rsbuild
  • TypeScript
  • Jest
  • GitLab CI

06amoCRM

Команда

Прежняя фронтенд-команда ушла.

  • Нанял четырёх разработчиков
  • Вёл их как техлид: задачи, онбординг, ревью
  • Ревьюю и проверяю задачи коллег перед выкладкой

РезультатДвое из нанятых работают со мной до сих пор.

  • Найм
  • Code review
  • Онбординг

Разборы багов

amo messenger · WebSocket

Падение после сна

Симптом
После выхода компьютера из сна клиент падал.
Причина
Две гонки в WebSocket-транспорте при переподключении.
Что сделал
Перенёс таймауты в транспорт, добавил реконнект с backoff. Клиенты подтвердили исправление.

amo messenger · Electron

Утечка памяти в десктопе

Симптом
Десктоп со временем съедал всё больше памяти.
Причина
Утечка в самом Chromium, в DevTools её не видно.
Что сделал
Воспроизвёл, оценил цену обновления Electron и выпустил исправление для macOS и Linux.

amo messenger · боты

Бот, который «вечно грузился»

Симптом
У клиента бот не загружался, локально всё работало.
Причина
Разобрал у клиента по AnyDesk: данные бота портились при перекодировании.
Что сделал
Перевёл передачу данных бота на бинарный формат.

AI-агент · виджет для сайтов

Виджет без стилей

Симптом
У части посетителей виджет открывался без стилей.
Причина
Kaspersky подменяет CSP, и инлайн-стили перестают работать.
Что сделал
Вынес стили в отдельный файл.

До amoCRM

02.2022 — 07.2022

Фестиваль анимации «Бессонница» — Frontend-разработчик

Доска объявлений с категориями, главная и статьи на Markdown, авторизация, интерактивная карта площадки. PWA с полным кэшированием серверных данных — на площадке фестиваля не было устойчивой связи.

  • React
  • TypeScript
  • Chakra UI
  • PWA

07.2022 — 08.2022

Чистодар — Fullstack-разработчик

Интернет-магазин на WordPress и WooCommerce: свой плагин быстрого заказа из корзины, эквайринг Альфа-Банка, выгрузка каталога из 1С.

  • WordPress
  • WooCommerce
  • PHP

Проекты

Свои проекты

Делаю инструменты, которые решают мои собственные задачи, и довожу их до пользователей. Код открыт.

amo stickers

80+ пользователей в Chrome Web Store

Стикеры и GIF для amo мессенджера в браузере: кнопка рядом с эмодзи, отправка одним кликом.

  • Одно ядро на TypeScript собирается в расширение Chrome (MV3) и userscript
  • Импорт паков из Telegram по ссылке, свои стикеры из картинок, видео и анимированных .tgs
  • Поиск GIF через KLIPY и GIPHY
  • Сайт с документацией на русском и английском
  • TypeScript
  • Preact
  • Tailwind
  • esbuild
  • Vitest
Интерфейс Autograph: слева текст, в центре страница в клетку, исписанная от руки, справа выбор бумаги, почерка и чернил

Autograph

Превращает набранный текст в фотографии исписанных от руки страниц. Работает целиком в браузере, без сервера.

  • Сам находит разлиновку на фото тетради: шаг линий, поля, наклон, изгиб бумаги и перспективу
  • Неровный почерк: у каждой буквы свой контур, но связное письмо не рвётся
  • Рендер на canvas, экспорт страниц в JPEG или пачкой в ZIP
  • Юнит-, компонентные и скриншотные тесты в Docker, Storybook, FSD
  • React
  • TypeScript
  • Zustand
  • Radix UI
  • Canvas
  • Playwright

lecture-transcript

MVP

Локальный пайплайн: запись лекции в mp4 превращается в конспект-транскрипт со слайдами, формулами в LaTeX и таймкодами.

  • Детект слайдов по дисперсии пикселей, дедупликация кадров по perceptual hash
  • OCR слайдов и формул, распознавание речи с пунктуацией, термины со слайдов подсказывают ASR
  • 93-минутная лекция обрабатывается за ~11 минут на RTX 4060, всё офлайн
  • 587 быстрых тестов и 24 на эталонной записи
  • Python
  • ffmpeg
  • OpenCV
  • PaddleOCR
  • GigaAM

Ещё

  • sheet_money_helper

    Telegram-бот для учёта расходов: траты по категориям записываются в Google-таблицу.

    • TypeScript
    • Telegraf
    • Google Sheets API

    БотGitHub

  • video-chat

    Видеочат в браузере на WebRTC с сигнальным сервером на Socket.IO и Express.

    • React
    • TypeScript
    • WebRTC
    • Socket.IO

    GitHub

  • Морской бой

    Игра «Морской бой» на Next.js, устанавливается как PWA.

    • Next.js
    • Zustand
    • Serwist
    • Jest

    ИгратьGitHub

Остальное, включая учебные проекты 2021–2022 годов, — на GitHub.

Стек

С чем работаю

Языки
  • TypeScript
  • JavaScript
Frontend
  • React
  • Next.js
  • Astro
  • Preact
  • Redux Toolkit
  • Redux Saga
  • Zustand
  • Vue 2
Вёрстка
  • CSS
  • Sass
  • Tailwind
  • Дизайн-токены
  • Темизация
  • Адаптивная вёрстка
  • a11y
Сборка и CI
  • Rsbuild
  • Vite
  • Webpack
  • SWC
  • Docker
  • GitLab CI
  • nginx
Тестирование
  • Jest
  • Storybook
  • Скриншотные тесты
  • Lighthouse CI
Desktop и backend
  • Electron
  • Node.js
  • Express
  • Nest.js
  • TypeORM
Протоколы
  • WebSocket
  • gRPC
  • SSE
AI
  • Claude Code
  • MCP
  • Figma MCP
  • AG-UI
  • Свои скиллы для агентов
Аналитика
  • Яндекс Метрика
  • Вебвизор
  • Web Vitals
Прочее
  • Figma
  • FSD
  • PWA

Контакты

Открыт к предложениям — напишите