Telegram Onboarding Kit is a versatile tool that allows developers to easily create onboarding applications by configuring various aspects of the app's behavior. With minimal adjustments to the configuration, you can achieve the desired onboarding experience for your users.
- Fork this repository
- Clone your forked repository
Make sure that you have installed `pip` and `node` on your machine
- Run command
npm ci
to install packages- The Python dependencies will be automatically installed as part of the process. You don't need to run any additional commands for this
- After successful installation you are ready to run
mini app
with commandnpm run dev
- To run python but run command
npm run bot
The heart of this project lies in the configuration. By tweaking the configuration file, you can customize the onboarding experience according to your project's requirements. The configuration file can be found at config.ts.
For detailed information on configuring the app, refer to the Configuration Guide.
To help you understand how to create your own configuration, we have provided three example applications in the examples
directory. Each example demonstrates different onboarding scenarios and includes a sample configuration file.
-
Fashion AI App
- Located in
examples/ai
. - Key Features:
custom pressets
currency configuration
- To Run the App: Execute:
npm run dev:ai
- Located in
-
Meditation App
- Located in
examples/meditation
. - Key Features:
localization
- To Run the App: Execute:
npm run dev:meditation
- Located in
-
WonderTales App
- Located in
examples/wondertales
. - Key Features:
localization
localized currency
custom pages
- To Run the App: Execute:
npm run dev:wondertales
- Located in
- UI Readme A collection of essential UI components. Explore the potential of these components by visiting our Figma project, where you can see them in action and gain a better understanding of their capabilities.
- Telegram-UI Readme This package offers a convenient wrapper around the @twa-dev/sdk, providing Vue-like components and use-case solutions for Popups, MainButton, BackButton, and Theme integration.
- i18n Readme A minimalistic package for handling localization in your applications. We refrain from using third-party solutions due to concerns about the bundle sizes they introduce. While we provide this solution, feel free to replace it with your own if it better suits your needs.
- Generation Readme The primary package for generating projects via a configuration file. It offers presets that can be easily extended within the configuration file.
- Compress Readme A Node solution for image compression. It processes PNG, JPG, and JPEG files, compressing them and converting them into WEBP, PNG, JPG, or JPEG formats.
- Eslint-Config Readme A basic ESLint configuration for vue projects to maintain clean and consistent code.
- Tsconfig Readme
Shared
tsconfig.base.json
file for vue + vite projects
This project is licensed under the MIT License - see the LICENSE file for details.