Middle Frontend Developer (React, Next.js, TypeScript)

На данный момент Middle Frontend Developer (React, Next.js, TypeScript).

Мои компетенции и опыт

1. Система управления и аналитики медиа-источников

Роль: основной фронтенд-разработчик.

Платформа для автоматической генерации и публикации контента в соцсетях с помощью AI. Позволяет создавать посты, адаптированные под бренд и целевую аудиторию, планировать публикации и работать с многоформатным контентом.

- Участвовал в проектировании архитектуры и выборе технологического стека (React + TypeScript + Zustand + Tanstack Query + Vite).

- TypeScript: Полностью типизировал 370+ эндпоинтов API, исключил ошибки типов на этапе разработки.

- Архитектура приложения: построил модульную структуру по слоям (pages, components, api, hooks, lib, types).

- Инфраструктура данных: настроил глобальное состояние через Zustand + кеширование 370+ эндпоинтов через Tanstack Query.

- Безопасная авторизация: интегрировал Telegram Widget (вход в 1 клик) + JWT в httpOnly-куках.

- AI-редактор постов: реализовал текстовый редактор на contenteditable (жирный, курсив, скрытый текст, ссылки), форму генерации через AI (тема, тон, длина, эмодзи), точный превью поста как в Telegram.

- Кастомная аналитика: разработал графики на чистом SVG (без D3/ нужен доступ к резюме ) — сам парсил JSON, рассчитывал min/max, рисовал оси и линии.

- UI-компоненты: реализовал Toast с очередью и типами сообщений, Popup Manager на Zustand (вложенные попапы, блокировка скролла).

- Оптимизация: внедрил виртуальный скроллинг (react-window) для отрисовки 10 видимых карточек из 100+.

- Экспорт данных: настроил выгрузку аналитики в Excel через SheetJS.

- Сетевой слой: настроил Axios interceptor для редиректа на логин и рефреша токена через Tanstack Query.

- Стилизация: использовал Tailwind и Styled-components для адаптивного и переиспользуемого UI.

- CI/CD: настроил автоматическую сборку и деплой через GitLab CI/CD.

- Разработал сложные аналитические дашборды для работы с большими объёмами данных.

Достижения:

- Скорость создания контента выросла в 3 раза — пользователи делают посты быстрее благодаря AI-генерации и удобному редактору.

- Редактор стал главной платной фичей — клиенты платят именно за возможность быстро создавать и редактировать контент.

- Легковесная аналитика — бандл легче на ~150 КБ за счёт отказа от D3/ нужен доступ к резюме , полный контроль над визуалом.

- Плавная работа с большими данными — графики на 1000+ точек без тормозов, виртуализация экономит память.

- Масштабируемая архитектура — 370+ эндпоинтов типизированы на TypeScript, код легко расширять новыми фичами.

- Типобезопасность на всём фронте — TypeScript исключил ошибки типов при интеграции с бэкендом.

- Быстрая разработка — Vite обеспечивает мгновенный HMR и быструю сборку проекта.

2. B2B платформа автоматизации маркетинга.

Роль: основной фронтенд-разработчик. Спроектировал архитектуру платежного модуля, интегрировал Telegram Mini Apps SDK и платёжные шлюзы.

Масштабируемая веб-платформа для автоматизации маркетинговых кампаний, управления публикациями и сквозной финансовой аналитики со встроенным AI-ассистентом. Проект позволяет бизнес-пользователям гибко настраивать таргетинг, управлять балансом.

Что сделал:

- TypeScript: полностью типизировал платежный модуль, состояние пользователя, баланс и ответы API.

- Архитектура Mini App: интегрировал Telegram Mini Apps SDK, авторизация через initDataUnsafe с валидацией типов.

- State-менеджмент: создал Zustand-стору для пользователя, баланса, статусов платежей.

- Платежи: интегрировал Tinkoff и USDT с автообновлением статуса и защитой от дублей.

- AI-чат: реализовал встроенного помощника с сохранением истории (50 последних сообщений), автоскроллом и быстрыми командами.

- Закупка трафика (ключевая фича): разработал форму с таргетингом (страны, дни, бюджет, возраст), валидацией пересечений и проверкой канала по ссылке/токену — без проверки кампания не создаётся. Добавил чек на лету и сохранение черновиков в localStorage.

- Финансовая аналитика: реализовал график движения средств на чистом SVG и таблицу операций с виртуальным скроллингом (react-window).

- Кеширование и производительность: настроил Tanstack Query для баланса и курсов, рефетчинг при фокусе окна.

- Стилизация: использовал Tailwind и Styled-components для адаптивного дизайна под Telegram.

- Сетевой слой: Axios с перехватчиками для обработки ошибок и обновления токенов.

Достижения:

