Desarrolla una pequeña aplicación web utilizando Next.js, Tailwind CSS y TypeScript que muestre la transcripción de una llamada telefónica en un componente que mapee cada mensaje tanto del agente como del usuario. La aplicación debe permitir al usuario hacer clic en cualquier parte de la transcripción y saltar automáticamente a esa parte específica del audio.
Utiliza Next.js como framework de React. Implementa la interfaz de usuario utilizando Tailwind CSS. Utiliza TypeScript para mejorar la calidad y la legibilidad del código.
Crea un componente que mapee cada mensaje (tanto del agente como del usuario) en la transcripción de la llamada.
Muestra la transcripción de la llamada en un componente con mensajes separados para el agente y el usuario. Reproduce el audio de la llamada. Permite al usuario hacer clic en cualquier parte de la transcripción para saltar a esa parte del audio. Proporciona controles de reproducción de audio básicos (reproducir, pausar, detener).
Haz que la aplicación sea completamente responsive para adaptarse a diferentes tamaños de pantalla.
Utiliza Tailwind CSS para estilizar la aplicación y agrega animaciones suaves para mejorar la experiencia del usuario.
Sube el código fuente de tu proyecto a un repositorio en GitHub y comparte el enlace con nosotros. Despliega la aplicación en Vercel y proporciona el enlace para que podamos probarla en línea. Enviar los enlaces junto a tu CV al correo [email protected]
Recuerda mantener un enfoque modular y escalable en tu código. La claridad, la legibilidad y la eficiencia del código serán consideradas en la evaluación. ¡Buena suerte y diviértete!
[ { "content": "¡Hola! Soy Maria, asesora de admisiones de la Universidad Online. ¿En qué puedo ayudarte hoy?", "role": "agent", "start": 1.005, "end": 6.331625 }, { "content": "Hola María, ¿cómo estás? Estoy viendo en sus redes que estaban mostrando algunas licenciaturas, algo que tenga que ver con tecnología o podría contar un poquito más.", "role": "user", "start": 7.24, "end": 15.562688 }, { "content": "¡Hola! Estoy bien, gracias por preguntar. En la Universidad Online ofrecemos la Licenciatura en Desarrollo de Software, una excelente opción relacionada con tecnología. ¿Te gustaría saber más detalles sobre este programa?", "role": "agent", "start": 17.028, "end": 29.02025 }, { "content": "Sí, ¿cuál sería el el plan de estudio?", "role": "user", "start": 30.369999, "end": 32.71 }, { "content": "El plan de estudios de la Licenciatura en Desarrollo de Software incluye materias como programación, diseño web, bases de datos y desarrollo de aplicaciones. ¿Te gustaría conocer más detalles sobre las asignaturas y duración del programa?", "role": "agent", "start": 34.359, "end": 47.744 }, { "content": "No, me gustaría el precio nada más. Gracias.", "role": "user", "start": 49.14, "end": 51.088 }, { "content": "El precio de la Licenciatura en Desarrollo de Software es de 36 mensualidades de dos mil ochocientos pesos mexicanos. ¿Te gustaría saber más sobre los", "role": "agent", "start": 52.838, "end": 61.523 } ]
https://drive.google.com/file/d/1hZv0jO9QVLWPkpr0f2vt0oik22muwUtX/view?usp=sharing
https://drive.google.com/file/d/17UNyr5WgRIuhunpL9ZeP9BOpiK2SvhGO/view?usp=drive_link
https://drive.google.com/file/d/1BTM4n_xyMshXwwAFcnsOk-1lr5Ofe-ua/view?usp=drive_link