emepuchades/podcaster-app

Aplicación para escuchar podcasts musicales

Tabla de contenido

• Información básica
• Setup
• Inicialización del proyecto
• Configuración de entorno
• Especificación
  • 1 - Vista principal
  • 2 - Detalles de un podcast
  • 3 - Detalles de un capítulo de un podcast

Información básica

Creación de una mini-aplicación para escuchar podcasts musicales.

Setup

Clonar repositorio

git clone https://github.com/emepuchades/prueba-podcasts-musicales.git

Instalar dependencias

npm install

Iniciar en modo development (assets sin minimizar)

npm run dev

Iniciar en modo production (assets minimizados)

npm run prod

Iniciar test

 npm run test

Inicialización del proyecto

feat: create react app with webpack

• Creé la app de React desde cero usando el comando: npm init -y.
• Creé el archivo de configuración de Webpack por defecto y añadí el script de inicio.

Configuración de entorno

feat: differentiated configuration for development and production environments in webpack and package

• Configuré el archivo de Webpack para diferenciar entre desarrollo y producción.
• Añadí los scripts en el package.json para desarrollo y producción.

Vista principal

feat: add function to get the list of podcasts

• Creé la estructura de la card en un componente.
• Implementé la llamada a la API de get podcast en getPodcast.js.

feat: add styles to the podcast card

• Añadí estilos a la card.

feat: add store and slice to manage podcast list

• Configuré el podcast para que se guarde y no realice la petición nuevamente hasta dentro de 24 horas. Implementado con slice de redux y localstorage.

feat: add filtering in podcast list

• Creado el filtro para el listado de podcast.

Detalles podcast

feat: add routes and podcast details page

• Implementé el Router para la navegación a los detalles del podcast y cree un componente para el header.

feat: create podcast details with styling and functions for date and time calculation

• Creado el podcast details con todos los estilos y mostrando la información. Con un componente para la card donde estan la información del podcast y otro componente para la tabla de listado de episodios.
• Implementadas funciones para cambiar el formato de la fecha y calcular el tiempo.

Detalles capitulo podcast

feat: add link episode to player and functionality

• Añadido un enlace en el episodio para acceder al reproductor.
• Implementados estilos y funciones del reproductor. Y utilice el componente de card hecho anteriormente para la vista de detalles podcast.