💚 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
Qué se debe optimizar en el frontend (y qué no)
Tu responsabilidad como frontend developer
Caché vs. memoria
Debuggeando caché y networking
Quiz: Qué se debe optimizar en el frontend (y qué no)
Optimización de imágenes
Loading spinners vs. loading skeletons
Reto: pantalla de carga
Intersection Observer
Lazy Loading
Imágenes por defecto
Quiz: Optimización de imágenes
Paginación
Scroll infinito vs. paginación
Botón de cargar más
Infinite Scrolling: evento de scroll
Infinite Scrolling: limitando la carga de datos
Infinite Scrolling: closures de navegación
Quiz: Paginación
Almacenamiento local
Local Storage vs. API real
Botón de like
Guardando películas en Local Storage
Lista de películas favoritas
Quiz: Almacenamiento local
Bonus
Reto: selección de idioma
Deploy
Próximos pasos
Más proyectos para tu portafolio
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 32
Preguntas 6
💚 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
, 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.
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 💚
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:
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
 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/
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.