Telegram Bot with Next.js + Tailwind CSS + TypeScript starter packed with useful development features. Based on theodorusclarence/ts-nextjs-tailwind-starter
Made by @rogeliorv
This repository is ๐ battery packed with:
- โก๏ธ Next.js 14
- โ๏ธ React 18
- โจ TypeScript
- ๐จ Tailwind CSS 3 โ Configured with CSS Variables to extend the primary color
- ๐ Pre-built Components โ Components that will automatically adapt with your brand color
- ๐ Jest โ Configured for unit testing
- ๐ Absolute Import and Path Alias โ Import components using
@/
prefix - ๐ ESLint โ Find and fix problems in your code, also will auto sort your imports
- ๐ Prettier โ Format your code consistently
- ๐ถ Husky & Lint Staged โ Run scripts on your staged files before they are committed
- ๐ค Conventional Commit Lint โ Make sure you & your teammates follow conventional commit
- โฐ Release Please โ Generate your changelog by activating the
release-please
workflow - ๐ท Github Actions โ Lint your code on PR
- ๐ Automatic Branch and Issue Autolink โ Branch will be automatically created on issue assign, and auto linked on PR
- ๐ฅ Snippets โ A collection of useful snippets
- ๐ Default Open Graph โ Awesome open graph generated using og, fork it and deploy!
- ๐บ Site Map โ Automatically generate sitemap.xml
- ๐ฆ Expansion Pack โ Easily install common libraries, additional components, and configs
-
Use this repository as template
Disclosure: by using this repository as a template, there will be an attribution on your repository.
I'll appreciate if you do, so this template can be known by others too ๐
-
Using
create-next-app
npx create-next-app -e https://github.com/rogeliorv/teletubby project-name
-
Using
degit
npx degit rogeliorv/teletubby YOUR_APP_NAME
-
Deploy to Vercel
It is encouraged to use yarn so the husky hooks can work properly.
yarn install
You can start the server using this command:
yarn dev
Open http://localhost:3000 with your browser to see the result. You can start editing the page by modifying src/pages/index.tsx
.
This starter is using conventional commits, it is mandatory to use it to commit changes. (Every commit message should sart with fix: chore: feat: etc)
- Create a new bot using the BotFather
- Add your bot token as an env var in .env file to TELEGRAM_BOT_TOKEN
- Get a publicly visible URL, you can use ngrok or deploy to vercel - Once you have a public URL like: https://some.ngrok-free.app or https://teletubbybot.vercel.app add it to your NEXT_PUBLIC_APP_URL in your .env vars
- Register your webhook to telegram using (https://api.telegram.org/bot<YOUR_TOKEN>/setWebhook?url=<YOUR_URL>/api/telegramWebhook) (NOTE: Be mindful that "bot" word is prefixed to your token)
- Go to your bot and send it a message
- Click the launch button if you want to see your launched webapp within telegram