Podcaster App

Podcaster App es una aplicación web que permite a los usuarios escuchar y descubrir sus podcasts favoritos de iTunes. Los usuarios pueden buscar por nombre de podcast o autor y explorar una amplia variedad de episodios disponibles.

Requisitos

Vista Principal

• Mostrar una lista de los 100 podcasts principales según las clasificaciones de Apple.
• Después de obtener la lista del servicio externo por primera vez, almacenarla localmente para que solo se solicite nuevamente si ha pasado más de un día desde la última solicitud.
• Permitir a los usuarios filtrar los podcasts ingresando un texto de búsqueda, considerando tanto los títulos de los podcasts como los nombres de los autores.
• Habilitar un filtrado inmediato a medida que el usuario escribe.
• Cuando un usuario haga clic en un podcast, deberán navegar a la vista detallada de ese podcast.

Vista de Detalle de Podcast

• Mostrar una barra lateral con la imagen del podcast, su título, autor y descripción.
• Mostrar una sección principal que muestre el número actual de episodios del podcast, junto con una lista de episodios que indiquen su título, fecha de publicación y duración.
• Después de obtener los detalles del podcast desde el servicio externo por primera vez, almacenarlos localmente y solo solicitar nuevamente si ha pasado un día desde la última solicitud.
• Cuando un usuario haga clic en el título de un episodio, deberán navegar a la vista detallada de ese episodio.

Vista de Detalle de Episodio

• Mostrar la misma barra lateral que en la vista anterior.
• Tanto la imagen como el título del podcast y el autor deben enlazar de nuevo a la vista de detalle del podcast (permitir que estos componentes tengan los mismos enlaces en la vista anterior también).

Encabezado

• Mostrar una sección principal que muestre el título del podcast, descripción y un reproductor de audio básico HTML5 para reproducir el podcast.
• Tener en cuenta que algunas descripciones de episodios contienen HTML y mostrarlo interpretado, no escapado.
• El título de la aplicación debe enlazar a la vista principal de la aplicación.
• Mostrar un indicador visual en la esquina superior derecha de la página cada vez que comience una navegación en el cliente. Este indicador debe desaparecer después de que la transición a la nueva vista esté completa.

Recursos

• URL para obtener la lista de los 100 podcasts principales: Top 100 Podcasts
• URL para obtener detalles de un podcast: Detalles del Podcast
• Servicio para acceder a recursos externos que no proporcionan JSONP ni encabezados CORS: AllOrigins

Requisitos Técnicos

• Las URLs deberán ser limpias de modo que no se permite el uso del hash (#) para gestionar el enrutado.
• Está permitido el uso de cualquier librería JS/CSS salvo los frameworks específicos AngularJS y Ember.
• Se permite el uso de sintaxis ES2020 de Javascript.
• Se permite el uso de herramientas tipo Webpack o Parcel.
• La aplicación solo será revisada en la última versión de Google Chrome de escritorio, por lo que no es necesario tener en cuenta las particularidades de otros navegadores ni de tamaños de pantalla pequeños.
• No será necesario realizar una gestión de errores de cara al usuario. Si se produce un error, solo se deberá mostrar en la consola del navegador su mensaje y su traza.

Tecnologías Utilizadas

• JavaScript
• React
• TypeScript
• HTML5
• Tailwind CSS
• Jest
• Vite

Instrucciones de Ejecución

Modo de Desarrollo

1. Asegúrate de tener Node.js y npm instalados en tu sistema.

2. Abre una terminal en la carpeta raíz del proyecto.

3. Instala las dependencias del proyecto ejecutando el siguiente comando: npm install

4. Inicia la aplicación en modo de desarrollo con el siguiente comando: npm run dev

5. Abre tu navegador y navega a la URL proporcionada para ver la aplicación en modo de desarrollo.

Modo de Producción

1. Asegúrate de tener Node.js y npm instalados en tu sistema.

2. Abre una terminal en la carpeta raíz del proyecto.

3. Instala las dependencias del proyecto ejecutando el siguiente comando: npm install

4. Construye la aplicación para producción usando el siguiente comando: npm run build

5. Una vez que la construcción haya terminado, sirve la aplicación desde la carpeta dist utilizando live-server con el siguiente comando: live-server --entry-file=index.html o puedes ejecutar el comando npm run preview para hacerlo automáticamente.