- Сократили время настройки рекламной кампании с 15–20 минут до 2–3 минут — ключевое преимущество продукта.

- Исключили ошибки при закупке трафика — автоматическая проверка канала не даёт создать невалидную кампанию.

- Упростили взаимодействие с AI-чатом — быстрые команды сокращают число кликов с 3–4 до 1.

- Безопасные и надёжные платежи — защита от дублирования и автообновление статуса повышают доверие пользователей.

- Реальный контроль финансов — кастомные графики на SVG дают полную аналитику движения средств.

- Типобезопасность — TypeScript исключил ошибки при интеграции с платежными шлюзами и API.

- Высокая производительность — виртуальный скроллинг и Tanstack Query обеспечивают мгновенную работу с таблицей операций.

Инструменты/Технологии: React, JavaScript, TypeScript, Tanstack Query, Zustand, Vite, Axios, REST Api, CI/CD, Tailwind, Styled-components, GitLab, Telegram Mini Apps SDK, SVG, Swager, Axios

Команда: 1 Frontend, 1 Backend, 1 Team Lead, 1 Designer

1. Коммерческие веб-проекты (около 30 штук)

Ссылки: нужен доступ к резюме , нужен доступ к резюме

Платформа для продажи ретро-игр на международных рынках. Реализовал интернет-магазин под рынки Германии, Великобритании и Франции. Полная локализация: переводы (немецкий, английский, французский), валюты (EUR, GBP), форматы дат, чисел и адресов под каждого пользователя.

Что сделал:

- Локализация: реализовал интернет-магазины под рынки DE, UK, FR — адаптировал переводы (немецкий, английский, французский), валюты (EUR, GBP), форматы дат, чисел и адресов. Использовал i18n для управления переводами.

- TypeScript: полностью типизировал все компоненты, API-ответы, состояние корзины и пропсы — исключил ошибки типов на этапе разработки.

- Архитектура: выбрал и внедрил FSD (Feature-Sliced Design) — слои app, pages, widgets, features, entities, shared. Настроил строгое правило импортов (снизу вверх) через ESLint.

- Анимация: внедрил Framer Motion — анимация появления карточек, плавные переходы между страницами, эффекты наведения, анимация добавления в корзину с «перелётом» в иконку.

- Корзина: реализовал корзину с хранением в localStorage — добавление/удаление товаров, изменение количества, пересчёт суммы со скидками и налогами. Использовал Zustand для состояния корзины.

- SEO: настроил динамические meta-теги через metadata в нужен доступ к резюме (App Router) для каждого товара. Добавил Open Graph и Twitter Cards, SSR, канонические ссылки, robots, ключевые слова.

- Утилита для наполнения контентом (личный проект): написал скрипт на TypeScript, который обращается к RAWG API, формирует JSON и скачивает превью игр (названия, рейтинги, жанры, платформы, картинки).

- Производительность: на регулярной основе настраивал lazy loading, конвертацию изображений в WebP/AVIF, ресайз под устройства и сжатие через sharp. Проводил минификацию JS/CSS, прогон через PageSpeed и Sucuri. Добивался 90+ баллов в Lighthouse.

- Координация команды: распределял задачи между тремя WordPress-разработчиками через Weeek — доски с колонками, дедлайны, приоритеты. Объяснял задачи, проверял результат, тестировал.

- Инфраструктура и деплой: заменил ручной деплой по FTP на автоматический CI/CD — пуш в ветку, код собирается, проверяется (ESLint, Prettier, stylelint, Vitest) и улетает на сервер. Настроил Cloudflare, SSL, LAMP/LEMP. Использовал Docker для изоляции окружения.

- Стилизация: использовал CSS-modules и styled-components для компонентной стилизации.

- Тестирование: писал юнит-тесты на Jest и Vitest для критических модулей (корзина, валидация форм).

Достижения:

- Упростили поддержку 30+ проектов — FSD и правила импортов исключили циклические зависимости, новые разработчики подключаются быстро.

- Типобезопасность на всём фронте — TypeScript исключил ошибки типов при интеграции с API и работе с данными.

- Интерфейс стал живым — пользователи видят отклик на каждое действие, анимация «перелёта» товара даёт понятную обратную связь.

- Корзина не исчезает после перезагрузки — пользователи возвращаются к заполненной корзине на следующий день, жалобы на пропавшие товары прекратились.

- Кликабельность ссылок выросла, товары лучше индексируются — Open Graph и SSR сделали превью товаров информативными при расшаривании.

- Сократил время наполнения контентом с 30–40 минут до 5 минут на 10 игр — автоматизация через RAWG API.

- Исключил ошибки при ручном вводе данных — всё забирается напрямую из API.

- Размер картинок уменьшился на 50–70% — конвертация в WebP/AVIF и сжатие ускорили загрузку страниц.

