Archon UI

Framework frontend criado para padronizar aplicações React do ecossistema Archon com uma base consistente de layout, autenticação, navegação, i18n e consumo de API.

Visão geral

O Archon UI foi pensado para resolver um problema muito comum em ecossistemas internos: quando várias aplicações frontend nascem separadas, cada uma tende a reimplementar autenticação, layout, client HTTP, feedback visual, permissões e convenções de navegação do seu próprio jeito.

A proposta do framework é justamente evitar essa fragmentação. Em vez de cada app resolver isso do zero, o Archon UI oferece uma base compartilhada e reutilizável para aplicações React do ecossistema.

Na prática, ele funciona como a fundação frontend das aplicações construídas sobre o Archon.

Como o framework funciona

O Archon UI organiza a experiência da aplicação em blocos de infraestrutura e interface que podem ser reaproveitados entre sistemas diferentes.

Base visual e estrutural

A biblioteca entrega componentes e padrões prontos para a camada administrativa da aplicação, incluindo:

• layout principal da aplicação;
• sidebar e navbar;
• breadcrumb e page layout;
• cards, badges e botões;
• tabelas e gráficos;
• modal, sheet, toaster e feedback visual.

Isso permite que um sistema consumidor comece já com uma base visual consistente, sem precisar definir tudo novamente.

Providers e infraestrutura de app

O Archon UI também entrega a composição base da aplicação, com providers para:

• tema;
• loader global;
• internacionalização;
• autenticação;
• notificações.

Esse ponto é importante porque o framework não entrega apenas componentes visuais: ele define a infraestrutura de experiência da aplicação como um todo.

Autenticação integrada ao ecossistema

A biblioteca possui integração direta com o Identity Management, oferecendo:

• AuthProvider;
• ProtectedRoute;
• Callback.

Na prática, isso significa que as aplicações consumidoras conseguem reutilizar o mesmo fluxo de autenticação centralizado do ecossistema sem criar uma camada paralela de auth.

Consumo padronizado de API

O framework fornece um httpClient integrado ao contexto autenticado da aplicação.

Ele foi desenhado para lidar com:

• token de acesso;
• refresh token;
• base URL configurável;
• padrão de resposta do backend;
• feedback de erro e sucesso.

Além disso, o useApi ajuda a encapsular chamadas assíncronas de tela com o mesmo contrato de resposta adotado pelo Archon.

Permissões no frontend

Outro ponto importante é o usePermissions, que trabalha com claims como:

• permission
• root

Isso ajuda a manter coerência entre o modelo de autorização do backend e o comportamento das interfaces no frontend.

Stack

• React 19
• TypeScript
• Vite
• Tailwind CSS
• Radix UI

Estrutura da biblioteca

A organização do código mostra uma divisão clara entre responsabilidades:

• components/ui componentes visuais e estruturais reutilizáveis;
• components/routing fluxo de autenticação e proteção de rotas;
• contexts contexto de autenticação;
• hooks abstrações como useApi, usePermissions, breadcrumbs e navegação;
• services client HTTP, auth e perfil;
• i18n infraestrutura de internacionalização;
• examples catálogo local para playground e validação dos componentes.

Essa separação mostra que o Archon UI não é apenas um conjunto de componentes soltos. Ele foi estruturado como um framework frontend de verdade, com base de app, serviços, hooks e experiência administrativa integrada.

O que o projeto resolve

O Archon UI resolve principalmente:

• duplicação de componentes e padrões entre aplicações;
• inconsistência visual entre sistemas do ecossistema;
• reimplementação de autenticação e proteção de rotas;
• divergência entre consumo de API e contrato de backend;
• ausência de uma base comum para navegação, feedback e permissões.

Papel no ecossistema

Ele funciona como a camada frontend complementar do Archon Framework.

Enquanto o Archon Framework padroniza backend, autenticação e contrato de APIs, o Archon UI padroniza:

• layout administrativo;
• interação do usuário;
• consumo de API;
• autenticação na interface;
• gerenciamento de permissões;
• feedback visual e navegação.

Isso faz dele uma peça muito importante do ecossistema, porque garante continuidade entre backend e frontend.

Diferenciais do projeto

Os diferenciais mais fortes do Archon UI são:

• base visual reutilizável para aplicações React;
• integração real com Identity Management;
• client HTTP unificado com o ecossistema;
• hooks de alto nível para API e permissões;
• padrão consistente de layout e experiência administrativa;
• redução de duplicação entre sistemas consumidores.

Resumo executivo

O Archon UI é a fundação frontend do ecossistema Archon. Ele foi criado para padronizar aplicações React com uma base consistente de layout, autenticação, navegação, consumo de API e permissões.

Isso faz dele um projeto importante no portfólio porque demonstra não apenas construção de interface, mas também pensamento de plataforma, reaproveitamento de infraestrutura e coerência entre múltiplas aplicações reais.