Владимир М. — Frontend Developer

Проект: Корпоративный портал для сотрудников AURA Стек технологий: React, Redux, Redux Toolkit, Redux-Thunk, TypeScript, Vitest, JavaScript, jQuery, System.js, Ant-design, FSD, Axios, Pnpjs, Stylelint, ESLint, Prettier, SCSS, REST API, ASP.NET Forms , SharePoint 2019 Обязанности: - Разработка и поддержка корпоративного портала на React, Redux Toolkit, TypeScript - Реализация интерфейсов по макетам Figma с использованием дизайн-системы Ant-design - Рефакторинг и оптимизация legacy-кода, улучшение производительности приложения - Проектирование архитектуры новых подсайтов по методологии FSD - Проведение code review и распределение задач в команде - Документирование процессов разработки и legacy-кода - Разработка веб-приложений в SharePoint 2019 on premises Ключевые задачи: - Исправление бага импорта пользователей, приводящего к созданию дублей - Исправление ошибок отображения страниц разделов сайта - Миграция фронтенда с legacy на React с сохранением текущей архитектуры и сервера - Внедрение Vite вместо SharePoint-сервера для локальной разработки - Создание React-инструментов, совместимых с SharePoint Forms 2019 - Внедрение TypeScript в проект - Настройка Git, Stylelint, ESLint, Prettier для единого стиля кода - Настройка сборщика Vite для работы с SharePoint - Настройка локального окружения для удобной разработки и тестирования - Написание тестов на Vitest для повышения надежности кода Результаты работы: - Обнаружил и задокументировал ограничение в legacy-коде, что сократило количество дублирующихся записей и ускорило выполнение задач - Оптимизировал работу с большими объемами данных (2+ млн записей), сократив время обработки с нескольких часов до 3 минут - Внедрил Vite для локальной разработки, что ускорило процесс и снизило количество ошибок на production - Внедрил TypeScript, сократив количество runtime-ошибок - Выполнил переход с JSOM на REST API (PNP-JS), улучшив производительность и снизив нагрузку на сервер - Запустил Storybook для документации UI-компонентов, сократив время разработки - Внедрил динамическую подгрузку Redux-сторов для уменьшения начальной загрузки приложения - Внедрил SCSS modules для стилизации компонентов

