🚀 StateFlow v1.0 - Visualizador de Estado en React

StateFlow es una herramienta pedagógica diseñada para visualizar cómo fluye la información en una arquitectura de React utilizando Context API. El proyecto demuestra el manejo de estados globales, la optimización de renderizado y el uso de micro-interacciones para mejorar la experiencia de usuario (UX).

---

🛠️ Stack Tecnológico

• React 18: Biblioteca principal.
• Vite: Herramienta de construcción ultra rápida.
• Context API: Gestión de estado global sin librerías externas.
• CSS Moderno: Diseño Cyber-Tech con Glassmorphism y animaciones de keyframes.

---

🎯 Objetivos Técnicos Logrados

1. Gestión de Estado con Context API

Implementé una arquitectura de Provider/Consumer para evitar el Prop Drilling. Esto permite que el componente Receptor acceda a los datos directamente desde el "cerebro" de la app, sin pasar por componentes intermedios.

2. Optimización de Renderizado

El proyecto incluye un componente "Puente" (Canal) que demuestra la eficiencia de React:

• Al escribir en el Emisor, el Canal no se re-renderiza (lo que se comprueba mediante logs en consola), optimizando así el rendimiento de la aplicación.

3. Inmutabilidad y Persistencia de Historial

Manejo de arrays inmutables para registrar los últimos 5 mensajes enviados. Se utiliza el operador spread para garantizar que React detecte los cambios de estado de forma predecible.

4. Micro-interacciones y Accesibilidad

• Animaciones de Pulso: Uso de useEffect para sincronizar destellos visuales con la llegada de nuevos datos.
• Accesibilidad: Implementación de aria-live="polite" para que los lectores de pantalla notifiquen los cambios de estado automáticamente.

---

🚀 Instalación y Uso

1. Clona el repositorio:

   git clone [https://github.com/tu-usuario/state-flow.git](https://github.com/tu-usuario/state-flow.git)

2. Instala las dependencias:

   npm install

3. Inicia el servidor de desarrollo:

   npm run dev

---

🧠 Desafíos Superados

Durante el desarrollo, tuve que manejar las Reglas de los Hooks de React, asegurándome de que useContext y useState se llamaran siempre en el nivel superior de los componentes, evitando llamadas condicionales que podrían romper el ciclo de vida de la aplicación.