TatianaFomina / stkrz_bot

Telegram Mini App for creating custom stickers

Home Page:https://t.me/stkrz_bot

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

StickerWiz | Telegram Stickers Mini App

MiniApp user interface

stkrz_bot  |  ๐Ÿ† Telegram Contest Winner

About

A Telegram MiniApp that allows to create personalised sticker packs. Lets you make your own text stickers for any occasion with just a few taps using cool graphic interface ๐Ÿ’…๐Ÿ›๏ธ

From developer's perspective this repository might be usefull for those who develop any kind of content management MiniApps, to use as a template or a starting point. Here are the features of the app implementation:

  • Inline and PM modes support
  • Neat and tidy UI adapted for different clients (iOS and Android)
  • I18n support
  • Implemented using Vue.js
  • Does not use any UI-kit library

Running locally

Telegram API Token

Before you start, please visit official Telegram documentation for instructions on how to obtain Telegram API token

Telegram test environment

You can test and develop your MiniApps in Telegram test environment, which is completely separate from the main environment. For that you'll have to create new separate account and a bot with @BotFather. Don't forget to set environment variable DEV=true in server/.env to perform API calls to test environment as well.

Learn more

Ngrok

As telegram only allows to open MiniApps available from the internet, we'll need to use ngrok to expose our app outside. Follow official docs to install and authenticate ngrok. Then run the following command to start tunnel:

  ngrok http 3000 # your server port

If you want to launch the app in DEV mode, you'll need to make ngrok instatiate several tunnels at once. For that purpose create ngrok config with the following content:

authtoken: yourTokenHere
tunnels:
  first:
    addr: 5173 # server port
    proto: http    
  second:
    addr: 3000 # client dev server port
    proto: http

Once cofig file is created/updated, start ngrok with the following command:

ngrok start --all

Build

Follow the instructions on how to start/build project in corresponding webapp and server README files.

About

Telegram Mini App for creating custom stickers

https://t.me/stkrz_bot


Languages

Language:Vue 48.7%Language:TypeScript 43.4%Language:JavaScript 3.4%Language:HTML 3.3%Language:CSS 1.2%