Frontend Engineer — React · Next.js · TypeScript
скролл ↓Кто я — факты
- Производительность
- Lighthouse 40 → 100
- Core Web Vitals
- FCP −73%, LCP −63%
- Highload
- до 10M pageviews в месяц
- SSR
- ответ Next.js 1.5s → 0.25s
- Real-time
- live-ставки через SSE
- Интеграции
- amoCRM, Kommo, Gene
- Документация вендора
- код вошёл в официальную документацию вендора как пример интеграции
- SaaS 0 → 1
- multi-tenant платформа для застройщиков, построена с нуля
- ~3.5 года
- в коммерческой разработке
ОхотАктив
Крупнейший в России ритейлер товаров для охоты и рыбалки. Офлайн и онлайн, 50+ городов, каталог до 400 000 товаров, до 10M просмотров страниц в месяц.
Performance
Каталог на 400 000 товаров и десятки фильтров с сотнями значений, одна вёрстка на все устройства. Отправная точка — Lighthouse 40 из 100.
- Фильтры рисуются по мере прокрутки: на странице живёт только видимая часть списка.
- Поисковый робот получает мета-данные, семантику и весь значимый контент; пользователь — полную интерактивную версию.
- Первый экран загружает только то, что нужно ему: остальное вынесено в динамические импорты.
- Lighthouse40 → 100
- FCP−73%
- LCP−63%
- Ответ Next.js1.5s → 0.25s
Каталожные страницы поднялись на первую страницу выдачи, часть — на первое и второе место, обойдя маркетплейсы.
Аукционы
Живые торги: участник делает ставку, и она мгновенно появляется у всех остальных.
- Ставки приходят на страницу сами, без перезагрузки.
- Порядок ставок сохраняется, даже когда события от сервера приходят вперемешку; повторная отправка исключена.
- Старт, таймер и дедлайн лота каждый участник видит в своём времени, из любого региона.
- Интерфейс лота и ставок: анимированный, адаптивный.
- ПотокSSE
- Фронтендодин разработчик
- Срок2.5 месяца
Streamerce
Живые трансляции с покупками: зритель смотрит эфир и покупает товар, не выходя из него. Штатная интеграция вендора передавала товары ссылкой и не связывала эфир с корзиной магазина.
- Эфир и корзина магазина связаны напрямую: товар из трансляции сразу в корзине, и наоборот.
- Трансляции перенесены на собственный поддомен — это сняло запрет браузера на связь между разными сайтами.
- На время передачи данных обе стороны показывают загрузку, поэтому состояния остаются согласованными.
- Интеграция доведена на стороне вендора: механика и рабочий код переданы его команде.
- ОбменpostMessage
- Стримингсвой поддомен
- Корзинадвусторонний синк
Реализация вошла в официальную документацию Streamerce как пример интеграции.
UnitBox
B2B SaaS для застройщиков: у каждого свой поддомен, свои пользователи и правила. Построена с нуля.
Платформа для застройщиков: у каждого свой поддомен, свои пользователи и свои правила. Четыре роли — застройщик, агент, менеджер, клиент. Три части: админка, публичная витрина и коммерческие предложения.
- Админка: застройщик заводит проекты и наполняет их — юниты, блоки, галереи, этапы стройки, финмодели, планы оплат.
- Цены всех проектов приведены к одной шкале: поиск и сортировка работают одинаково, в какой бы валюте проект ни продавался. Курсы обновляются автоматически.
- Три CRM на выбор — amoCRM, Kommo, Gene. Юниты и сделки синхронизируются в обе стороны, а перед отправкой видно, что именно изменится.
- Серверная часть на Nest: API, обновление курсов, права доступа для четырёх ролей.
- Коммерческое предложение: агент собирает юниты в оффер и отправляет ссылкой или готовым PDF.
- MVP3.5 месяца
- CRMтри
- Ценынормализация в USD
Первый клиент закрыт до релиза MVP. Платформа работает на проде.
- Ядро фронтенда
- React, Next.js, TypeScript
- Состояние и данные
- Redux Toolkit, SSE, WebSocket
- Рендеринг и перф
- SSR, Core Web Vitals, виртуализация, bundle analysis, Webpack
- Стили
- SCSS, CSS-in-JS, Tailwind
- UI-библиотеки
- Mantine UI, shadcn/ui
- Графика
- Canvas, SVG
- Бэкенд как инструмент
- Node, Nest.js, REST API, PostgreSQL, JWT, Docker, Puppeteer (генерация PDF)
- Интеграции
- postMessage, webhooks, cross-domain
- AI
- Claude — продакшн-код пишется в паре с моделью, каждый день
- Инструменты
- Git, GitLab, CI/CD