Привет, Хабр!

В последнее время многие столкнулись с топливным кризисом: очереди на заправках, замотанные пистолеты и таблички «95-го нет». В чатах автопутешественников царит хаос. Я решил, что ситуацию может спасти краудсорсинг, и запустил сервис natrasse.ru — интерактивную карту, где водители сами отмечают наличие бензина и размер очередей.

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

Вся логика сервиса работает на недавно написанной мною библиотеке, реализующей подход HTML-on-Wire (передача готового HTML от сервера). Это её дебют в проде, и текущая нагрузка (сейчас в базе 20 000+ АЗС и около 5000 отметок в сутки) — будет идеальным стресс-тестом, чтобы понять, как такой подход держит нагрузку.

UI/UX: Как уместить всё на одном экране Одной из главных задач было сделать интерфейс, которым удобно пользоваться за рулем или стоя в очереди, когда интернет ловит только на парковке.

Я отказался от тяжелых SPA-фреймворков в пользу максимальной легкости и постарался вынести всю ключевую информацию прямо на карту:

— Кастомные маркеры (Стеллы АЗС): Все заправки на карте — это не просто точки, а информеры. Мы сразу видим тип доступного топлива и подтвержденное наличие. Нижняя строка с часами — это индикатор очереди (от «нет» до «> 1 часа»).

— Быстрая фильтрация: Сверху реализованы чипсы для выбора типа топлива (например, АИ-100). Там же есть тумблер (иконка колонки) — при его активации на карте остаются только те АЗС, где наличие этой марки свежеподтверждено пользователями.

— Карточка АЗС (Баллун): При клике открывается минимум необходимого: название, статус топлива и две главные кнопки. «История и цены» — посмотреть логи изменений от других юзеров. «Изменить/подтвердить» — форма отправки отчета.

— Валидация данных: В форме отчета можно прикрепить фото, система проверяет геопозицию устройства (да, я знаю, что ее не сложно подделать). Если координаты совпадают с АЗС, отметке присваивается больший вес.

Нижняя навигационная панель: Где я? — центрирование по GPS. Регион — быстрый переход по карте. Отметки и Избранное — локальный лог активности юзера и список сохраненных АЗС (в избранном сразу выводится статус по топливу без перехода на карту). Профиль — пока заглушка под будущие настройки.

Дистрибуция: Web App в Telegram Так как мессенджеры сейчас — основной канал связи, я сделал интеграцию с Telegram в формате Web App (TWA). Бот t.me/natrasse_bot/map открывает полноценное веб-приложение прямо внутри телеграма.

Это решает проблему авторизации (не нужны логины/пароли). Если же ТГ не работает, есть fallback в виде обычного сайта.

Домен natrasse.ru лежал у меня в закромах с 2007 года — тогда я хотел делать форум про дорожную обстановку, но Яндекс.Карты и навигаторы убили эту идею. Сейчас же узкоспециализированный краудсорсинг снова актуален, как мне кажется.

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

Буду рад, если сообщество Хабра потыкает сервис и устроит ему небольшой хабраэффект. Интересно посмотреть, как поведет себя моя HTML-on-Wire реализация. Любая критика по UI, архитектуре и баг-репорты в комментариях категорически приветствуются.