MRSHKNMurashkin Studio
Discuss your website
← All work
Studio example

Gushcha coffee shop: menu, QR and a loyalty card in Telegram

Cafe, bar or beauty salon · Website style: Pop

Gushcha coffee shop demo home page on a laptop and a phone

The task

A coffee shop wants guests to find the menu, address and hours quickly, and then to come back. Paper stamp cards get lost, and not everyone wants to install an app for one coffee shop.

The demo shows a website and a loyalty card for Gushcha, a fictional coffee shop in Kaliningrad. The demo site is in Russian.

The solution

The home page shows the address, opening hours and a map. The site has a 16-item menu with filters by category and by tag: plant milk, sugar-free, vegan, decaf. The chosen filter stays in the URL, so the link can be shared. For tables there is a compact QR menu and an A4 poster with a QR code that prints straight from the page. The owner edits the site menu in the site's admin panel.

The loyalty card is the Loyalty Mini App in Telegram. The guest shows a QR code at the counter, the cashier scans it in the same Mini App, and the stamp appears on the guest's phone within a couple of seconds; every tenth stamp turns into a coupon for a free drink. Scanning the same QR code again does not add a second stamp. The Mini App also has the menu with pre-ordering, a history and an invite link: the guest gets a stamp when an invited friend joins. Stamps and coupons are stored in the Mini App's database, not in Telegram itself.

The cashier sees pre-orders in the Mini App and marks them ready, and the bot tells the guest the order can be picked up at the counter. The owner gets a Telegram message about each new order. Orders are not paid in the Mini App: the guest pays at the counter on pickup. Until an order is ready, the cashier can cancel it.

The Mini App has its own admin panel, separate from the site's: the owner manages the pre-order menu and the cashier list there.

The site with the menu is the “Site for your industry” plan. The loyalty card and pre-ordering are a separate plan, “Industry app in Telegram”, not included in the site price.

What the website is built with

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

Results in numbers

  • 100Performance out of 100 — Google PageSpeed, mobile
  • 100Accessibility out of 100 — Google PageSpeed, mobile
  • 100Best practices out of 100 — Google PageSpeed, mobile
  • 100SEO out of 100 — Google PageSpeed, mobile

Screenshot: Google speed test (Lighthouse)

PageSpeed Insights report, mobile: 100, 100, 100, 100

Yandex Metrica and Google Analytics 4 count visits to the website and to do this store cookies, small files, in your browser. We turn them on only if you agree. Read more in our personal data processing policy.