GestLab

Plataforma de gestão de atividades em tempo real (Kanban) desenvolvida para o ecossistema Learning Lab na UFC, focando em reatividade, controle de estado previsível e UX fluida.

Repositório GitHub

/// 01_RESULTADOS_MEDIDOS_E_IMPACTO

< 50ms

Feedback Otimista

Tempo de resposta visual nas ações de Kanban

-60%

Redução de Boilerplate

Comparado a soluções tradicionais com Redux

100%

Previsibilidade

Prevenção de race conditions no servidor

/// 02_DIAGRAMA_DE_ARQUITETURA_E_FLUXO

/// KANBAN_STATE // OPTIMISTIC_SYNCACTIVE_CACHE

BACKLOG03

Auth RBAC setup

UI design tokens

IN_PROGRESS02

Drag & Drop Sync

READY08

TanStack Query setup

LATENCY: 12msZUSTAND_STORE: OK

FLOW_TRACE:Drag & Drop UI -> Direct Zustand state update -> Optimistic TanStack Query Cache -> Async REST Sync -> Automated Rollback on error

/// 03_CONTEXTO_DE_NEGÓCIO_E_DESAFIOS

O laboratório de pesquisa necessitava de um gerenciador de tarefas unificado para múltiplos bolsistas e pesquisadores, onde a alternância de estados das tarefas gerava inconsistência e re-renders desnecessários em telas legadas.

Desafios Técnicos Identificados:

>Sincronização de estado entre arrastar e soltar (Drag and Drop) e mutações assíncronas no servidor.
>Prevenção de layout shifts (CLS) durante o carregamento de quadros com grande volume de itens.
>Necessidade de cache otimista com rollback transparente em caso de falha de conexão.

/// 04_DECISÕES_DE_ARQUITETURA

Adotou-se uma arquitetura baseada em Feature-First (Vertical Slices), desacoplando lógica de apresentação de gerenciadores de dados com Zustand para estado local de UI e React Query para estado de servidor.

Mutação Otimista com Rollback Instantâneo

Utilizamos o React Query para atualizar a UI imediatamente ao mover um card no Kanban, disparando a requisição HTTP em segundo plano e realizando rollback em < 50ms se o servidor retornar erro.

Zustand para Modal & Drag States

Isolou-se o estado de arrasto e modais de edição em stores Zustand leves, eliminando re-renders na árvore de componentes pai.

/// 05_TRADE_OFFS_E_COMPROMISSOS_TÉCNICOS

DECISÃO ADOTADA:Uso de React Query em vez de estado global centralizado em Redux

✓ RATIONALE (POR QUE):Reduziu o boilerplate em 60% e garantiu invalidação automática de cache via tags de consulta.

⚠ DOWNSIDE (TRADE-OFF):Exige disciplina estrita no gerenciamento de chaves de query (Query Keys) para evitar duplicação.

TECNOLOGIAS UTILIZADAS NO CASE

ReactTypeScriptViteZustandReact QueryTailwind CSS

Ver Todos os Projetos →