From c1022930d001eb62fbda16ceb6e402a8db664a42 Mon Sep 17 00:00:00 2001 From: Roj Date: Mon, 13 Nov 2023 20:48:46 +0300 Subject: [PATCH] Minor improvements --- README.md | 215 +++++++++++++++++++++++++----------------------------- 1 file changed, 101 insertions(+), 114 deletions(-) diff --git a/README.md b/README.md index fa04219..b2e0d38 100644 --- a/README.md +++ b/README.md @@ -1,133 +1,120 @@ -

-
- logo of Telegram Mini Apps -
-
-

- -# 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) - - +# Awesome Telegram Mini Apps [![Awesome](https://awesome.re/badge-flat.svg)](https://github.com/sindresorhus/awesome) -## Resources + -### 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 - -
-
-
+- [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)