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