Inro

About and Case

Хакатон проводится от Сбера, направлен на улучшение взаимодействия пользователем и картой. В данном кейсе нужно реализовать функционал взаимодействия с 2GIS API и картой.

Обязательная реализация:

  1. Приложение должно быть сайтом, разработанным для мобилок (SPA), в браузере
  2. В приложении, необходимо показывать категории магазинов.
  3. При выборе категории - показывать магазины, подходящие к данной категории.

Work

Competence

В работе участвовало 5 человек:

  • Дизайнер
    • Прототип и дизайн приложения в Figma
    • Подготовка иконок, презентация
  • Программист (Front-end)
    • Подготовка компонентов, вёрстка
  • Программист (Front-end/Data)
    • Взаимодействия с получением данных из API
    • Взаимодействия со сторонним API

Stack and functions

SPA выполнено на ReactJS с использованием библиотек 2ГИС. Стек технологий в работе:

  • HTML5
  • CSS3
  • JavaScript
  • Github

Product

Страница используют свой преобразователь IP адреса в точку на карте (Определение местоположения) Вся карта строится с помощью библиотеки 2ГИС, и поиск по категориям на сайте.

Презентация проекта:

Исходники проекта:

Figma прототип

GitHub

Готовое SPA (может не работать из-за просроченного ключа от catalog.api.2gis.ru)

Features

For people

  1. Карточка магазина, в которой:
  • Адрес
  • Время работы
  • Отзывы
  • Расстояние до магазина
  • Телефон
  • Ссылки на соцсети (Актуально для небольших заведений, которые продвигаются через инст)
  1. Масштабирование карты
  2. Определение расстояния до магазина в метрах или километрах

For busness

  1. Реклама в категория
  2. Если продуктовый магазин подключен к Сбер Маркету, то в его карточке ставим ссылку на доставку через Сбер Маркет.
  3. У всех магазинов одной категории ставим одинаковую иконку на карте. Если кто-то хочет поставить свой логотип вместо нее, то он платит за это.