Telegram Mini App & Product Interface

01Project overview

02Engineering challenge

A Mini App runs inside Telegram’s WebView, which behaves differently across platforms. It must feel native, stay fast on mobile and represent complex server state without overwhelming the user.

• A

  Authenticate users through Telegram and map them to backend accounts.

• B

  Show access-dependent features consistently with the subscription state.

• C

  Keep charts and transitions smooth inside a mobile WebView.

• D

  Deliver every screen fully translated into four languages.

03Solution architecture

Hover or tap each stage.

04Main components

• 01

  Dashboard

  Account overview with structured cards for the most important state.

• 02

  Signals view

  Structured signal cards with parameters and status, backed by the signal engine.

• 03

  AI chat

  Conversational interface connected to the AI assistant subsystem.

• 04

  Settings

  Personal configuration persisted on the backend, including language and risk preferences.

• 05

  Subscriptions & access

  UI logic that reflects the user’s access level consistently across screens.

• 06

  Localisation layer

  Russian, English, Polish and Ukrainian strings for the full interface.

05Technology stack

07Engineering decisions

1. 01

   Backend is the source of truth

   The client renders state and sends intents; access, settings and validation are decided on the server.

2. 02

   SVG for charts

   Lightweight, crisp at any density and easy to animate inside a WebView.

3. 03

   Translations as data

   All strings live in locale dictionaries, so adding or correcting a language does not touch layout code.

4. 04

   Test on the real target

   Behaviour is verified inside Telegram on iPhone, not only in a desktop browser.

08Reliability & testing

• ✓Verification of Telegram init data on the server.
• ✓Graceful empty and error states for every API-driven view.
• ✓Manual acceptance on real devices inside Telegram.
• ✓Checks that every key exists in all four locales.

09Code example

const dictionaries = {
  en: { "signals.title": "Signals", "settings.title": "Settings" },
  pl: { "signals.title": "Sygnały", "settings.title": "Ustawienia" },
  uk: { "signals.title": "Сигнали", "settings.title": "Налаштування" },
  ru: { "signals.title": "Сигналы", "settings.title": "Настройки" },
};

export function createTranslator(locale, fallback = "en") {
  const primary = dictionaries[locale] ?? {};
  const backup = dictionaries[fallback];

  return function t(key) {
    if (key in primary) return primary[key];
    console.warn(`[i18n] missing "${key}" for ${locale}`);
    return backup[key] ?? key;
  };
}

Production source is private. Examples here show the engineering approach, not proprietary logic. More in the Engineering Lab.

10Possible extensions

• →Offline-friendly caching of the last known account state.
• →Automated visual regression tests for key screens.
• →A web version of the same interface outside Telegram.