Deploy

💚 Like si quieres un curso “avanzado” donde hagamos deploy SIN EXPONER nuestra API KEY (entre otras cosas más “avanzadas”)
.
💪 Si llegamos a 300, me comprometo a… hacer mi mayor esfuerzo 😅 por grabarlo lo más pronto posible

Ay ese Ronald Mendoza, le dije que no era buena idea una clase de deploy porque se iban a exponer tus API Key 🌚

Con mucho esmero y sudor les comparto mi sitio, me costó sudor el scroll automatico de la sección bestRated movies

https://gilbertardila.github.io/movieAPI/#home

![](

![](

El buen @RetaxMaster

💡 Buenas prácticas para “proteger” API KEYs

Aquí mi sitio en Netlify , espero no me roben la API-KEY, pero la vida es un riesgo XD

Reto 1 - Hacer responsive
Reto 2 - Cargar las favorites movies sin recargar la página con el evento window
Reto 3 - Agregar idiomas
Reto 4 - Arreglar espacio en blanco abajo

Prometo hacer todos los retos y responder este mensaje con los updates

¡Gracias por el magnífico curso!

Buenísimos cursos, me enseñaron mucho, recomendados 100%. Aquí les dejo mi solución con reto completado https://pickone-free.netlify.app/

no lo subí pero así quedo

He subido mi sitio a Netlify, espero que les guste la estructura del proyecto.
.
Url del proyecto: https://platzi-movie.netlify.app
.
Lo he subido usando las buenas prácticas de como proteger las variables de entornos usando archivos .env y además empaquetando todo el proyecto con webpack, recomiendo hacer el Curso de Webpack con el profesor Oscar Barajas y si quieren ir al grano, esta clase me ayudó múcho a como desplegar un sitio web en netlify.
.
Les comparto mi proyecto en github: Click aquí

Dejo aquí el link de mi proyecto, todavía me queda realizar el responsive y algunos otros cambios en los estilos, pero el resto está funcionando. Tal vez le siga agregando funcionalidades utilizando la API de TMDB que tiene mucho para explotar.
¡Gracias por el curso! De este tipo son mis favoritos.

Les dejo mi proyecto https://devnielote.github.io/quick-watch/# 😁
No logré que funcionara el scroll infinito desde un celular, solo funcionaba correctamente desde el escritorio y las dev tools 😅

Los comparto el proyecto, que me tardé más tiempo del que imaginaba peeero me gustó mucho el resultado:

Les comparto mi deploy y mi repositorio 😉

Terminado, me encanta el resultado final, aunque aun hay detalles que pulir y animacion por añadir.
Aqui enlace The Moovies

Aquí les dejo mi app desplegada, aún tiene pequeños fallos(los cuales iré arreglando), pero es trabajo honesto, es el proyecto mas largo que he hecho 😃
MovieDP APP Cualquier retroalimentación es bienvenida

¡Que gran trilogia de cursos! Fue realmente un antes y un despues en mi forma de trabajar.

Muy buen curso, aprendi mucho y desde hace un tiempo para aca queria hacer una app de peliculas. Aqui mi version del proyecto:

• Demo
• Repo

Después de una semana termine mi proyecto:
recibo cualquier comentario constructivo.
https://riszart.github.io/riszmovie-page/public/index.html

Siento que puedo mejorar en CSS pero si fue gratificante que aunque no haya hecho un curso de CSS ya me puedo manejar mejor con tantos elementos y modificadores. Aquí les dejo el resultado, en un futuro le agregaré aún mas features 💚

Main section

Movie Detail

Internationalization

Creo que es hora de aprender un framework de JS luego de terminar esta trilogía de cursos…empezaré por REACT…espero haga una buena elección.

Así quedó mi aplicación, espero pronto aprender más de css y hacerla responsive:

https://diegotellezc.github.io/Moviepedia/

Este es mi repositorio: https://github.com/diegotellezc/Moviepedia/settings/pages

https://ghalliard.github.io/curso-api-rest-practico/
Dejo mi proyecto con muchos bugs y con muchas posibles mejoras. Falta implementar muchas cosas que tengo en mente, no sé cómo. Sin embargo, con lo que siga aprendiendo, encontraré la forma. Espero comentarios positivos y constructivos 😄 Excelente curso.
PSDT: solo tiene version mobile.

Les comparto el mio:

https://torofms37.github.io/cAPI-REST-Js/

Me hace falta desarrollar el sistema de cambio de idiomas, mientras tanto les comparto el trabajo que realicé. La trilogía de consumo de API han sido de los mejores cursos que he tomado. Felicidades JuanDC
https://bespoke-lokum-907380.netlify.app/

Aqui esta mi proyecto
![](

prometo mejorarlo…

https://dampdev.github.io/dampMovies/#home
agregue los trailer y el reparto de cada pelicula
y un preview antes de entrar a detalles

Para publicar tu repositorio público de GitHub en GitHub Pages sin exponer tu API key, puedes seguir los siguientes pasos:
.

1. Crea un archivo de configuración llamado .env en la raíz de tu repositorio local. Este archivo será ignorado por Git y no se incluirá en tu repositorio remoto.
   .

2. En el archivo .env, agrega la línea correspondiente a tu API key. Por ejemplo, si tu API key se llama API_KEY, agrega la siguiente línea al archivo:

   API_KEY=TU_API_KEY_AQUÍ
   

3. Asegúrate de tener un archivo de configuración para tu aplicación que lea la API key de la variable de entorno en lugar de tenerla codificada en el código. Por ejemplo, si estás utilizando JavaScript, podrías tener algo como esto en tu archivo de configuración:

   const apiKey = process.env.API_KEY;
   

4. Asegúrate de que el archivo .env se incluya en tu archivo .gitignore para que no se suba al repositorio remoto.
   .

5. Genera una versión compilada de tu aplicación que incluya el archivo de configuración actualizado.
   .

6. Crea un nuevo branch en tu repositorio local para GitHub Pages.
   .

7. Realiza el commit y el push de la versión compilada y los archivos necesarios para GitHub Pages a ese branch.
   .

8. Configura tu repositorio de GitHub para usar el branch de GitHub Pages como la fuente de publicación.
   .

9. GitHub Pages utilizará los archivos del branch que has configurado y no expondrá la API key, ya que el archivo .env no se ha incluido en el repositorio remoto.
   .

De esta manera, tu repositorio de GitHub Pages estará publicado sin exponer tu API key. Recuerda actualizar tu archivo de configuración y volver a generar una versión compilada de tu aplicación si necesitas cambiar la API key en el futuro.

https://www.freecodecamp.org/news/hide-api-keys-in-frontend-apps-using-netlify-functions/

Comparto mi proyecto, muy feliz del resultado, aún faltan cositas, pero bueno, por ahora así va:
Para no publicar la API_KEY, le agregué un prompt para que por ahora (mientras aprendo a ocultarla desde el backend) el usuario ingrese su API_KEY.
Le agregué el selector de idioma, y le puse los títulos de las secciones para que de forma dinámica cambien también de acuerdo a la selección de idioma del usuario.

https://lizzcoldev.github.io/curso-api-rest/#home
Repositorio: https://github.com/LizzColDev/curso-api-rest/tree/github-pages

Gracias Juan☺

Hola!!! he estado viendo las soluciones y me gustaron mucho, pero vi un tema que se repetía en muchas. Al momento de cambiar el idioma, cambian los nombres de todas las películas menos las que están agregadas a favoritos en LocalStorage.

Para solucionar esto, agregue en el método de createMovies, que al recorrer la lista de películas a dibujar buscara si esta ya se encontraba en la lista de favoritos, en caso de encontrarse, se actualiza la información con la película en el idioma nuevo, esto permitirá que a medida que se vayan cargando películas en distintos idiomas de vayan actualizando los idiomas de las películas de la lista de favoritos.

no se si se entienda, tampoco si es la forma correcta, pero dejo el código por si a alguien le sirve.

function createMovies(movies, container, { lazyLoad = false, cleanContainer = true, updateFav = false } = {})
{
	...
	 if(likedMoviesList()[movie.id] && updateFav) {
            const likedMovies = likedMoviesList();

            if(likedMovies[movie.id])
                likedMovies[movie.id] = movie;
        
            localStorage.setItem('liked_movies', JSON.stringify(likedMovies));

	   // Se actualiza la visualización de favoritos
            getLikedMovies();
        }
	...	
}

Asi se mira mi app

Le agregue un registro y un login, tambien agregue la watchlist y favoritos, todo con la misma api, próximamente se podrá calificar las películas, todo hecho con React.
repositorio: https://github.com/Takeout85/movie-app
pagina: https://takeout85.github.io/movie-app/