A lightweight React-based Telegram Web App (Mini App) integrated with a Telegram bot, built for testing and experimentation.
This project is a Telegram Web App (Mini App) developed using React. It serves as a frontend interface that can be launched within the Telegram client via a bot. The app is designed for testing and learning purposes, demonstrating how to integrate a React application as a Telegram Web App.
- Frontend: React (Create React App)
- Deployment: Netlify
- Telegram Integration: Telegram Web Apps API
- ✅ React-based single-page application
- ✅ Integration with Telegram Web Apps API
- ✅ Hosted on Netlify for easy deployment
- 🧪 Designed for testing and experimentation
- Node.js and npm installed
- A Telegram bot token obtained from BotFather
-
Clone the repository:
git clone https://github.com/MuratOfficial/tel-bot-web-app.git cd tel-bot-web-app -
Install dependencies:
npm install- Start the development server:
npm startThe app will be available at http://localhost:3000
The app is configured for deployment on Netlify. To deploy:
- Build the app:
npm run build- Deploy the
builddirectory to Netlify:
- Log in to Netlify and create a new site.
- Connect your GitHub repository or upload the
buildfolder manually. - Set the build command to
npm run buildand the publish directory tobuild.
- Configure your Telegram bot:
- Use BotFather to set the Web App URL to your deployed Netlify site.
- Ensure the domain is served over HTTPS.
tel-bot-web-app/
├── netlify/
│ └── functions/ # Netlify serverless functions (if any)
├── public/ # Public assets
├── src/ # React source code
├── .gitignore
├── netlify.toml # Netlify configuration
├── package.json
└── README.md
The app includes the Telegram Web Apps JavaScript SDK via:
<script src="https://telegram.org/js/telegram-web-app.js"></script>Ensure that your Telegram bot is properly configured to launch the Web App.
Contributions are welcome! Please open an issue or submit a pull request for any improvements or suggestions.
This project is licensed under the MIT License. See the LICENSE file for details.
Made with 💡 by MuratOfficial