Fullstack

MiInbox

Cliente de correo web con estado global real: hilos, búsqueda y composición sincronizados sin lag.

Resumen

Un cliente de correo es uno de los problemas de estado más exigentes del frontend: mensajes leídos y no leídos, hilos, búsqueda en tiempo real, composición — todo debe sincronizarse sin lag visible y sin re-renders en cascada.

MiInbox lo resuelve con Zustand como capa de estado central: un store que mantiene coherencia entre bandejas sin disparar renders innecesarios. El resultado es una interfaz que responde inmediato sin importar cuántos mensajes estén activos en paralelo.

Línea de tiempo

01

Problema / Contexto

Los clientes de correo con estado fragmentado disparan re-renders en cascada: actualizar una bandeja rompe otra. El reto era mantener coherencia global sin costo de performance.

02

Arquitectura de estado

Modelado del estado global con Zustand: un store central que sincroniza bandejas, estado de lectura y composición sin disparar renders innecesarios en componentes no relacionados.

03

Interfaz y navegación

Layout de tres columnas (bandejas, lista de mensajes, detalle) con React Router para navegación sin recarga, búsqueda en tiempo real y composición de mensajes en ventana flotante.

04

Testing

Suite de pruebas con Vitest sobre el store de Zustand — garantizando que los flujos de lectura, archivado y búsqueda fueran predecibles bajo condiciones concurrentes.

Galería

Aprendizajes

  • Priorizar la claridad de jerarquías en la bandeja de entrada.
  • Zustand simplifica radicalmente los props en interfaces abrumadoras.