Все работы

Дела рядом

Житель вводит свою улицу или нажимает на район на карте и видит, что сделано рядом с ним и кто в этом участвовал. Ни одного факта без источника.

Клиент
Свой проект студии
Тип
Статический сайт
Что делали
Дизайн, карта, вёрстка и данные
Год
2026
Дела рядом

Карта как вход

Главный экран — карта 18 районов Петербурга с врезкой центра. Районы закрашены по числу дел, клик ведёт на страницу района с его делами, депутатами и новостями. Границы взяты из OpenStreetMap и упрощены своим кодом, чтобы карта была лёгкой.

Факт с источником

В каталоге 41 дело и 20 планов. У каждого дела есть дата, адресная табличка, роль депутата словами источника и ссылка на публикацию. Тексты сверялись с источниками вручную.

Для подъезда и чата

Страница района печатается листом А4 для доски объявлений с QR-кодом на сайт, а итоги можно скопировать текстом для домового чата. QR-генератор написан свой.

Как устроена карта районов

Рельефная карта на постаменте: плитки районов поднимаются по числу дел, адресный указатель переходит к выбранному району, а маленький пресс печатает лист для подъезда.

Адресная табличка — выбранный район18 плиток: высота — число дел в районе, лист на делоПортал с кареткой и печатный станок — механика«Дела рядом» — реестр дел в районах Санкт-Петербурга на карте: 41 дело и 20 планов, и у каждого дела есть дата, адрес и ссылка на источник. Здесь районы — плитки рельефной карты, высота плитки равна числу дел района, а в сумме их 41 на 18 районов (на сайте районы так же закрашены по числу дел). Адресная табличка идёт к району, а станок печатает лист А4 для подъезда: дела района и QR-код на его страницу. Сайт собирается в один статический HTML-файл, а данные региона лежат отдельной папкой: границы районов взяты из OpenStreetMap.

Технически

  • React 19 и TypeScript без бандлера: своя сборка собирает сайт в один HTML-файл около 1 МБ.
  • Границы районов из OpenStreetMap, свои упрощение и сглаживание контуров.
  • Свой генератор QR-кодов для печатного листа.
  • Каждый регион — отдельная папка данных, поэтому сайт можно развернуть для другого города.
  • Небольшой сервер на Node с SQLite для голосов, подсказок и подписок жителей.

React · TypeScript · OpenStreetMap · Node.js

Обсудим ваш проект?

Обсудить проект