Contenido del curso
Crea tu primer app con SSR
- 6

Proyecto Helix Eye: de CSR a SSR
14:50 min - 7

Webpack para servidor Node con TypeScript
16:19 min - 8

Servidor Express con TypeScript desde cero
08:48 min - 9

Función template HTML dinámica en TypeScript
06:52 min - 10

renderToString y StaticRouter en el servidor
10:35 min - 11

Hidratación de React con hydrateRoot en SSR
11:38 min - 12

Prefetching de API en el servidor con Axios
13:00 min - 13

Inyectando initialProps del servidor a React
09:19 min - 14

Cómo inyectar estilos de SSR sin flickering
09:56 min
Bonus
Helix Eye como proyecto de portafolio
Resumen
Llevar el proyecto Helix Eye a tu portafolio como ingeniero front-end es la forma más directa de mostrar tus habilidades reales con APIs, theming y arquitectura de componentes. Aquí verás qué mejoras aplicar, qué features sumar y cómo presentarlo para destacar frente a reclutadores técnicos.
¿Qué mejoras puedes hacer al proyecto Helix Eye?
La base del curso ya tiene una landing page funcional, pero el verdadero salto ocurre cuando integras la API de la NASA y enriqueces la experiencia visual e interactiva. Una versión mejorada puede incluir traducción al inglés, animaciones en el menú y consultas dinámicas mediante query params.
Algunas mejoras concretas que puedes implementar:
- Animaciones suaves en el menú principal y transiciones entre vistas.
- Sistema de temas intercambiables usando Styled Components o SASS.
- Buscador conectado a la API de la NASA con filtros por tipo de contenido.
- Reproductor de audio integrado con soporte para transcription.
- Sección de favoritos persistente para guardar resultados.
¿Qué es la API de la NASA? Es un servicio público que te permite consultar imágenes, videos y audios espaciales mediante una query. Es ideal para practicar consumo de datos reales en proyectos front-end.
¿Cómo agregar temas y filtros con Styled Components?
El theming es una habilidad muy valorada porque demuestra que sabes manejar estado global y estilos dinámicos. Con Styled Components o SASS puedes definir variables de color y alternar entre modos claros, oscuros o personalizados con muy pocas líneas.
La lógica detrás es sencilla: defines un objeto de tema, lo pasas por contexto y tus componentes leen los valores. Cuando el usuario hace clic en otro tema, el contexto cambia y toda la interfaz se actualiza al instante.
Para los filtros, la idea es similar. Cuando buscas algo como Nebula, puedes filtrar por imágenes, videos o audios. Si la API no carga por ancho de banda, no pasa nada: tu interfaz debe manejar ese estado con elegancia mostrando un fallback o mensaje informativo.
¿Cómo se implementa una sección de favoritos? Guarda los resultados seleccionados en localStorage o en un estado global. Cuando el usuario regresa a la vista de favoritos, recuperas esos datos y los renderizas como tarjetas reutilizables.
¿Por qué subir Helix Eye a tu portafolio front-end?
Un proyecto que consume una API real, maneja temas, filtros, audio y persistencia demuestra mucho más que un to-do list. Habla de ti como alguien que resuelve problemas reales: latencia de red, manejo de errores, experiencia de usuario y arquitectura escalable.
La invitación es clara: toma el proyecto base, agrégale tu visión, documenta los retos que enfrentaste y cómo los resolviste. Eso es lo que diferencia un portafolio genérico de uno memorable.
Y recuerda que puedes obtener tu certificado del curso haciendo el examen o entregando tu proyecto terminado. Compártelo en redes sociales cuando lo tengas listo, me encantaría dejarte un comentario de felicitación.
¿Qué feature le vas a agregar tú a Helix Eye? Cuéntamelo en los comentarios y nunca pares de aprender.