Публичная карта, на которой пользователи оставляют метки с сообщениями, фотографиями и сроком жизни. Метки появляются у всех остальных в реальном времени, их можно обсуждать в комментариях и делиться ими картинкой. Вокруг карты выросло небольшое социальное приложение: профили с уровнями и достижениями, личные чаты и push-уведомления.
Работает и как веб-приложение (PWA), и как нативная сборка под Android и iOS через Capacitor.
Карта и метки
- Векторная карта с кластеризацией меток и подгрузкой по границам экрана
- Создание метки двойным касанием: категория, описание, фотографии, срок жизни
- Карточка метки с комментариями, лайками и переходом в профиль автора
- Шеринг метки картинкой — скриншот участка карты генерируется на лету
- Определение геолокации и кнопка возврата к своему положению
Чаты
- Личные переписки в реальном времени через WebSocket
- Подгрузка истории при скролле вверх
- Оптимистичная отправка: сообщение появляется мгновенно, ретрай не создаёт дублей
- Статусы «отправляется / отправлено / прочитано» и счётчики непрочитанного
Профили
- Свой профиль и профили других пользователей
- Уровни, опыт и достижения
- Статистика активности с тепловой картой по дням
Приложение
- Тёмная и светлая темы, русский и английский языки
- Онбординг при первом запуске
- Офлайн-кэширование тайлов карты (PWA)
- Автообновление Android-сборки: приложение само предлагает скачать новый APK из GitHub Releases
| Ядро | Vue 3.5, TypeScript, Vite 8 (Rolldown) |
| Состояние и роутинг | Pinia, Vue Router 5 |
| Карта | MapLibre GL 6 |
| Реальное время | Socket.IO |
| Мобильные сборки | Capacitor 8 (Android, iOS) |
| Прочее | Vue I18n, Axios, VueUse, SCSS, vite-plugin-pwa |
Код группируется не по техническим слоям, а по функциональным срезам — каждая фича самодостаточна. Слои пронумерованы, и номер задаёт направление зависимостей: слой может использовать только те, что ниже по номеру.
src/components/
├── 00.shared/ общее: api, services, composables, lib, stores
├── 01.kit/ UI-кит: UAvatar, UInput, UModalWrapper, UMarker, …
├── 02.features/ вертикальные срезы (см. ниже)
├── 03.layouts/ макеты страниц
├── 04.widgets/ составные блоки из нескольких фич
├── 05.pages/ страницы, собирающие фичи
└── 06.app/ инициализация: i18n, websocket-плагин
Внутри среза в 02.features/ структура повторяется:
ui/— Vue-компонентыmodel/— состояние (Pinia), composables и типыapi/— обращения к серверу, если у фичи они свои
Текущие срезы: MapCore, GetMarks, MarkForm, MarkDetailSheet, Geolocation, LocateButton, Share, ChatList, ChatRoom, Profile, Authentication, Onboarding, AppSettings, AppUpdate, NotificationProvider, ButtonNavigation.
Компоненты из 01.kit и composables из 00.shared/api подключаются автоматически — импортировать их вручную не нужно (unplugin-vue-components и unplugin-auto-import, типы генерируются в src/types/dts/).
git clone https://github.com/RealTimeMap/RealTimeMap-frontend.git
cd RealTimeMap-frontend
bun installСоздайте .env по образцу .env.example:
VITE_API_BASE_URL= # адрес REST API
VITE_WS_URL= # адрес WebSocket-сервера
VITE_YANDEX_GEOCODER_KEY= # ключ Яндекс.Геокодера для адресов меток
Запуск дев-сервера на http://localhost:5173 с горячей перезагрузкой:
bun dev| Команда | Что делает |
|---|---|
bun dev |
дев-сервер |
bun run build |
проверка типов + продакшен-сборка в dist/ |
bun run build-only |
сборка без проверки типов |
bun run typecheck |
только проверка типов |
bun run lint / lint:fix |
ESLint |
bun run apk-build |
сборка веба и синхронизация с нативными проектами |
bun run bump |
посмотреть, какой станет версия (см. RELEASING.md) |
bun run apk-build # bun run build && cap sync
bunx cap open android # открыть проект в Android StudioversionName и versionCode подставляются из package.json автоматически — в build.gradle их править не нужно.
Версия поднимается автоматически по сообщениям коммитов при попадании в main, руками её менять не нужно. Формат сообщений проверяется хуком при коммите.
Подробности — в RELEASING.md: какие типы коммитов выпускают релиз, а какие нет, и как посмотреть будущую версию заранее.