Cierre y próximos pasos con tu portafolio

Curso de API REST con Javascript: Performance y Usabilidad

Contenido del curso

No sé dónde empezar

Qué se debe optimizar en el frontend (y qué no)

Optimización de imágenes

Paginación

Almacenamiento local

Bonus

Próximos pasos

20
Cierre y próximos pasos con tu portafolio
Viendo ahora

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:08

Cierre y próximos pasos con tu portafolio

Curso de API REST con Javascript: Performance y Usabilidad

Clase 20 de 20

Clase 20 / 20

Recursos

Llegar al final del curso profesional de consumo de API REST con JavaScript significa que ya dominas el flujo completo: desde entender qué es una API hasta optimizar y desplegar un proyecto real. Aquí repasamos qué construiste, qué técnicas aplicaste y cómo convertir todo eso en un portafolio que abra puertas laborales.

¿Qué aprendiste a lo largo de la trilogía de API REST?

La ruta empezó en el curso de sincronismo, donde viste las diferencias entre XMLHttpRequest y fetch, y cuándo usar callbacks, promesas o async/await. Ese fue el cimiento para entender peticiones asíncronas en JavaScript.

En el primer curso de la trilogía profundizaste en los headers, las API keys y los métodos HTTP como GET, POST y PUT. Construiste una aplicación que consumía la API de gatitos y hasta subiste fotos de tus propios michis para practicar peticiones reales.

Luego diste el salto a un proyecto más ambicioso: Platzi Movies, consumiendo la API de TheMovieDB con Axios. Ahí trabajaste vistas dinámicas, películas en tendencia y, lo más interesante, navegación por hashes dentro de un mismo HTML para simular múltiples páginas.

¿Qué es la navegación por hashes? Es una técnica que usa el símbolo # en la URL para cambiar de sección sin recargar la página, permitiendo que un solo HTML se comporte como varias rutas distintas.

¿Cómo optimizaste el proyecto Platzi Movies desde el front?

No puedes acelerar el internet del usuario, pero sí puedes hacer que el tiempo de carga sea tolerable y evitar peticiones repetidas. Esa fue la idea base detrás de todas las mejoras.

Las técnicas que aplicaste fueron:

Caché de peticiones: si ya hiciste una solicitud hace poco, reutilizas esa información en vez de volver a pedirla.
Lazy loading de imágenes: cargas únicamente las imágenes visibles en pantalla y el resto aparece cuando el usuario hace scroll.
Infinite scrolling: en vez de mostrar solo los primeros 20 resultados, sigues paginando automáticamente para que el usuario se quede más tiempo en la app.
Local Storage: almacenamiento local en el navegador para guardar preferencias y favoritos sin necesidad de un sistema de autenticación.

Cada técnica resuelve un problema distinto: caché ahorra red, lazy loading ahorra ancho de banda, infinite scrolling mejora retención y Local Storage da persistencia del lado del cliente.

¿Por qué nunca debes guardar datos privados en Local Storage?

Local Storage vive en el navegador del usuario y es accesible desde cualquier script que corra en tu sitio. Eso lo hace perfecto para guardar películas favoritas o el idioma seleccionado, pero terrible para tokens sensibles, contraseñas o información personal. Úsalo como complemento, no como bóveda.

¿Qué funcionalidades extra le agregaste al proyecto?

Más allá de las optimizaciones, sumaste detalles que hacen que la aplicación se sienta viva. Implementaste un botón de like que guarda películas favoritas y que mantiene su estado aunque recargues la página. La coherencia visual entre rutas ya no se pierde.

Después vinieron los retos: la selección de idioma y la sincronización de la sección de favoritos con cualquier cambio en Local Storage. Resolverlos te obligó a pensar en reactividad sin frameworks, solo con JavaScript puro.

¿Qué es Local Storage en JavaScript? Es un almacenamiento clave-valor dentro del navegador que persiste aunque cierres la pestaña. Lo lees y escribes con localStorage.setItem() y localStorage.getItem().

¿Cómo hiciste el deploy a GitHub Pages con una API key?

El deploy tuvo truco. Creaste una rama nueva y eliminaste el archivo secrets.js del gitignore para que la API key quedara expuesta en esa rama específica y GitHub Pages pudiera servir la aplicación funcionando.

Funciona para un proyecto personal de práctica, pero ojo: para aplicaciones de empresa, productos comerciales, sistemas con pagos o datos privados, esta práctica es peligrosa. Lo correcto es controlar tu propio backend, guardar las API keys en variables de ambiente y nunca exponerlas en el front.

Ese es el siguiente paso natural si continúas la Escuela de Desarrollo Web: aprender backend para proteger tus claves.

¿Cómo conviertes este aprendizaje en un portafolio que te consiga trabajo?

Ya sabes consumir API REST a nivel profesional. Ahora toca multiplicar proyectos. Vuelve al repositorio de Public APIs que viste en clases anteriores y elige cualquier API, con o sin autenticación, para construir algo nuevo desde cero.

Ideas concretas para tu portafolio:

Toma una API pública distinta y replica las técnicas: caché, lazy loading, infinite scrolling y favoritos con Local Storage.
Usa Local Storage como fuente de información extendida, no solo como almacén de preferencias.
Hazlo responsive. Que se vea igual de bien en móvil, tablet y escritorio.
Añade detalles creativos que te diferencien de otros candidatos.

Un portafolio sólido no garantiza empleo inmediato, pero aumenta muchísimo tus probabilidades. Una empresa que abre tu repositorio y ve proyectos optimizados, desplegados y con creatividad propia, te toma en serio.

¿Qué hacer si sientes que aún no estás listo?

Hazlo igual. Intenta el proyecto, fallar también enseña. Si algo no funciona, usa la sección de preguntas para pedir apoyo, pero no te detengas. La diferencia entre quien consigue trabajo y quien no, muchas veces, es simplemente haberlo intentado.

Presenta el examen del curso para obtener tu diploma y, si el contenido te aportó, deja cinco estrellas en la calificación. Cuéntame en los comentarios la URL pública de tu proyecto desplegado, me encantaría verlo.