MRSHKNMurashkin Studio
Обсудить сайт
← Все работы
Пример студии

Кофейня «Гуща»: меню по QR-коду и карта со штампами в Telegram

Кафе, бар, салон красоты · Стиль сайта: Pop

Главная страница демо-сайта кофейни «Гуща» на ноутбуке и телефоне

Задача

Кофейне нужно, чтобы гость быстро нашел меню, адрес и часы, а потом возвращался. Бумажные карты со штампами теряются, а ставить отдельное приложение ради одной кофейни хочется не всем.

Чтобы показать это в деле, мы сделали демо — работающий сайт и карту лояльности вымышленной кофейни «Гуща» в Калининграде. Кофейни нет, но сайт и карта настоящие: их можно открыть и попробовать.

Решение

На главной — адрес, часы работы и карта. На сайте — меню из 16 позиций. Его можно отфильтровать по разделам меню и по отметкам: на растительном молоке, без сахара, веганское, без кофеина. Ссылка на страницу запоминает выбранный фильтр: если гость отправит ее другу, тот сразу увидит то же отобранное меню. Для столиков есть плакат A4 с QR-кодом — его можно распечатать прямо со страницы сайта. Гость наводит на код камеру телефона и видит меню в упрощенном виде, без лишних блоков, — так удобнее читать за столиком. Меню на сайте владелец меняет сам в админке сайта — закрытом разделе, куда он входит по логину и паролю.

Карта лояльности работает в Telegram: гость открывает бота кофейни — автоматического собеседника в Telegram — и в нем мини-приложение «Лояльность», небольшое окно внутри Telegram; скачивать ничего не нужно. На кассе гость показывает в мини-приложении QR-код. Кассир сканирует этот код в том же мини-приложении, и через пару секунд у гостя появляется штамп. Каждый десятый штамп превращается в купон на напиток в подарок. Если кассир случайно отсканирует тот же код второй раз, лишний штамп не начислится. Еще в мини-приложении можно заказать напиток заранее, до прихода, открыть раздел «История» и отправить другу ссылку-приглашение: когда друг присоединится, пригласившему начислят штамп. Штампы и купоны хранятся в базе мини-приложения, а не в самом Telegram.

Заказы, сделанные заранее, кассир видит в мини-приложении и отмечает, когда заказ готов. Гостю сразу приходит сообщение от бота: заказ готов, можно забирать на кассе. О каждом новом заказе владельцу тоже приходит сообщение в Telegram. В мини-приложении заказ не оплачивают — гость платит на кассе, когда забирает. Пока заказ не готов, кассир может его отменить.

У мини-приложения своя админка, отдельная от админки сайта: меню для предзаказа и список кассиров владелец ведет в ней.

Сайт с меню — тариф «Сайт для вашей сферы». Карта лояльности и предзаказ — отдельный тариф «Отраслевое приложение в Telegram», в цену сайта они не входят.

На чем сделан сайт

  • Next.js 16
  • React 19
  • TypeScript
  • Payload CMS 3
  • PostgreSQL
  • Telegram Mini Apps
  • Telegram Bot API
  • qrcode

Результаты в цифрах

  • 100Скорость из 100 — Google PageSpeed, телефон
  • 100Доступность из 100 — Google PageSpeed, телефон
  • 100Рекомендации из 100 — Google PageSpeed, телефон
  • 100SEO из 100 — Google PageSpeed, телефон

Снимок экрана: тест скорости Google (Lighthouse)

Отчет PageSpeed Insights, мобильные: 100, 100, 100, 100

Яндекс Метрика и Google Analytics 4 считают посещения сайта и для этого сохраняют в вашем браузере cookie — маленькие файлы. Включим их, только если вы согласны. Подробнее — в политике обработки персональных данных.