Plataforma de Streaming - Suitch

Simulación de Twitch desarrollada con React, y la API oficial de Twitch

Captura de pantalla de Suitch - Plataforma de streaming

Descripción General del Proyecto

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.

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.

Astro React Tailwind CSS

Tecnologías usadas

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
JavaScript: Para implementación de funcionalidades dinámicas como la aleatoriedad de particulas de humo y manejo de interacciones del usuario.
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.

Lo que Aprendí

Desarrollo

• 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.
• Dominar 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.
• Resolver restricciones CORS para iframes de Twitch,
• Uso seguro de la API de Twitch con variables de entorno para tokens y despliegue en Netlify.

Implementación Técnica

UseContext y createContext para el manejo de estado

Mientras avanzaba en mi proyecto, descubrí que necesitábamos una forma de compartir el estado entre componentes sin tener que pasar props a través de cada nivel. Así fue como encontré el uso de createContext. Aunque no lo conocía al iniciar el proyecto, esta experiencia me enseñó a mejora y enetender la forma en la que busco documentacion descubirendo recuross interessantes para este Framework.

  //  import { createContext, useContext, useState } from "react";
//aprendimos **createContext()**
const initialContext = createContext(true)
//Basicamente es un componente que comparte un estado inicial y que le dices que renderizara lo que yo ponga dentro de el {{children}}

export function SanstreamLyout({children}) {

  const [context, setContext] = useState(true); // Estado compartido

  return (
    <>
     <initialContext.Provider value = {{context, setContext}}>
      {children}
     </initialContext.Provider>
    </>
  );
}

//  ESTE WRAPER MODIFICA EL RENDERIZADO DEL RECOMMENDEDCHANNELS Y EL PERFIL DEL USUARIO  D
export function SanstreamLyoutPerfil({children}) {

  const [context, setContext] = useState(false); // Estado compartido

  return (
    <>
     <initialContext.Provider value = {{context, setContext}}>
      {children}
     </initialContext.Provider>
    </>
  );
}
export function useInitialContext(){
  return useContext(initialContext)
}