Обязанности: - Разработка сайтов любого уровня сложности(под NDA) - Создание сайтов на базе Figma - Работа на позиции Frontend-разработчика в команде по гибкой методологии (Agile/Scrum). - Создание и доработка пользовательских интерфейсов в проектах различной сложности: от классических сайтов до SPA с онлайн-бронированием и интеграцией с API. - Взаимодействие с дизайнерами, backend-разработчиками и тестировщиками. Основные задачи: - Разработка адаптивных и кросс-браузерных интерфейсов по макетам Figma. - Реализация бизнес-логики с использованием React, Redux Toolkit, TypeScript, JavaScript. - Интеграция с сервером через REST API (Axios, Fetch), работа с формами, валидацией и роутингом. - Оптимизация производительности, исправление ошибок, поддержка и развитие UI/UX компонентов. - Участие в код-ревью, декомпозиции задач и регулярной командной коммуникации. Ключевые результаты: 1. Разработан полностью адаптивный сайт для производителя продукции с динамической фильтрацией, интерактивной картой и анимациями. 2. Реализована система онлайн-бронирования с многошаговой формой, валидацией и интеграцией с сервером. 3. Проведена миграция корпоративного сайта на современный стек (React, TypeScript, Redux Toolkit) с улучшением архитектуры и производительности. Примеры проектов: 1. Сайт производителя продукции Технологии: PUG, SCSS, Gulp, Webpack, JavaScript (ES6+), GSAP, ScrollTrigger, Yandex Maps API, Swiper. Описание проекта: Разработка адаптивного и резинового сайта производителя по макетам из Figma «с нуля». Основной задачей было создание высокоинтерактивного, быстрого и удобного сайта с динамическим интерфейсом, интерактивной картой и системой фильтрации продукции. Задачи и реализованные функции: - Верстка по Figma: полная pixel-perfect верстка с использованием PUG и SCSS (BEM-структура), адаптация под все популярные разрешения. - Сборка проекта: настройка Gulp и Webpack для автоматизации сборки, компиляции, минификации и live-reload. - Анимации интерфейса: добавление анимаций с помощью GSAP и ScrollTrigger для повышения вовлеченности пользователей. - Интеграция Yandex Maps API: загрузка координат точек из внешнего JSON-файла, реализация кластеризации маркеров. - Фильтрация продукции: реализация динамической фильтрации ассортимента без перезагрузки страницы. - Интерактивные слайдеры: интеграция Swiper.js для отображения продукции, отзывов и баннеров. Результат: - Полностью адаптивный сайт, соответствующий современным UI/UX стандартам. - Ускорение загрузки и взаимодействия с сайтом за счёт оптимизированной сборки и ленивой загрузки данных. - Увеличение вовлечённости пользователей благодаря анимациям и удобной навигации. 2. Коммерческий сайт с системой онлайн-бронирования Технологии: PUG, SCSS, Gulp, Webpack, JavaScript (ES6+), GSAP, ScrollTrigger, Yandex Maps API, Swiper, PHP (PHPMailer). Описание проекта: Разработка интерактивного интерфейса для коммерческого сайта с услугами, включающего онлайн-бронирование, динамическую подгрузку данных и email-уведомления. Задачи и реализованные функции: - Оживление интерфейса: реализация логики модальных окон, форм и анимаций на нативном JavaScript. - Динамическая загрузка данных: получение информации об услугах и товарах с сервера, отрисовка элементов без перезагрузки. - Многошаговое бронирование: пошаговая форма с переходами между этапами, проверка доступности времени, валидация данных. - Отправка заявок: реализация отправки информации о бронировании через PHPMailer на почту администратора. - Генерация сертификатов: формирование пользовательских сертификатов на основе введённых данных. - Слайдеры и галереи: настройка и внедрение Swiper.js для отображения изображений и контента. Результат: - Реализован полностью рабочий сценарий бронирования с динамической проверкой занятости времени и валидацией. - Улучшена интерактивность интерфейса, обеспечен плавный и интуитивный пользовательский опыт. - Надёжная отправка уведомлений на email через PHPMailer. 3. Миграция корпоративного сайта на современный стек Технологии: React, TypeScript, Redux Toolkit, Axios, React Router, SCSS, Feature-Sliced Design (FSD). Описание проекта: Перенос и рефакторинг большого корпоративного сайта на современный технологический стек. Работа включала построение архитектуры с нуля, реализацию ключевых пользовательских сценариев, взаимодействие с API и настройку инфраструктуры проекта. Задачи и реализованные функции: - Архитектура проекта: реализация подхода Feature-Sliced Design (FSD) с логическим разделением на shared, entities, features, widgets, pages. - Состояние приложения: управление состоянием через Redux Toolkit, создание слайсов, async thunks, редьюсеров и селекторов. - Типизация: полная типизация всех уровней приложения с использованием TypeScript. - Интеграция с сервером: работа с внешними API через Axios, обработка ошибок и токенов. - Роутинг: настройка маршрутов с использованием React Router, включая защищённые маршруты. - Формы и UX: реализация форм с валидацией, управлением фокусом и UX-сценариями ввода. - UI и стилизация: адаптивная верстка с использованием SCSS-модулей, построение переиспользуемых компонентов. Результат: - Улучшена архитектура и читаемость кода. - Повышена стабильность и масштабируемость проекта. - Обеспечена быстрая и надёжная интеграция с серверной частью. - Повышена производительность за счёт lazy loading, code splitting и оптимизации рендера.

Проходил обучение в HTML Academy Повысил уровень навыков: - семантической верстки - адаптивной верстки - верстка с помощью нативного js - верстка на классовых компонентах - разработка SPA с помощью React, Redux, react router dom, TypeSript, тестирование с помощью jest/vitest. Параллельно учебе занимался проектами для друзей и знакомых. Поддержка сайта салона красоты. Обязанности: - правка верстки - доработка блоков - внедрение нового функционала(капча, запись онлайн) - обновление цен Cтек: - HTML - CSS - PHP - yandex map - wordpress Верстка страницы сайта станции технического осмотра с возможностью записи по электронной почте, отображение станций с контактами на карте сайта.