Skip to content

Commit

Permalink
Merge pull request #2 from roj1512/master
Browse files Browse the repository at this point in the history
Minor improvements
  • Loading branch information
kuhel authored Nov 15, 2023
2 parents 48bd5b9 + c102293 commit a4975b4
Showing 1 changed file with 101 additions and 114 deletions.
215 changes: 101 additions & 114 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,133 +1,120 @@
<p align="center">
<br>
<img width="240" src="./assets/tapps.png" alt="logo of Telegram Mini Apps">
<br>
<br>
</p>

# Awesome Telegram Mini Apps
A curated list of awesome things related to Telegram Mini Apps (TMA).

## Table of contents
- [Awesome Telegram Mini Apps](#awesome-telegram-mini-apps)
- [Table of contents](#table-of-contents)
- [Resources](#resources)
- [Official Resources](#official-resources)
- [External Resources](#external-resources)
- [Community](#community)
- [Libraries](#libraries)
- [Boilerplates](#boilerplates)
- [UI \& Components](#ui--components)
- [Examples](#examples)
- [Youtube](#youtube)
- [Tutorials](#tutorials)
- [Courses](#courses)
- [Public Talks](#public-talks)
- [Projects Using Telegram Mini Apps](#projects-using-telegram-mini-apps)
- [Commercial Products](#commercial-products)

<!-- md-parser-start -->
# Awesome Telegram Mini Apps [![Awesome](https://awesome.re/badge-flat.svg)](https://github.com/sindresorhus/awesome)

## Resources
<img src="assets/tapps.png" align="right" width="100" style="max-width: 100%" />

### Official Resources
> A curated list of awesome things related to Telegram Mini Apps.
- [Official Guide](https://core.telegram.org/bots/webapps)
- [Release Notes](https://core.telegram.org/bots/webapps#recent-changes)
Telegram Mini Apps are web apps that are launched right inside [Telegram](https://telegram.org), letting them have a consistent user experience.
They can take advantage of many features out of the box, including seamless authorization, integrated payments, push notifications, and much more.

### External Resources
- [Community Guide](https://docs.twa.dev/)
- [TON Guide](https://docs.ton.org/develop/dapps/twa)
- [TON Play](https://docs.tonplay.io/) — TON Play Toolkit allows to launch new and existing games on Telegram or our platform and integrate them with the robust TON infrastructure for fast, reliable, and easy-to-use blockchain elements, including payments.
## Contents

### Community
- [Resources](#resources)
- [Articles](#articles)
- [Talks](#talks)
- [Videos](#videos)
- [UI Kits](#ui-kits)
- [Libraries](#libraries)
- [Templates](#templates)
- [Projects](#projects)
- [Products](#products)
- [Communities](#communities)

- [Telegram Chat](https://t.me/twa_dev)
- [GitHub Telegram Mini Apps Community](https://github.com/twa-dev)
- [GitHub TON Community](https://github.com/ton-community)

### Libraries
- [@twa-dev/SDK](https://github.com/twa-dev/SDK) — NPM package for Telegram Mini Apps SDK
- [@twa-dev/types](https://github.com/twa-dev/types) — Types for Telegram Mini Apps SDK
- [@twa-dev/Mark42](https://github.com/twa-dev/Mark42) — Simple lightweight tree-shakable UI library for Telegram Mini Apps
- [@twa.js](https://github.com/Telegram-Web-Apps/twa.js) — Mono-repository, containing all the packages, connected with comfortable and safe TypeScript development on Telegram Mini Apps platform.
- [@ton-connect/sdk](https://github.com/ton-connect/sdk) — Implementation of the TonConnect protocol
- [Flutter Telegram Mini App](https://pub.dev/documentation/flutter_telegram_web_app/latest/)
- [Typings for Telegram Mini Apps](https://github.com/DavisDmitry/telegram-webapps/tree/master)
- [Library for TMA init data on Go](https://github.com/Telegram-Mini-Apps/init-data-golang)


### Boilerplates
- [@twa-dev/webpack-boilerplate](https://github.com/twa-dev/webpack-boilerplate) — Webpack-based modern boilerplate featuring based on React
- [@twa-dev/vanilla-js-boilerplate](https://github.com/twa-dev/vanilla-js-boilerplate) — Basic and straightforward boilerplate based on simple web technologies: JavaScript, HTML, and CSS.
- [@twa-dev/vite-boilerplate](https://github.com/twa-dev/vite-boilerplate) — Vite is a modern frontend tool that offers several advantages over traditional build tools, including faster development times, smaller bundle sizes, and improved developer experience. It supports React, Vue, Svelte and many more.
- [TON Telegram Mini Apps template](https://github.com/ton-community/twa-template)
- [@ton-defi-org/tonstarter-twa](https://github.com/ton-defi-org/tonstarter-twa) — Template for new Telegram Mini Apps interaction with TON
- [Telegram Onboarding Kit](https://github.com/Easterok/telegram-onboarding-kit)
## Resources

- [Official Guide](https://core.telegram.org/bots/webapps)
- [Changelog](https://core.telegram.org/bots/webapps#recent-changes)
- [Community Guide](https://docs.telegram-mini-apps.com)
- [TON Documentation Guide](https://docs.ton.org/develop/dapps/twa)
- [Telegram Mini Apps Issues](https://github.com/Telegram-Mini-Apps/issues)
- [Trending Apps](https://t.me/trendingapps)

### Articles

###### English

### UI & Components
- [Figma Telegram UI Components](https://www.figma.com/@firststagelabs)
- [@tonconnect/ui-react](https://www.npmjs.com/package/@tonconnect/ui-react) — React UI kit for TonConnect SDK
- [@tonconnect/ui](https://github.com/ton-connect/sdk/tree/main/packages/ui) — UI kit for TonConnect SDK

### Examples
- [Example for booking hotels](https://github.com/vkruglikov/react-telegram-web-apphttps://github.com/neSpecc/telebook)
- [Sticker Catalog](https://github.com/fstik-app/catalog)
- [Chess multiplayer](https://github.com/Quatern1on/ChessNowBot)
- [Demo flow for ride requests](https://github.com/ArashYounesi/TRide)
- [One-time 2FA password generator](https://github.com/UselessStudio/TeleOTP)
- [Event Telegram Mini-App Demo](https://github.com/mbasaglia/mini_apps)
- [Notes and to-do lists](https://github.com/deptyped/notepher-bot)
- [Paint Bot](https://github.com/hip-hyena/PaintBot)
- [Call scheduling](https://github.com/arterialist/Callegram)
- [Booking system for medical services](https://github.com/Latand/MedSyncWebApp)
- [Dummy Wallet app](https://github.com/erfanmola/DPXWallet)
- [Calculator](https://github.com/ArashYounesi/TCalculator)
- [Wishlist](https://github.com/grulex/telegram-wishlist-miniapp)
- [React Example](https://github.com/vkruglikov/react-telegram-web-app)
- [Shop Example](https://github.com/TheCymond/Telegram_Web_App/ga)
- [Next.js with Tailwind](https://github.com/mauriciobraz/next.js-telegram-webapp)
- [aiogram](https://github.com/abdullaev388/Telegram-Web-App)
- [Date and time picker](https://github.com/Expented/tgdtp)
- [Example with Python](https://github.com/poshl000/telegram-webapp-bot)
- [Bots playground example](https://github.com/revenkroz/telegram-web-app-bot-example)
- [Playground example](https://github.com/mihailgok/telegramwebapps)
- [Small tutorial](https://github.com/mihailgok/telegramwebapps)
### Youtube
- [Telegram Mini Apps: tips and hacks | Arthur Stambultsyan](https://www.youtube.com/watch?v=amvZy9hzAic&t=2476s&pp=ygURdGVsZWdyYW0gd2ViIGFwcHM%3D)
- 🇷🇺 [СОЗДАЕМ упрощенный DURGER KING](https://www.youtube.com/watch?v=O1ZRJXKBa4U&pp=ygURdGVsZWdyYW0gd2ViIGFwcHM%3D)
- 🇷🇺 [Web app TELEGRAM Бот на node js и React](https://www.youtube.com/watch?v=MzO-0IYkZMU&pp=ygURdGVsZWdyYW0gd2ViIGFwcHM%3D)
- 🇷🇺 [Как открыть WebApp и запустить магазин в Телеграм канале](https://www.youtube.com/watch?v=nznt4-J-oHs&pp=ygURdGVsZWdyYW0gd2ViIGFwcHM%3D)
- 🇷🇺 [Web App Telegram Bot (React + Telegram Bot) + Bot Revolution](https://www.youtube.com/watch?v=FCHNnZ2KDUQ&pp=ygURdGVsZWdyYW0gd2ViIGFwcHM%3D)
- 🇷🇺 [Создаем Telegram бота](https://www.youtube.com/watch?v=-m5cUud_VzI&list=PLN0sMOjX-lm5BMwTm-llmJuA50umZJOsL)
- 🇺🇦 [Web App in the Telegram bot](https://www.youtube.com/watch?v=Gu2BB4G5Gdg&pp=ygURdGVsZWdyYW0gd2ViIGFwcHM%3D)

### Tutorials
- [Step-by-Step guide to build a Telegram Chatbot with a simple WebApp UI using Python](https://medium.com/@calixtemayoraz/step-by-step-guide-to-build-a-telegram-chatbot-with-a-simple-webapp-ui-using-python-44dca453522f)
- [Telegram Mini App with React and Next.js](https://dev.to/bitofuniverse/telegram-web-app-with-react-and-nextjs-440i)
- [Creation of Telegram Mini Apps and interaction with them in telegram bots](https://prog.world/creation-of-telegram-web-apps-and-interaction-with-them-in-telegram-bots/)
- [Telegram Mini Apps Issues](https://github.com/Telegram-Mini-Apps/issues)
- 🇷🇺 [Создание Telegram Mini Apps и взаимодействие с ними в телеграм ботах](https://habr.com/ru/articles/666278/)
- [Creation of Telegram Mini Apps and interaction with them in Telegram bots](https://prog.world/creation-of-telegram-web-apps-and-interaction-with-them-in-telegram-bots)

###### Russian

- [Создание Telegram Mini Apps и взаимодействие с ними в Телеграм ботах](https://habr.com/ru/articles/666278)

## Talks

### Courses
- 🇷🇺 [Телеграм бот на Python](https://itproger.com/course/telegram-bot) — Представляем курс для начинающих по разработке Telegram ботов на Python. За курс вы с нуля научитесь создавать Телеграм ботов в разных жанрах и с использованием разных библиотек.
- [Telegram Web Apps: web applications inside Telegram (Russian)](https://holyjs.ru/en/talks/7ce6dd405449413daf154fcd6a476fdb)

### Public Talks
- 🇷🇺 [Telegram Mini Apps: веб-приложения внутри Telegram](https://holyjs.ru/en/talks/7ce6dd405449413daf154fcd6a476fdb/)
## Videos

###### English

## Projects Using Telegram Mini Apps
- [Telegram Mini Apps: tips and hacks | Arthur Stambultsyan](https://www.youtube.com/watch?v=amvZy9hzAic&t=2476)

### Commercial Products
- [TON Play](https://tonplay.io/) — Toolkit that allows game developers to leverage the power of Telegram
- 🇷🇺 [Telegram Shops Platform](https://telegramwebapps.ru/)
###### Russian

- [СОЗДАЕМ упрощенный DURGER KING](https://youtu.be/O1ZRJXKBa4U)
- [Web app TELEGRAM Бот на node js и React](https://youtu.be/MzO-0IYkZMU)
- [Как открыть WebApp и запустить магазин в Телеграм канале](https://youtu.be/nznt4-J-oHs)
- [Web App Telegram Bot (React + Telegram Bot) + Bot Revolution](https://youtu.be/FCHNnZ2KDUQ)
- [Создаем Telegram бота](https://www.youtube.com/watch?v=-m5cUud_VzI&list=PLN0sMOjX-lm5BMwTm-llmJuA50umZJOsL)

###### Ukrainian

<!-- md-parser-end -->
<br/>
<br/>
<br/>
- [Web App in the Telegram bot](https://youtu.be/Gu2BB4G5Gdg)

[![CC0](https://i.creativecommons.org/p/zero/1.0/88x31.png)](https://creativecommons.org/publicdomain/zero/1.0/)
## UI Kits

- [Telegram Graphics Figma file](https://www.figma.com/community/file/1248595286803212338/telegram-graphics)
- [@tonconnect/ui-react](https://www.npmjs.com/package/@tonconnect/ui-react)
- [@tonconnect/ui](https://github.com/ton-connect/sdk/tree/main/packages/ui)
- [@twa-dev/Mark42](https://github.com/twa-dev/Mark42) - A simple, lightweight, and tree-shakable UI library for Telegram Mini Apps.

## Libraries

- [@twa-dev/SDK](https://github.com/twa-dev/SDK) - The [WebApp API](https://core.telegram.org/bots/webapps#initializing-mini-apps) as an npm package.
- [@twa.js](https://github.com/Telegram-Web-Apps/twa.js) - A monorepository that contains everything you need to develop Telegram Mini Apps in TypeScript.
- [flutter_telegram_web](https://pub.dev/documentation/flutter_telegram_web_app/latest)
- [Typings for Telegram Mini Apps](https://github.com/DavisDmitry/telegram-webapps/tree/master) - TypeScript typings for the WebApp API.
- [init-data-golang](https://github.com/Telegram-Mini-Apps/init-data-golang) - Init data validation utilities for Go.

## Templates

- [@twa-dev/webpack-boilerplate](https://github.com/twa-dev/webpack-boilerplate)
- [@twa-dev/vanilla-js-boilerplate](https://github.com/twa-dev/vanilla-js-boilerplate)
- [@twa-dev/vite-boilerplate](https://github.com/twa-dev/vite-boilerplate)
- [TON integration template](https://github.com/ton-community/twa-template)
- [@ton-defi-org/tonstarter-twa](https://github.com/ton-defi-org/tonstarter-twa)
- [Telegram Onboarding Kit](https://github.com/Easterok/telegram-onboarding-kit)

## Projects

- [Telebook](https://github.com/neSpecc/telebook) - Hotel booking app concept.
- [fStik](https://github.com/fstik-app/catalog) - Telegram sticker catalog.
- [ChessNowBot](https://github.com/Quatern1on/ChessNowBot) - Play chess live with other Telegram users.
- [TRide](https://github.com/ArashYounesi/TRide) - Ride booking app concept.
- [TeleOTP](https://github.com/UselessStudio/TeleOTP) - A one-time password generator.
- [Mini Events](https://github.com/mbasaglia/mini_apps) - Python framework to create event-based Mini Apps.
- [Notepher](https://github.com/deptyped/notepher-bot) - A note taking app synced with the Telegram cloud.
- [@PaintBot](https://github.com/hip-hyena/PaintBot) - Collaboratively create small hand-drawn images.
- [MedSync](https://github.com/Latand/MedSyncWebApp) - Healthcare booking app concept.
- [DPXWallet](https://github.com/erfanmola/DPXWallet) - Crypto wallet app concept.
- [Calculator](https://github.com/ArashYounesi/TCalculator)
- [Wishlist](https://github.com/grulex/telegram-wishlist-miniapp)
- [React Example](https://github.com/vkruglikov/react-telegram-web-app)
- [Shop Example](https://github.com/TheCymond/Telegram_Web_App)
- [Next.js Example](https://github.com/mauriciobraz/next.js-telegram-webapp)
- [aiogram-aiohttp Example](https://github.com/abdullaev388/Telegram-Web-App)
- [Datetime Picker](https://github.com/Expented/tgdtp)
- [Python Backend Example](https://github.com/poshl000/telegram-webapp-bot)
- [API Interactions Example](https://github.com/revenkroz/telegram-web-app-bot-example)

## Products

- [TON Play](https://tonplay.io) - A toolkit that allows game developers to leverage the power of Telegram.
- [Telegram Shop Platform](https://telegramwebapps.ru)

## Communities

- [Telegram Chat](https://t.me/twa_dev)
- [twa-dev GitHub](https://github.com/twa-dev)

0 comments on commit a4975b4

Please sign in to comment.