Movies for World

Secciones

• 1- Descripción del reto.
• 2- Instalación y ejecución
• 3- Descripción del desarrollo.
  • 3.1- Componentes.
  • 3.2- Servicios.

1- Descripción del reto

El reto consiste en la creación de una APP capaz de interactuar con los Endpoints de la API proporcionada por themoviedb.

Tecnologías:

• HTML5
• ES6
• Bootstrap
• REACT - REDUX
• API
• Git

Extra points:

• API Custom

Funcionamiento:

La aplicación nos permitirá buscar y mostrar títulos con los siguientes criterios:

• Título
• Título original
• Overview
• Listar 10 más populares

Extra Points:

• Género

Funcionamiento:

La aplicación nos permitirá mostrar información de un título.

• Poster
• Título, título original
• Fecha de lanzamiento
• Overview

Extra Points:

• Género
• Número de votos

Funcionamiento Extra:

¿Serías capaz de hacer un buscador alternativo de series por título dentro de la misma app?

Mostrando los mismos datos.

Requisitos de evaluación:

• Uso correcto de React y Redux

• Endpoints variados de búsqueda

• README completo en Github

El proyecto se evaluará por:

• Uso correcto de React

• Especificación ES6

• README completo enGithub

Extra:

Uso de Redux

Extra:

Libre Elección

Si bien en vez de nutrir tu app de la API de themovieDB prefieres interactuar con una API custom u otra de tu elección, eres libre de escoger! En caso de crear una API custom, siéntete libre de crear un entorno de endpoints CRUD. Recuerda que has de cumplimentar como mínimo todos los objetivos!.

2- Instalación y ejecución

Para poder usar la aplicación y comprobar su funcionamiento, debemos una vez clonado el repositorio usar el comando:

npm install

Luego para poder levantarlo y que se ejecute, debemos usar el comando:

yarn start

Recordar también poner, en la raíz del proyecto, nuestro .env con nuestra API KEY, tal cual como se indica el archivo del repositorio .envExample

3- Descripción del desarrollo

Como se nos pide en la descripción de último reto del bootcamp, debemos ser capaz de conectarnos a una API y recuperar los datos según los parámetros pasados y mostrarlos en los diferentes componente React que desarrollemos.

En mi proyecto, he usado además de las tecnología nombradas en los requisitos, otro framework para estilos, un middleware para llamadas asíncronas, una librería para manejar variables de entorno y otra para realizar llamadas a la API.

• React Bootstrap, para los estilos de los componentes.
• Redux Thunk, para crear ese middleware y usar llamadas asíncronas en el action de redux.
• DotEnv, la uso para la creación y utilización de variables entorno y así no exponer información sesible como la key de la API.
• Axios, esta librería la usamos para realizar llamadas a la API.

3.1-Componentes

He divido el proyecto en cuatro componentes principales.

• Navbar: Este es el primero que nos econtramos, el cual nos muestra el logotipo del proyecto y dos botones donde podremos elegir entre películas o series.

• NavForSearch: En este componente vamos a encontrar las diferente opciones de busqueda del proyecto, además de mostrarnos en dónde estamos haciendo la busqueda, en películas o series.

  Los tipos de busqueda serían:

  • Por título.
  • Por género.
  • Las 10 más populares.

• Genres:En este comoponente controlamos la búsqueda por géneros, ya sea para las películas o las series. Cargamos todos los géneros con una llamada al la API, ya que cada género tiene su id y además varían si buscas una película frente a la busqueda de series.

 useEffect(() => {

    if (typesForSearchGenre === 'movies') {
      getMoviesGenres().then(res => {
        let key = Object.keys(res.data);
        setTypeGenre(Object.values(res.data[key]));


      }).catch(err => console.log(err));


    } else if (typesForSearchGenre === 'series') {
      getTvGenres().then(res => {
        let key = Object.keys(res.data);
        setTypeGenre(Object.values(res.data[key]));

      }).catch(err => console.log(err));


    }

    if (searchType === 'SEARCH_BY_GENRE') {
      setTActive(true)
    } else {
      setTActive(false)
      setActiveContainer(false);

    }


  }, [typesForSearchGenre, searchType]);
    

• Container: Este componente es el encargado de mostrar las busquedas y crear la lista para mostrarla.

  La información que podemos encontrar es:

  • Título.
  • Título original.
  • Conteo de votos.
  • Média de votos.
  • Géneros.
  • Poster.
  • Sinopsis

3.2-Servicios

He dividído en dos los servicios utlizados en este proyecto.

• Redux: Aquí podremo encontrar la store, el action y el reducer de la aplicación y así poder usar Redux.
• TypeSearch: Es donde tengo todos los endpoints de la aplicación y donde realizo las llamadas con axios y uso el middleware Redux Thunk.