Як я втомився писати ботів з нуля і створив власний візуальний конструктор для Telegram

Привіт, спільното! Мене звати Андрій, і я хочу поділитися досвідом розробки свого pet-проекту, який переріс у повноцінну SaaS-платформу.

За останні роки Telegram став основним каналом комунікації для бізнесу в Україні. Мене часто просили «зробити простого бота-візитку» або «прикрутити ChatGPT до підтримки». Кожного разу писати це з нуля (навіть маючи шаблони) ставало все нудніше.

Існуючі конструктори (на кшталт ManyChat) — круті, але вони мають свої мінуси: або занадто дорогі для малого бізнесу (оплата за кожного підписника), або не дуже зручні, або мають обмеження на інтеграцію сучасних ШІ.

Тому я вирішив зробити своє рішення — платформу TgHub.

Технічний стек

Платформу я будував як класичний сучасний SPA:

  • Frontend: React, TailwindCSS, Framer Motion (для анімацій), React Flow (для візуального конструктора вузлів).
  • Backend: Node.js, Express.
  • Database: MySQL з Prisma ORM.
  • Інфраструктура: Redis + BullMQ (для надійної обробки масових розсилок та черг завдань).

З якими проблемами я зіткнувся

Найбільшим челенджем був, як не дивно, візуальний конструктор (Flow Builder). Зробити так, щоб користувач міг інтуїтивно перетягувати блоки, з’єднувати їх лініями, а бекенд міг правильно інтерпретувати цей «граф» і перетворити його на реальний сценарій бота — це та ще задачка на логіку.

Другий біль — розгортання (Deployment) на віртуальному хостингу.

Через специфічні обмеження панелі керування (заборона на вільні порти, власні Nginx проксі), мені довелося глибоко розбиратися, чому мій Node.js сервер висить як «зомбі», тримаючи порт 3000, і як правильно прокидати X-Forwarded-For для rate-лімітів.

Що вийшло в результаті

Зараз TgHub вміє:

  • Візуально будувати логіку бота (як в Miro чи Figma).
  • Інтегруватися з ШІ: можна дати боту промпт, і він буде спілкуватися з клієнтами через ChatGPT.
  • Робити масові розсилки: з фільтрацією по тегах.
  • Збирати аналітику: географія клієнтів, кількість натискань на Smart Links. 🤝

Зараз проект знаходиться на стадії відкритого бета-тестування.

Я буду дуже вдячний за будь-який технічний фідбек, пошук багів, критику UX або поради щодо архітектури від ком’юніті.

🌐 Сайт проекту: tghub.recvik.com.ua

Пишіть у коментарі ваші враження, і якщо хтось хоче потестувати PRO-функції (наприклад, ШІ чи безліміт користувачів) — дайте знати, видам безкоштовні доступи для своїх!

Дякую за увагу!

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

👍ПодобаєтьсяСподобалось3
До обраногоВ обраному1
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Якесь «демо» на лендосi не дуже. Тут мабуть добре було б вiдео з split-screen: як рухаємось по блоках i що в цей час вiдбувається в самому ботi.

Підписатись на коментарі