ia

Askora: Cómo construí una plataforma de Q&A con IA en un fin de semana

Maximiliano Romero 14 de abril de 2026
Askora: Cómo construí una plataforma de Q&A con IA en un fin de semana

Askora: Cómo construí una plataforma de Q&A con IA en un fin de semana

Home de Askora

Todo comenzó un viernes por la noche. Estaba viendo YouTube cuando me topé con el video de Midudev anunciando la Hackathon patrocinada por CubePath. La premisa era clara y el tiempo limitado. En lugar de sobrepensar, decidí enfocarme en un problema real que veo constantemente en streams y eventos en vivo: la gestión de preguntas de la audiencia.

Así nació Askora, una plataforma para darle voz a la audiencia sin volver loco al presentador.

La Filosofía: Utilidad y Simpleza desde el Día 1

Mi objetivo principal para este fin de semana fue no perderme en detalles innecesarios. Quería un producto funcional, útil y simple.

El problema a resolver: los chats se saturan, las preguntas se repiten y el creador de contenido no sabe qué responder. La solución: Un panel donde la audiencia envía preguntas, vota las mejores y, mediante Inteligencia Artificial, se agrupan automáticamente las que son similares.

Dashboard de Askora

En otras palabras: menos ruido, más señal. La audiencia participa sin competir contra el scroll infinito del chat, y el presentador recibe una lista priorizada, con preguntas “fusionadas” para evitar duplicados.

La Arquitectura y el Stack Tecnológico

El sábado por la mañana me senté a diseñar la arquitectura. Necesitaba algo robusto pero que me permitiera iterar rápido. Decidí separar la aplicación en tres servicios principales orquestados con Docker Compose: una SPA para el frontend, una API REST/WebSocket para el backend, y una base de datos relacional.

Diagrama de arquitectura de Askora

Como se puede observar en el diagrama, el flujo de la aplicación está diseñado para ser altamente reactivo y escalable:

  1. Cliente (Frontend): Los usuarios interactúan con una SPA construida en React y servida por Nginx. Las peticiones REST tradicionales manejan el CRUD básico, mientras que las conexiones WebSocket (Socket.IO) mantienen el estado en tiempo real.
  2. API Gateway (Backend): El servidor NestJS actúa como el orquestador central. Recibe los eventos de WebSocket y las peticiones HTTP, validando la autenticación mediante JWT.
  3. Capa de Datos: Prisma ORM se encarga de la persistencia en PostgreSQL, garantizando la integridad de los datos de pools, preguntas y usuarios.
  4. Integración de IA: Cuando se recibe una nueva pregunta a través de WebSockets, el backend se comunica asíncronamente con la API de Groq (o OpenRouter) para analizar la semántica y decidir si debe fusionarse con una pregunta existente o crear una nueva.

Frontend: React 19 y Ecosistema Moderno

Para la interfaz de usuario, aposté por lo último:

  • React 19 con Vite: Para un entorno de desarrollo ultrarrápido y un build optimizado.
  • TailwindCSS v4 y shadcn/ui: Esta combinación me permitió construir componentes accesibles, responsivos y con un diseño limpio en tiempo récord, sin tener que escribir CSS desde cero.
  • Zustand: Para el manejo del estado global, manteniendo la simplicidad frente a alternativas más pesadas como Redux.
  • Socket.IO Client: Fundamental para la comunicación bidireccional en tiempo real.

Backend: NestJS y PostgreSQL

El corazón de Askora necesitaba manejar concurrencia y lógica de negocio compleja:

  • NestJS: Su arquitectura modular me permitió separar rápidamente la lógica de autenticación, los WebSockets (Gateways) y los servicios de IA.
  • Base de Datos: Utilicé PostgreSQL 16 gestionado a través de Prisma ORM, lo que me dio un tipado estricto de extremo a extremo y migraciones seguras.

Panel de administración del pool

El “objeto” principal de la app es el pool: un espacio de Q&A asociado a un evento o charla. Desde ahí se controla el acceso (público/privado), se observa la actividad en vivo y se modera el contenido cuando hace falta.

Formulario para crear un pool

Configuración de Usuario y Autenticación

Implementé un sistema de autenticación dual con Passport, soportando JWT clásico (email y contraseña) y Google OAuth para facilitar el acceso rápido de los usuarios.

