Telegram Mini-App Boilerplate

Architecture Overview

Tap into Telegram's 900M+ users. This boilerplate provides a seamless bridge between a React frontend running inside the Telegram Web App container and a Node.js backend. It includes TON wallet integration, native haptic feedback, MainButton manipulation, and secure initialization data validation.

Folder Structure

├── frontend/
│   ├── src/
│   │   ├── hooks/useTelegram.ts
│   │   └── App.tsx
├── backend/
│   └── src/
│       └── bot.ts
└── package.json

Code Preview

import WebApp from '@twa-dev/sdk'

export function useTelegram() {
  const initData = WebApp.initDataUnsafe;
  
  const showMainButton = (text: string) => {
    WebApp.MainButton.setText(text);
    WebApp.MainButton.show();
  }

  return {
    user: initData.user,
    showMainButton,
    hapticFeedback: WebApp.HapticFeedback
  }
}

Technical FAQ