DESIGNER_DEV

Estudio de caso

Bot de Telegram + Panel Admin

Proyecto diseñado como alternativa a un portfolio tradicional: en vez de recorrer una web, los proyectos se exploran desde Telegram con navegación y contenido gestionados desde un panel de administración.

Galería

Deslizá para ver más

1 / 12

  • Captura 1 del proyecto Bot de Telegram + Panel Admin

    Qr

    Vista de qr.

  • Captura 2 del proyecto Bot de Telegram + Panel Admin

    Token Para Ingresar Al

    Vista de token para ingresar al bot probalo.

  • Captura 3 del proyecto Bot de Telegram + Panel Admin

    Bienvenida Telgram

    Vista de bienvenida telgram.

  • Captura 4 del proyecto Bot de Telegram + Panel Admin

    Login Web

    Vista de login web.

  • Captura 5 del proyecto Bot de Telegram + Panel Admin

    Drawer

    Vista de drawer.

  • Captura 6 del proyecto Bot de Telegram + Panel Admin

    Menus Comandos Principales

    Vista de menus comandos principales.

  • Captura 7 del proyecto Bot de Telegram + Panel Admin

    Pantalla Comando Proyectos

    Vista de pantalla comando proyectos.

  • Captura 8 del proyecto Bot de Telegram + Panel Admin

    Temas Dentro De Ruta

    Vista de temas dentro de ruta proyectos.

  • Captura 9 del proyecto Bot de Telegram + Panel Admin

    Mensaje Del Tema Permite

    Vista de mensaje del tema permite html.

  • Captura 10 del proyecto Bot de Telegram + Panel Admin

    Segunda Imagen De Mensajes

    Vista de segunda imagen de mensajes donde se puede editar cada mensaje en particular dando un mismo estilo a el texto o pegar html directamente.

  • Captura 11 del proyecto Bot de Telegram + Panel Admin

    Metricas De Los Mas

    Vista de metricas de los mas clickeados.

  • Captura 12 del proyecto Bot de Telegram + Panel Admin

    Metricas De Comandos Mas

    Vista de metricas de comandos mas clickeados.

El problema

Administrar el contenido y la navegación de un bot solía requerir cambios de código, lo que generaba fricción operativa y menor velocidad de publicación.

La solución

Se construyó una plataforma con bot de Telegram + panel de administración para editar menús, temas, mensajes y comandos dinámicos sin deploy constante, centralizando la operación en una interfaz visual.

Detalles técnicos

Front-end

  • React
  • TypeScript
  • Vite
  • MUI
  • Recharts

Back-end

  • Node.js
  • Express
  • grammY
  • JWT

Datos

  • MySQL
  • TiDB Cloud
  • Sequelize

Funcionalidades

  • Gestión de bienvenida, menús, temas y mensajes
  • Comandos dinámicos para navegación en Telegram
  • Temas globales no atados a un menú
  • Editor de contenido con HTML simple
  • Panel de token y usuario para administración segura
  • Estadísticas por interacciones y períodos

Infraestructura

  • Render (API + webhook)
  • Netlify/Vercel (panel admin)
  • Monitoreo de uptime con cron-job.org

Resultado

  • Mayor velocidad para publicar contenido en el bot
  • Menos fricción operativa en mantenimiento
  • Administración centralizada del flujo conversacional