Un detalle importante en la experiencia de usuario es la gestión de credenciales. En la sección de configuración, el sistema detecta de forma inteligente cómo se registró el usuario. Si el usuario creó su cuenta utilizando el método tradicional (email y contraseña), se le habilita la opción para cambiar su contraseña de forma segura. Sin embargo, si el usuario se registró a través de Google OAuth, esta opción se oculta automáticamente para evitar confusiones, ya que la gestión de esa contraseña depende enteramente de Google.

Configuración de usuario

El Reto del Tiempo Real y la IA

El mayor desafío técnico fue orquestar los eventos de WebSockets con las llamadas a la IA. Cada vez que entra una pregunta nueva, el sistema no la guarda ciegamente. Primero, evalúa el contexto de las preguntas existentes en ese pool específico. Si la IA detecta que la pregunta es semánticamente similar a una ya existente, en lugar de crear una nueva entrada, incrementa los votos de la original y añade el contexto de la nueva. Todo esto ocurre en segundo plano, actualizando instantáneamente la vista de todos los clientes conectados a través de Socket.IO.

Vista del participante

La clave para que esto “se sienta bien” fue cuidar dos cosas:

  • Latencia percibida: aunque la IA tarde, la interfaz no debe trabarse. Se puede mostrar la pregunta de forma optimista y luego “fusionarla” si corresponde.
  • Consistencia: el backend es la fuente de verdad. Los clientes reciben eventos del pool y reconcilian estado, evitando glitches de UI en picos de actividad.

Para que la audiencia entre rápido, también agregué una pantalla simple de acceso al pool por código/enlace.

Pantalla para ingresar a un pool

Soporte Bilingüe Nativo (i18n)

Sabiendo que los creadores de contenido tienen audiencias globales, diseñé Askora para ser bilingüe desde el principio. Utilizando react-i18next, implementé soporte completo en Español e Inglés. La plataforma detecta automáticamente el idioma del navegador del usuario, pero también permite cambiarlo manualmente. Esto asegura que tanto el presentador como la audiencia tengan una experiencia fluida en su idioma nativo.

Despliegue en CubePath

Para coronar el domingo, tocaba desplegar. Gracias al crédito gratuito de la hackathon, levanté un VPS en CubePath. Para mantener la simpleza operativa, instalé Dokploy en el servidor. Empaqueté los tres servicios (Frontend, API y Base de Datos) usando Docker Compose. Para la configuración del dominio y asegurar la conexión con SSL, utilicé sslip.io para obtener un dominio limpio de forma rápida y sencilla. En cuestión de minutos, Traefik estaba gestionando los certificados y Askora estaba en vivo en askora.45-90-237-254.sslip.io.

Lo que funcionó (y lo que aprendí)

  • Elegir un “core loop” claro: crear pool → enviar preguntas → votar → ver ranking; todo lo demás es secundario.
  • Diseñar para el tiempo real desde el inicio: Socket.IO me permitió evitar un montón de complejidad que aparece cuando intentás “parchar” real time al final.
  • IA con límites y propósito: la IA no está para “meter IA”, está para resolver repetición/ruido. En este caso, agrupar preguntas similares mejora directamente la experiencia.
  • Productividad real: shadcn/ui + Tailwind + Prisma + NestJS = velocidad sin perder demasiado orden.

Próximos pasos (si lo retomo)

Si vuelvo a iterar sobre Askora, los siguientes upgrades tendrían más impacto:

  • Moderación: estados por pregunta (pendiente/aprobada/oculta) y filtros para el presentador.
  • Anti-spam: rate limit por usuario, captcha suave y heurísticas simples.
  • Calidad de “merge”: cacheo por pool, thresholds configurables y un panel para deshacer/forzar fusiones.
  • Export: descarga a PDF/CSV con el historial de preguntas y respuestas.

Ejemplo de exportación a PDF

Conclusión

Construir Askora en un fin de semana fue un sprint intenso pero increíblemente gratificante. Demuestra cómo, priorizando las funcionalidades core y aprovechando herramientas modernas (y gratuitas) de IA, se puede pasar de una idea de viernes por la noche a un producto full-stack desplegado el domingo.

El proyecto ya no está online, pero puedes revisar el código completo en el repositorio de GitHub oficial: github.com/Codeartec/askora

¡Gracias por llegar hasta aquí!

Si quieres que hablemos, escríbeme por Twitter o Instagram.


Maximiliano Romero
Fundador de Codeartec
Desarrollador de Software

¿Te gustó este artículo? ¡Compártelo!