«Этническая карта области Жетісу» - интерактивный киоск
Сенсорный киоск с картой этнокультурных центров региона. Контент обновляют сотрудники заказчика сами.
Клиент Дом дружбы народов
Что было не так
Материалы по этнокультурным центрам региона лежали разрозненно (презентации, документы, таблицы, собранные в разное время и в разных форматах). Показать их посетителю было негде. Единого носителя не было, и обновить информацию можно было только через разработчика.
Что решили и почему
Решили делать сенсорный киоск для публичного пространства, чтобы посетитель сам листал карту районов и читал про центры.
Главное требование я заложил с самого начала. Контент обновляют сотрудники заказчика сами, поэтому в киоске есть админ-панель с понятным редактором.
Второе требование - защита от ошибки. Сотрудники не технические, и любая правка могла сломать текст. Поэтому сделал историю изменений с возможностью откатиться к предыдущей версии.
Третье - киоск стоит без присмотра. Он сам возвращается к заставке после ухода посетителя и работает без клавиатуры.
Как делал
- 01
Разобрал исходные материалы заказчика (презентации и документы) и привёл разрозненные данные к единой структуре (районы, центры, статьи, события).
- 02
Спроектировал решение (какие разделы, что видит посетитель, что редактирует администратор, какие роли и доступы нужны).
- 03
Реализовал. Разбил задачу на части, вёл разработку с AI-инструментами, прошёл через много итераций отладки.
- 04
Отдельно доводил киоск-режим, это самая капризная часть (возврат к заставке, поведение карточек центров, навигация пальцем).
- 05
Задеплоил и проверил работу на реальном оборудовании.
- 06
Написал для заказчика руководство по админ-панели и инструкцию по настройке киоска. Продолжаю поддерживать после сдачи.
Стек проекта
- next.js / react / typescript - сама веб-платформа
- postgresql + prisma - база данных проекта и работа с ней
- Админ-панель с авторизацией - вход только для сотрудников заказчика
- tiptap - редактор текста в админке (как word, для нетехнических людей)
- vercel Blob - хранилище загружаемых фото
- echarts - графики статистики в админке
- SVG-карта + анимации - интерактивная карта районов
- playwright - автотесты основных сценариев
- python - перенос исходных материалов заказчика в базу
Результат
Киоск установлен и работает. Заказчик принял проект.
Сотрудники обновляют контент сами через админку.
Сейчас обсуждается масштабирование на другие регионы и развитие проекта в онлайн-платформу.