Ship a Telegram Mini App in 48 hours

Open Telegram, search @BotFather, send /newbot. Pick a display name and a _bot-suffixed username. Save the HTTP API token it gives you — you’ll need it server-side.

Then attach a Mini App:

/newapp                 → choose your bot
Title:                  Telegram Bible Demo
Description:            Build on Telegram, fast.
Photo:                  upload 640×360 PNG
GIF:                    optional
Web App URL:            https://your-app.example.com
Short name:             demo

Your Mini App is now reachable at t.me/your_bot/demo and via inline keyboard buttons.

Use Vite + React (or your stack of choice). Install the Telegram SDK:

npm create vite@latest mini-app -- --template react-ts
cd mini-app
npm install @telegram-apps/sdk-react

In main.tsx, initialize the bridge:

import { init, miniApp, viewport } from "@telegram-apps/sdk-react";

init();
miniApp.mount();
viewport.mount();
miniApp.ready();

Calling miniApp.ready() tells Telegram your app has finished loading — Telegram hides its own loader and reveals your UI.

Telegram passes a signed initData string to your Mini App. Never trust it client-side. Send it to your backend and verify the HMAC.

// server/auth.ts
import crypto from "node:crypto";

export function verifyInitData(initData: string, botToken: string): boolean {
  const params = new URLSearchParams(initData);
  const hash = params.get("hash")!;
  params.delete("hash");

  const dataCheck = [...params.entries()]
    .sort(([a], [b]) => a.localeCompare(b))
    .map(([k, v]) => `${k}=${v}`)
    .join("\n");

  const secret = crypto
    .createHmac("sha256", "WebAppData")
    .update(botToken)
    .digest();

  const computed = crypto
    .createHmac("sha256", secret)
    .update(dataCheck)
    .digest("hex");

  return computed === hash;
}

Once verified, parse initData.user — that’s your trusted user object: { id, first_name, username, language_code }. Mint your own session JWT from it.

Stars are Telegram’s in-app currency for digital goods. They are perfect for: unlocking premium features, tipping, paid templates, AI credits.

On your backend, create an invoice link via the Bot API:

const res = await fetch(`https://api.telegram.org/bot${TOKEN}/createInvoiceLink`, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    title: "Pro plan",
    description: "Unlock the full guide library",
    payload: `user_${userId}_pro_2026_04`,
    currency: "XTR",                 // Stars
    prices: [{ label: "Pro", amount: 250 }],   // 250 Stars
  }),
});
const { result: invoiceUrl } = await res.json();

Hand invoiceUrl to the client and call:

import { openInvoice } from "@telegram-apps/sdk-react";
const status = await openInvoice(invoiceUrl);
// "paid" | "cancelled" | "failed" | "pending"

Then handle pre_checkout_query and successful_payment updates server-side to grant entitlement.

Push your frontend to Cloudflare Pages or Vercel — both give you HTTPS for free. Update the URL in BotFather. That’s it for hosting.

For distribution:

• Direct link: t.me/your_bot/demo works in any browser, opens Telegram if installed.
• Start parameter: t.me/your_bot/demo?startapp=ref_alex — read it in initData.start_param to do referral tracking.
• Inline mode: users can @your_bot in any chat to share your app.
• Channels: drop a message with a Mini App button in your channel.
• Stories: link Mini Apps from Telegram Stories — surprisingly high CTR.