- Стабильные 90+ баллов Lighthouse во всех проектах, что влияет на SEO и удержание пользователей.

- Прозрачный процесс разработки — задачи не терялись, дедлайны соблюдались.

- Снизил количество багов на продакшене — проверка, тестирование и юнит-тесты отсекали проблемы.

- Релиз сократился с 10–15 минут до 2–3 минут — автоматический CI/CD.

- Ошибок при деплое стало в пять раз меньше — автоматизация исключила человеческий фактор.

- Безопасность и скорость — SSL и Cloudflare защищают пользователей и ускоряют загрузку через CDN.

- Качество кода — ESLint, Prettier, stylelint и Vitest поддерживают высокий стандарт кодовой базы.

Инструменты/Технологии: нужен доступ к резюме , React, JavaScript, TypeScript, Zustand, Redux Toolkit, Vite, Axios, Rest Api, CI/CD, CSS-module, styled-components, Git, Lighthouse, PageSpeed, Sucuri, VPS, LAMP/LEMP, Cloudflare, SSL, CI/CD

Команда: 4 Frontend, 1 Team Lead, 1 Designer, 1 DevOps

1. LMS для ресторанного холдинга (обучение сотрудников, база блюд, администрирование)

Платформа для обучения сотрудников ресторанного холдинга с полной изоляцией данных между заведениями. Позволяет управлять базой блюд, создавать уроки с мультимедийным контентом, проводить тестирование сотрудников и отслеживать прогресс. Администраторы собирают уроки из готовых блоков через визуальный конструктор без кода.

Что сделал:

- С нуля спроектировал LMS с полной изоляцией данных между ресторанами.

- TypeScript: полностью типизировал все сущности (рестораны, блюда, уроки, тесты, вопросы, ответы), API-ответы, состояние Redux и пропсы компонентов.

- Разбил код на логические слои (pages, components, features, hooks, api, lib, types, store) — упростил навигацию и переиспользование.

- Redux Toolkit — глобальное состояние (авторизация, текущий ресторан).

- Tanstack Query — кеширование и оптимистичные обновления.

- Ant Design — UI как основная UI-библиотека (таблицы, модалки, формы, скелетоны).

- React Hook Form — сложные формы с динамическими полями и валидацией.

- Реализовал currentRestaurant в Redux Toolkit — все запросы автоматически подставляют restaurantId через Axios interceptor.

- При переключении ресторана — инвалидация кеша Tanstack Query.

- Скелетоны (Ant Design Skeleton) для всех загрузочных состояний.

- Axios interceptor: 401 → редирект на логин, 403/500 → тост с ошибкой.

- Error Boundary — fallback UI с кнопкой перезагрузки вместо белого экрана.

- Вопросы листаются влево/вправо как страницы через Swiper.

- Индикатор прогресса, блокировка перехода без ответа.

- При попытке завершить тест с пропущенными вопросами — модалка с подсветкой незаполненных страниц, Swiper переключается на первый пропущенный вопрос.

- Redux Toolkit + localStorage — ответы сохраняются при каждом переключении вопроса. Закрыл браузер — вернулся через час, продолжил с того же места.

- Таблица на 200+ строк тормозила. Внедрил серверную пагинацию (по 50 записей) и виртуальный скроллинг (react-window). Время загрузки сократилось с 2-3 секунд до нужен доступ к резюме мс.

- Визуальный конструктор без кода: drag-and-drop блоков (текст, картинка, видео, ссылка, тесты) — добавляй, удаляй, меняй местами. Использовал react-dnd или аналоги.

Достижения:

- Полная изоляция данных между ресторанами — сотрудники видят только свои блюда и уроки, утечки данных исключены.

- Упростили навигацию и переиспользование кода — логическая структура позволяет быстро находить нужные компоненты.

- Закрыл браузер — продолжил с того же места — прогресс тестов сохраняется в localStorage, сотрудники не теряют ответы.

- Время загрузки таблиц сократилось с 2–3 секунд до 300–500 мс — серверная пагинация + виртуальный скроллинг решили проблему тормозов на 200+ строках.

- Понятная навигация по тестам — при попытке сдать тест с пропусками модалка подсвечивает незаполненные страницы и переключает на первую из них.

- Администраторы создают уроки без кода — визуальный конструктор с drag-and-drop позволяет собирать уроки из блоков за минуты, не привлекая разработчиков.

- Безопасность и стабильность — Error Boundary заменяет белый экран на понятный Fallback UI, тосты и скелетоны дают обратную связь.

Инструменты/Технологии: React, JavaScript, TypeScript, Redux Toolkit, Vite, Axios, Rest Api, CI/CD, CSS-module, styled-components, Git, Ant Design, React hook form

Команда: 2 Frontend, 1 Team Lead, 1 Designer, 1 DevOps