Stick Note: Cómo una app de transcripción se convirtió en una herramienta de aprendizaje inclusivo
Un caso de estudio sobre cómo usé Next.js y el Vercel AI SDK para crear una experiencia de estudio más accesible.
💡 La Idea: El Problema que Quería Resolver
Durante mis años de estudiante, observé una barrera silenciosa pero inmensa: la dificultad de seguir una clase mientras se intenta tomar notas, procesar la información y no perder el hilo. Para los estudiantes con discapacidad auditiva, este desafío es aún mayor. La dependencia de la lectura de labios o de transcripciones posteriores a la clase crea un desfase que perjudica el aprendizaje.
Me pregunté: ¿Y si la tecnología pudiera eliminar esa barrera en tiempo real? ¿Qué pasaría si un estudiante pudiera ver una transcripción en vivo de lo que dice el profesor, justo al lado del PDF o las diapositivas de la clase? ¿Y si una IA pudiera, además, resaltar los temas más importantes de la conversación?
De esa visión nació Stick Note, un proyecto enfocado en la inclusión y en potenciar la capacidad de aprendizaje de todos los estudiantes, sin importar sus capacidades auditivas.
✨ Características Principales
- 📄 Transcripción en Tiempo Real: Visualiza la clase palabra por palabra mientras sucede, gracias a la integración con el SDK de IA de Vercel.
- 👁️ Vista Sincronizada: Estudia tus documentos (PDFs, diapositivas) en una pantalla dividida junto a la transcripción en vivo.
- 🧠 Análisis de Momentos Clave: La IA de Gemini analiza la transcripción para identificar y marcar los temas cruciales, fechas de examen o tareas mencionadas.
- 💬 Historial de Chat: Todas las transcripciones y chats se guardan, creando un archivo de estudio completo y consultable.
- ☁️ Almacenamiento en la Nube: PDFs, transcripciones y análisis se almacenan de forma segura en Supabase para un acceso fácil desde cualquier lugar.
🛠️ De la Idea al Código: Retos y Soluciones de Ingeniería
El mayor reto de Stick Note era técnico y de experiencia de usuario: ¿cómo construir una interfaz que presentara dos fuentes de información complejas (un documento y una transcripción en vivo) sin ser abrumadora y, al mismo tiempo, garantizar que la transcripción fuera precisa y rápida?
El Desafío de la Sincronización en Tiempo Real
La clave era la latencia. Una transcripción con retraso es casi inútil. La elección del Vercel AI SDK fue fundamental. Su abstracción sobre modelos de lenguaje como Google Gemini me permitió implementar un streaming de texto casi instantáneo desde el servidor al cliente.
Para la interfaz, opté por un diseño de pantalla dividida y responsiva con Tailwind CSS. El reto era mantener el rendimiento mientras se actualizaba constantemente el DOM con nuevo texto. Virtualizar la lista de transcripciones fue una optimización clave para evitar que la aplicación se ralentizara en clases largas.
Justificando el Stack: Decisiones y Trade-offs
- Next.js (App Router): Ideal para una aplicación de este tipo. Me permitió manejar la lógica de la transcripción en el servidor (Server Components) y mantener una UI reactiva y rápida en el cliente.
- Supabase: Lo elegí por su simplicidad para manejar tanto la autenticación de usuarios como el almacenamiento de archivos (PDFs) y datos estructurados (chats, metadatos de transcripciones). Su integración con PostgreSQL me dio la confianza de poder escalar en el futuro.
- Google Gemini y Vercel AI SDK: Esta combinación fue el motor de la inteligencia de la app. En lugar de solo transcribir, diseñé prompts específicos para que Gemini analizara el flujo de texto y detectara “eventos”: fechas, tareas, preguntas importantes. Fue un trade-off entre coste de API y valor añadido; decidí que el análisis de eventos era una característica diferenciadora que justificaba la inversión.
Hacer que la IA “Entienda” el Contexto Académico
Un prompt como “transcribe esto” no era suficiente. Tuve que entrenar al modelo dándole contexto. El prompt inicial le informa a Gemini que está transcribiendo una clase, le pide que preste especial atención a fechas, plazos y preguntas, y que estructure la salida de una manera específica. Este trabajo de prompt engineering fue lo que transformó una simple transcripción en un asistente de estudio inteligente.
🚀 Mi Rol en el Proyecto
Como único desarrollador, mi implicación fue total:
- Diseño de Producto y UX/UI: Conceptualicé la experiencia de usuario desde cero, enfocándome en la accesibilidad y la simplicidad para no añadir carga cognitiva al estudiante.
- Arquitectura y Desarrollo Full-Stack: Diseñé la arquitectura completa, desde el esquema de la base de datos en Supabase hasta la implementación del frontend con Next.js y React.
- Ingeniería de IA (Prompt Engineering): Diseñé y probé iterativamente los prompts para Gemini, optimizando tanto la precisión de la transcripción como la calidad del análisis de eventos.
- Gestión del Proyecto y Despliegue: Administré todo el ciclo de vida, desde la idea inicial hasta el despliegue en Vercel.
📈 Resultados y Mejora Continua
Stick Note pasó de ser un concepto a una herramienta funcional que ha recibido feedback muy positivo, especialmente de su público objetivo.
- Validación del Concepto de Inclusión: Las pruebas con usuarios, incluidos aquellos con dificultades auditivas, confirmaron que la visualización simultánea reduce significativamente la ansiedad y mejora la comprensión.
- Organización Automática: La función de análisis de eventos fue un éxito inesperado. Los usuarios valoraron enormemente tener un resumen automático de los puntos más importantes de la clase.
🤔 Reflexión y Aprendizaje
- La Accesibilidad no es una Característica, es el Fundamento: Este proyecto me enseñó a diseñar pensando primero en los usuarios con más barreras. Al hacerlo, la experiencia mejora para todos.
- La IA como Aumentador Cognitivo: La verdadera magia no está en la transcripción, sino en usar la IA para reducir la carga cognitiva del estudiante, permitiéndole centrarse en comprender en lugar de solo en registrar.
- El Poder de las Abstracciones: Herramientas como el Vercel AI SDK y Supabase son increíblemente poderosas. Me permitieron, como desarrollador individual, construir una aplicación con funcionalidades complejas de IA y backend en una fracción del tiempo que habría llevado hace unos años.
🔮 Lecciones y Próximos Pasos
Construir Stick Note fue un viaje gratificante que me demostró cómo la tecnología puede ser una fuerza ecualizadora en la educación.
El futuro de Stick Note incluye:
- Integración con LMS: Conectar la app con plataformas como Moodle o Canvas.
- Resúmenes Generados por IA: Al final de cada clase, generar un resumen automático de los temas tratados.
- Soporte Multilingüe: Expandir la funcionalidad de transcripción a otros idiomas.
Construido con ❤️ por Yamir Alejandro Rodas Elvir
