Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/crusaderincode/tma-boilerplate
A complete boilerplate for building Telegram Mini Apps with modern web technologies: Next.js, TypeScript, TailwindCSS, Shadcn UI and Biome
https://github.com/crusaderincode/tma-boilerplate
boilerplate-nextjs nextjs shadcn-ui tailwind telegram telegram-mini-app tma
Last synced: about 2 months ago
JSON representation
A complete boilerplate for building Telegram Mini Apps with modern web technologies: Next.js, TypeScript, TailwindCSS, Shadcn UI and Biome
- Host: GitHub
- URL: https://github.com/crusaderincode/tma-boilerplate
- Owner: crusaderincode
- License: mit
- Created: 2024-09-10T15:29:04.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-10T15:43:14.000Z (4 months ago)
- Last Synced: 2024-10-13T00:21:53.394Z (3 months ago)
- Topics: boilerplate-nextjs, nextjs, shadcn-ui, tailwind, telegram, telegram-mini-app, tma
- Language: TypeScript
- Homepage:
- Size: 41 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Telegram Mini Apps (TMA) Boilerplate
This project provides a complete boilerplate for building Telegram Mini Apps with modern web technologies: Next.js, TypeScript, TailwindCSS, Shadcn UI and Biome to provide an efficient and easy to use development environment.
## What's inside?
- **Next.js + TypeScript**: Combine the power of React with TypeScript for robust, type-safe development.
- **TailwindCSS**: Quickly build and style your UI with this utility-first CSS framework.
- **Shadcn with Custom Colors**: Use pre-designed components with customizable color settings.
- **Telegram Theme Integration**: Automatically adjusts the app's theme based on Telegram's light or dark mode.
- **Seamless Authentication**: Easily integrate Telegram authentication with built-in support.
- **Auto-expand Feature**: Ensures your app automatically adjusts to full height within the Telegram client.
- **Environment Variable Management**: Easily configure settings for different environments.
- **Effortless Mocking**: Get started quickly with built-in mock environments for testing and development.
- **Easy Access to InitData**: Conveniently handle Telegram's authentication data with direct access to `initData`.
## Getting Started
1. Set up environment variables:
Copy the `.env.example` file to `.env`:
```bash
cp .env.example .env
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Open the provided URL in your Telegram client or browser.
## Links
- [Telegram Mini Apps Documentation](https://docs.ton.org/develop/dapps/twa)
- [Inspired by](https://github.com/serafimcloud/founder)
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is open source and available under the [MIT License](LICENSE).