Desarrollo de Votaciones y Galería en Astro

·1h 07m

Optimización de la Galería

Se realizó una implementación de tipo Masonry para mejorar la estética y carga de la galería de imágenes.

• Se optimizaron las imágenes mediante scripts utilizando Bun para reducir su tamaño manteniendo una calidad aceptable.
• Se implementó una técnica de carga diferida donde solo se cargan minúsculas inicialmente, mejorando significativamente el Performance.

Autenticación con Twitch

El locutor integra el sistema de autenticación utilizando el paquete auth-astro.

"Los React Server Components, esta idea de quitar la frontera de servidor y frontal, ya veis que no siempre es tan buena idea."

Se detalló el proceso de configuración en Twitch Developer Console y la gestión de variables de entorno necesarias para el despliegue seguro en entornos de producción.

Sistema de Votaciones Dinámico

Se construyó un componente interactivo para permitir a los usuarios emitir sus votos mediante los siguientes pasos:

• Creación de un endpoint API (candidates.json.ts) en Astro para obtener los datos de los nominados de manera filtrada.
• Gestión del estado con Preact para manejar la navegación entre categorías de manera eficiente.
• Lógica de negocio para limitar los votos a un máximo de cuatro por categoría, asegurando la integridad del sistema.

Temas

Astro Preact Twitch API Web Performance OAuth Masonry Gallery

Capítulos

5 chapters