Entrevista ReactJS

Bienvenido a tu prueba de ReactJS, a continuación encontrarás una serie de requerimientos con los cuales deberás realizar un ejercicio práctico.

La prueba general se divide en pequeños ejercicios con los cuales se evaluará en práctica:

• Pensamiento lógico.
• Resolución de problema.
• Tiempo de desarrollo.
• Entre otros.

Finalizada la prueba recuerda enviar link del proyecto o tu repositorio a [email protected] con tu información de contacto y en el asunto colocar: REACT-JS-INTERVIEW

Recomendación: No importa terminar todos los ejercicios, lo más importante es la funcionalidad del ejercicio resuelto(s).

Contexto:

Utilizando la api de Youtube Napster construir una WebApp que permita obtener un listado de los videos mediante una búsqueda. Haciendo uso de "Drag & Drop" agregar los videos a una lista y ordenarlos, luego de ordenados poder reproducir los videos en el orden especificado o poder dar click para reproducir una canción en concreto.

Antes de empezar:

• La data a consumir proviene de Youtube Napster

Ejercicios

1. Home.

Image Home

Image Play

REQUERIMIENTO: Se requiere una vista "HOME" donde muestre en cuadrícula las canciones resultado de la búsqueda. Estos resultados servirán para dos (2) cosas:

• 1. Crear lista de reproducción.
• 2. Poder reproducir una(1) canción dando click sobre ella, la cual lo llevará a una ruta llamada /play/{track}

• Vista principal SEARCH_TRACKS_LIST

  • RUTA: /home

• Vista detalle TRACK_DETAIL

  • RUTA: /play/{track}

• Vista 404

  • RUTA: /404
  • HTML: A tu gusto.
  • NOTA: Debes poder re-direccionar rutas que no existan a 404

---

2. Componentes.

REQUERIMIENTO: Se requiere hacer en componente la lista Drag & Drop y el reproductor para su uso práctico. Ejemplo <favorite-list data="data"></favorite-list>

---

3. LocalStorage

REQUERIMIENTO: No estamos usando una base de datos, vamos a usar el localStorage del navegador para almacenar los datos volátiles.

4. Compartir lista de reproducción

REQUERIMIENTO: Como no tenemos una base de datos vamos utilizar el ingenio para compartir la data por la url, para ello recomiendo usar algún package que nos facilite el empaquetado de la data, puede ser (object-hash) o otro de su preferencia, o si lo desean pueden crear su propio script. La idea es que pueda compartir un url similar a la siguiente https://miproyecto.demo/playlist/{hash}

Extra.

Si has llegado hasta este punto, y consideras que tienes tiempo se valora el hecho de que puedas desplegar tu proyecto en Heroku o en cualquier servidor de tu gusto.

Gracias a https://github.com/miguelseguramx y sus aportaciones!

Gracias por participar!