Plataforma de Streaming - Suitch
Simulación de Twitch desarrollada con React, y la API oficial de Twitch
Suitch es una simulación de la plataforma Twitch que desarrollé para practicar y perfeccionar mis habilidades en React. El proyecto permite buscar streamers reales y ver su contenido en vivo, replicando la experiencia de usuario de la plataforma original.
Incluye características como iniciar sesión con Twitch, buscar a cualquier streamer que tenga un usuario en la plataforma de Twitch y sección de canales que están vivo.
Tecnologías Utilizadas
-
Astro Framework: Utilizado para crear una aplicación web estática optimizada, aprovechando la facilidad que es trabajar con Astro para este tipo de proyects donde se optimiza mucho el uso de JavaScript
-
Tailwind: Para el diseño responsivo y estilizado rápido de la interfaz de usuario, asegurando una experiencia visual atractiva y coherente.
-
React: Implementación de useState para manejo de estado local y useContext para compartir estado entre componentes, especialmente para el colapso de la barra lateral.
Implementaciones
- Uso de los hooks useState y useContext para el manejo de estado y la compartición de datos entre componentes.
- Implementación de rutas dinámicas en Astro para generar perfiles únicos de cada streamer con pre-renderizado.
- useContext() para crear un componente padre que envuelve children y comparte interactividad entre componentes. Especialmente útil para el colapso de la barra lateral que afecta a múltiples componentes.
- Restricciones de CORS para iframes de Twitch.
- Uso seguro de la API de Twitch con variables de entorno para tokens y despliegue en Netlify.
- Este proyecto me permitió enfrentarme a desafíos reales como el manejo de APIs externas, la gestión de estados y la implementación de páginas dinámicas con Astro.