Desarrollo Web en Vivo: Diseño y Estilos con Tailwind
Diseño y Estilización con Tailwind CSS
En esta sesión de desarrollo en vivo, el enfoque principal ha sido la maquetación y estilizado de una plataforma de votación para tecnologías web, utilizando un enfoque minimalista. A continuación, se destacan los puntos clave:
• Estilo visual: Se optó por un esquema de color inspirado en JavaScript (amarillo como color base, con ajustes hacia colores más oscuros para mejorar el contraste). Se debatió intensamente sobre la legibilidad y la accesibilidad (contraste en Lighthouse) para no sacrificar la experiencia de usuario por la estética.
• Implementación de componentes: Se discutió la arquitectura del proyecto, decidiendo utilizar estructuras basadas en componentes y la integración de Headless UI para la funcionalidad, evitando así el exceso de visualización predeterminada de otras librerías como Chakra UI o Daisy UI.
• Tecnologías y herramientas:
"Tailwind se siente como si llenaras style en HTML."
* Configuración de un contenedor principal con Tailwind CSS.
* Uso de grids y gestión de flexbox para organizar los elementos de la votación.
* Implementación de TypeScript para mejorar la seguridad y el autocomplete al manejar la sesión de usuario con NextAuth.
Gestión de Estado y Autenticación
Manejo del usuario
Se revisó el flujo de autenticación, integrando NextAuth y asegurándose de que la interfaz de usuario reflecte correctamente el estado actual (autenticado/no autenticado). El desarrollador hizo énfasis en la limpieza del código y la necesidad de extraer la lógica a componentes reutilizables, evitando la "drilling de props" innecesaria.
Diseño interactivo
Se exploraron diferentes conceptos visuales, moviéndose entre el uso de tarjetas y el concepto de "pastillas" para los botones de votación, buscando siempre un diseño que se sienta moderno y profesional, manteniendo la identidad visual JavaScript-centrista.