«Этническая карта области Жетісу» — интерактивный киоск
Сенсорный киоск с картой этнокультурных центров региона — контент обновляют сотрудники заказчика сами, без разработчика.
Клиент: Дом дружбы народов
Что было не так
Материалы по этнокультурным центрам региона лежали разрозненно — презентации, документы, таблицы, собранные в разное время и в разных форматах. Показать их посетителю было негде: не было ни единого носителя, ни способа обновлять информацию без обращения к разработчику.
Что решили и почему
Решили делать сенсорный киоск для публичного пространства — чтобы посетитель сам листал карту районов и читал про центры.
Ключевое требование, которое я заложил: контент должны обновлять сотрудники заказчика, без меня. Отсюда — админ-панель с понятным редактором.
Второе требование — защита от ошибки: сотрудники не технические, и любая правка могла сломать текст. Поэтому сделал историю изменений с возможностью откатиться к предыдущей версии.
Третье — киоск стоит без присмотра, значит должен сам возвращаться к заставке после ухода посетителя и работать без клавиатуры.
Как делал
- 01
Разобрал исходные материалы заказчика — презентации и документы, привёл разрозненные данные к единой структуре (районы, центры, статьи, события).
- 02
Спроектировал решение: какие разделы, что видит посетитель, что редактирует администратор, какие роли и доступы нужны.
- 03
Реализовал: декомпозировал задачу, вёл разработку с AI-инструментами, прошёл через много итераций отладки.
- 04
Отдельно допиливал киоск-режим — по факту это самая капризная часть: возврат к заставке, поведение карточек центров, навигация пальцем.
- 05
Задеплоил, проверил работу на реальном оборудовании.
- 06
Написал для заказчика руководство по админ-панели и инструкцию по настройке киоска. Продолжаю поддерживать после сдачи.
Стек проекта
- Next.js / React / TypeScript — сама веб-платформа
- PostgreSQL + Prisma — база данных проекта и работа с ней
- Админ-панель с авторизацией — вход только для сотрудников заказчика
- TipTap — редактор текста в админке (как Word, для нетехнических людей)
- Vercel Blob — хранилище загружаемых фото
- ECharts — графики статистики в админке
- SVG-карта + анимации — интерактивная карта районов
- Playwright — автотесты основных сценариев
- Python — перенос исходных материалов заказчика в базу
Результат
Киоск установлен и работает. Заказчик принял проект.
Сотрудники обновляют контент сами через админку — без обращения ко мне.
Сейчас обсуждается масштабирование на другие регионы и развитие проекта в онлайн-платформу.