Frontend разработчик (React + TypeScript, Google Maps)

Что предстоит делать

<h3>Обзор проекта</h3><p>Мы создаем веб-инструмент, который позволяет пользователям проектировать план забора прямо поверх Google Maps: рисовать линии забора, размещать ворота, добавлять столбы и аксессуары, а также получать расчеты и смету в реальном времени. Нам нужен опытный frontend-разработчик для создания <strong>движка рисования и взаимодействия</strong> — основной механики самого редактора карты.</p><p>Это хорошо специфицированный, автономный модуль. Вы получите:</p><ul><li>Подробную <strong>письменную спецификацию</strong>, охватывающую все правила взаимодействия (рисование, привязка, соединения, углы, замкнутые контуры, распашные ворота, откатные ворота, разрывы в заборе, столбы, обозначения рельефа, горячие клавиши, отмена/повтор), включая ссылку на модель данных и псевдокод для ключевых механик.</li><li><strong>Рабочую интерактивную HTML/SVG эталонную сборку</strong> (на чистом JS, без фреймворков), которая демонстрирует каждый сценарий вживую — вы сможете кликать по ней, чтобы точно увидеть, как должно вести себя каждое взаимодействие, прежде чем писать production-код.</li><li>Набор <strong>сценариев приемочного тестирования</strong>, которые определяют критерии готовности для каждой функции.</li></ul><h3>Что вы будете создавать</h3><ul><li>Реализацию на <strong>React + TypeScript</strong> движка рисования из эталонной сборки, отображающую SVG-оверлей, синхронизированный с реальным экземпляром <strong>Google Maps</strong> (сама эталонная сборка работает на абстрактном SVG-холсте, а не с реальными координатами карты — привязка к фактическим географическим координатам является частью этой задачи).</li><li>Полную логику взаимодействия: рисование линий забора точка за точкой с живыми метрическими размерами, магнитная привязка/соединение/разъединение линий, соединения под углом 90°/точным углом, замкнутые контуры, распашные и откатные ворота, реальные разрывы в заборе вокруг препятствий, автоматические и ручные столбы, объекты на участке (дом, дерево, бассейн и т.д.), маркеры рельефа (подсыпка/перепад высот).</li><li>Одношаговую историю отмены/повтора, охватывающую каждое действие (перемещение, соединение, разъединение, изменение длины, создание разрыва).</li><li>Горячие клавиши, которые работают независимо от раскладки клавиатуры (физические коды клавиш, а не вводимые символы).</li></ul><h3>Технологический стек</h3><ul><li><strong>React + TypeScript</strong></li><li><strong>Google Maps JavaScript API</strong> (например, <code>@vis.gl/react-google-maps</code> или официальный загрузчик) с пользовательским оверлеем для SVG-слоя</li><li><strong>SVG</strong> для всей геометрии, маркеров и контекстного UI (не Canvas — спецификация полагается на отдельные области попадания, читаемый повернутый текст и интерактивность на уровне DOM)</li><li><strong>Pointer Events API</strong> для унифицированной обработки мыши/касания/пера, с намеренным порогом перетаскивания (~4–7px), прежде чем клик становится перетаскиванием</li><li>Управление состоянием на ваше усмотрение — эталонная сборка реализует отмену/повтор как простые JSON-снимки для каждого действия, что является приемлемым паттерном, которому можно следовать, вместо полного архитектурного переписывания</li></ul><h3>Желаемый подход</h3><p>Эталонная сборка уже содержит рабочую, проверенную логику для каждого взаимодействия (привязка, соединение, нанесение размеров, геометрия ворот). Мы не ищем полного редизайна с нуля — мы хотим, чтобы эта логика была <strong>портирована и типизирована</strong>, а затем привязана к реальным координатам карты. Прагматичный порт, который сохраняет проверенное императивное ядро близким к эталонной реализации, предпочтительнее полного идиоматического переписывания на React; это снижает стоимость и сроки без ущерба для корректности.</p><h3>Что вне области ответственности</h3><ul><li>Расчеты цен и сметы (обрабатываются отдельно)</li><li>Источники данных о товарах/каталоге (обрабатываются отдельно)</li><li>Финальное визуальное оформление кнопок, панелей и типографики (берется из отдельных дизайн-файлов; вы реализуете поведение, а не попиксельную стилизацию)</li><li>Бэкенд, аутентификация и хранение проектов — REST-бэкенд уже существует; вам нужно будет только вызывать endpoint для сохранения/загрузки</li></ul><h3>Требования</h3><ul><li>Уверенный опыт работы с React + TypeScript, комфортная работа со сложным, глубоко вложенным клиентским состоянием</li><li>Предыдущий опыт работы с <strong>Google Maps JavaScript API</strong> (пользовательские оверлеи, проекция координат)</li><li>Сolid навыки работы с SVG: ручные геометрические расчеты (расстояние, проекция на отрезок, вычисление углов), а не только статическая SVG-разметка</li><li>Опыт создания drag-and-drop взаимодействий с нуля с помощью Pointer Events (а не просто обертывание готовой библиотеки)</li><li>Способность точно читать детальную письменную спецификацию и выявлять неоднозначности, а не догадываться</li></ul><h3>Будет плюсом</h3><ul><li>Опыт создания редакторов, похожих на CAD или редакторов диаграмм/планов этажей (привязка, соединения, размерные линии)</li><li>Знакомство с проектированием истории отмены/повтора для интерактивных редакторов</li></ul><h3>Что включить в вашу заявку</h3><p>Пожалуйста, ознакомьтесь со спецификацией и эталонной сборкой, затем укажите:</p><ul><li>Вашу оценку в часах (или диапазон) для полного объема работ, описанного выше</li><li>Любые части спецификации, которые вы бы отметили как более рискованные или, вероятно, требующие больше времени, чем ожидается</li><li>Предложили бы вы исключить что-либо из объема (например, откатные ворота, разрывы в заборе, обозначения рельефа, объекты на участке) для соответствия более жесткому бюджету, и предполагаемое влияние на часы</li></ul><h3>Результаты и приемка</h3><p>Работа считается завершенной, когда все сценарии приемочного тестирования из спецификации проходят как для мышиного, так и для сенсорного ввода, без ошибок в консоли и без осиротевших ссылок на данные после операций удаления/разделения.</p> <div> <a href="https://jobs.dou.ua/companies/bestia/vacancies/369432/#reply-btn-id">Відгукнутись на вакансію</a> </div>