Привет, меня зовут Артём и я Frontend Team Lead в Surf. Я очень люблю две вещи: геймификацию и графики. Сейчас я работаю с людьми больше, чем с кодом, поэтому читаю много тематических статей. Вот так, тихим вечером, в одной из них я натолкнулся на идею объединения Moving Motivators и лепестковой диаграммы.

Moving Motivators — это игровой метод работы с командой из практик Management 3.0, почитать можно здесь

А статья, где я нашёл идею, здесь

Во время чтения в голове возникла картинка — красивое обзорное сравнение мотивации команды, с графиком, всяческими подсказками и аналитикой. Я подумал, что мне, как тимлиду, было бы крайне полезно иметь такой инструмент, чтобы понимать, что вдохновляет и огорчает, что важно, а что нет — для команды в среднем и каждого человека персонально. Быстро погуглив, я не нашёл ничего похожего. Что ж, решил я, все описано, надо просто взять и сделать.

Правда на старте возникла проблема — отсутствие планирования, импульсивность решений и неуправляемая тяга к экспериментам привели к тому, что я бился лицом о грабли и переделывал приложение четыре раза (не надо так)

Сначала я начал делать на привычном стеке (CRA, который к этому времени уже морально устарел, плюс Ant Design и MobX) — и застрял довольно быстро, уже не помню на чём, пытаясь сразу сделать хорошо. Бросил и какое-то время не трогал. А потом, другим тихим вечером (вообще в тихие вечера часто голова варит лучше всего) мою голову пронзила мысль: «раз уж это геймификация, то почему бы не сделать всё на GameMaker?» (не осилил я Unity и потому предпочитаю GM). Я снёс все наработки и начал с чистого листа.

Второй подход достаточно долго шёл хорошо и гладко, но в какой-то момент я застрял на банальном действии — кажется, не мог добиться идеального тайминга анимаций. Расстроенный, я снова забросил разработку примерно на месяц.

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

Но не с методологиями. В третьем подходе зачем-то решил заодно внедрить Feature Sliced Design, не имея опыта в построении такой архитектуры с нуля. Оказалось, для такого проекта этот метод не подходит и я больше решал проблемы «а как правильно разбить по слоям», вместо того, чтобы заниматься самим приложением. К счастью, эта неудача уже не привела к очередному переворачиванию стола и длительному перерыву в разработке — когда осознал проблему, я тут же создал новую папку под проект.

В последней попытке решил, что буду делать максимально просто, максимально быстро и максимально работоспособно. Взял связку Typescript + Next.js + RSuite + Apache ECharts без всяких стейт-менеджеров и прочего усложнения и начал писать «как буква ляжет». Потом, конечно, пришлось это всё рефакторить и разносить, но мне такой подход принёс давно забытое удовольствие — скорость реализации фич, исправления ошибок и внедрения новых идей (которые, естественно, возникали на ходу) были невероятны, а на выходе красота по полочкам.

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

Хотя, нет. С названиями и описанием были проблемы — некоторые имена карточек было очень сложно переводить на русский, не теряя при этом частиц смысла. Пришлось вчитываться в определения оригинальных названий в словарях и искать максимально подходящие замены.

Например, Acceptance, которое помимо очевидного «принятия» подразумевает под собой ещё «принятие ответственности». Или неожиданно многогранное Honor. Или Relatedness, которое все равно потеряло часть своего смысла, превратившись в «связь». Потерянные значения я попытался закрыть блоком «Также известно как…»

Частично мне в этом помогал ChatGPT, но справился он не со всеми задачами, которые я перед ним ставил. Так что приходилось многое дорабатывать самому. В итоге результат мало напоминает оригинальные карточки — вышла не экранизация, а фильм «по мотивам произведения», да ещё и адаптированный. Этакая «Мотивационная братва». Но так как на тот момент приложение создавалось без прицела на широкую аудиторию, мне нравился результат.

После того как я решил «всё, готово!», было два бета-теста (на жене и на коллегах), которые помогли закрыть неочевидные для меня проблемы, добавить несколько приятных мелочей и принесли массу удовольствия от того, что многим приложение понравилось.

Прямо сейчас я одной рукой пишу этот текст, а второй заканчиваю ту самую страницу из моего воображения, из-за которой я взялся реализовать этот проект — интерфейс для обработки результатов команд. Точнее, страница уже готова, но стало очевидно, что без инструкции пользоваться ей немного сложнее, чем базовой функциональностью. Поэтому, прежде чем я выложу новый билд, мне необходимо написать статью или записать видео с объяснением, как этим всем пользоваться. Чтобы не быть голословным — держите скрин.

Когда-то давно, на заре своей карьеры, я работал дизайнером. Как вы понимаете, мир стал чуточку лучше, когда я перестал этим заниматься. Но в пет-проектах выбор не богатый и приходится всё делать самому настолько, насколько умею.

Из стратегических же планов пока что только банальщина — бэкенд, регистрация и хранение данных на сервере. Может быть, когда наберётся большое количество данных и обратной связи, родится ещё что-нибудь. А пока продолжаю писать как буква ляжет. Попробовать web-версию приложения → можно здесь

Больше интересного контента для разработчиков → в телеграм-канале Surf Web Team 

П.с там публикуем кейсы, лучшие практики, новости и вакансии Surf, а также проводим прямые эфиры.