Durante las últimas 3 semanas he estado trabajando en un nuevo diseño para la aplicación de música que vendo en Code Canyon, el diseño es en tonos obscuros y agrega algunas nuevas características a la aplicación actual.

En este curso vamos a tomar tres pantallas de ese diseño y las vamos a implementar en React. Vamos a iniciar configurando Webpack, instalando Babel, CSS modules y todo lo necesario para poder automatizar nuestros bundles.

El login

La primer pantalla a realizar será el login, aquí crearemos un formulario donde vamos a crear algunos componentes que re-usaremos en otros lugares, como el TextField y Button, la pantalla final quedará algo así:

Login

En este curso, nos limitaremos solamente a crear el front-end, pero vamos a integrarlo con un API que se encargará de verificar las credenciales en la base de datos.

Discover

En esta pantalla consultaremos el API para obtener la información a desplegar, luego vamos a crear los componentes necesarios para renderizar esa información correctamente.

Discover View

Cada canción contendrá un link al album y a la página del autor. Usaremos React Router para manejar links y redirecciones.

En esta pantalla el usuario podrá tocar la canción haciendo mouse-over sobre la imagen, pero reproducir el mp3 estará fuera del scope de este curso, posiblemente haga un curso avanzado más adelante donde incluya esa funcionalidad.

Album

En esta pantalla el usuario podrá ver la lista de canciones dentro de un album, consultaremos el API para sacar esa información y desplegaremos la lista de canciones con la información obtenida. 

Asi mismo desplegaremos la información del album y un par de botones para permitir al usuario realizar ciertas acciones.

Album

Reproducir la canción esta fuera del scope de este curso, ya que la idea de este curso es mostrar los fundamentos de React al desarrollar aplicaciones.

Producción

Todo el código mostrado en este curso estará listo para ser usado en producción, de hecho planeo terminar este desarrollo y vender esta app en Code Canyon junto con el backend que ya estoy vendiendo.

Cabe resaltar que el backend a utilizar en este curso es usado para server aproximadamente 50K usuarios, en una comunidad que tengo donde los usuarios escuchan música de manera gratuita.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Introducción a React JS, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!