GitLab

💻 Frontend

Stacks definidas:

Linguagem de programação

Runtime

Biblioteca

React é uma biblioteca front-end de JavaScript, utilizada para definir a parte lógica, e criar componentes HTML, para aplicações web de página única.

Framework

Vite é uma ferramenta de construção front-end moderna que melhora significativamente a experiência de desenvolvimento. Ele serve código via módulos ES nativos, permitindo um início rápido do servidor e substituição de módulos a quente (HMR). Durante o desenvolvimento, o Vite compila apenas o módulo atual quando um arquivo é editado, em vez de empacotar todos os módulos antecipadamente

Outras tecnologias

Tailwind CSS é uma estrutura CSS de código aberto. A principal característica desta biblioteca é que, ao contrário de outros frameworks CSS como Bootstrap, ela não fornece uma série de classes predefinidas para elementos como botões ou tabelas.

O frontend da aplicação foi estruturado utilizando Vite como ferramenta principal de build, garantindo um ambiente rápido e moderno para o desenvolvimento. A organização segue uma abordagem modular e bem segmentada, com as seguintes pastas principais:

components: Contém todos os componentes reutilizáveis da aplicação. Cada componente é responsável por encapsular partes específicas da interface, promovendo a reutilização e manutenção do código.

contexts: Armazena os contextos globais da aplicação. Aqui, utilizamos Zustand como biblioteca para o gerenciamento de estado global, oferecendo uma solução simples, leve e eficiente para compartilhar estados entre diferentes partes da aplicação sem a complexidade de outras ferramentas como Redux.

dtos: (Data Transfer Objects) Contém as definições de tipos ou interfaces utilizadas para padronizar a troca de dados entre as diferentes camadas da aplicação. Ajuda a garantir consistência nos contratos de dados.

layouts: Centraliza os layouts principais da aplicação, como a estrutura base de páginas ou dashboards, facilitando a composição de diferentes telas.

pages: Armazena as páginas da aplicação, cada uma representando uma rota específica. Essa estrutura permite que o roteamento seja organizado e simples de manter.

routes: Contém as configurações e definições de rotas, utilizando provavelmente bibliotecas como React Router para gerenciar a navegação entre as páginas.

services: Implementa as interações com APIs externas ou serviços internos da aplicação. Aqui, ficam centralizadas as chamadas HTTP e lógica relacionada a consumo de dados remotos.

stores: Centraliza o gerenciamento de estados globais, caso bibliotecas como Zustand, Redux ou outras sejam utilizadas, organizando a lógica de estado da aplicação de forma clara.

styles: Concentra arquivos de estilo global, como configurações de Tailwind CSS, ou estilos customizados que não pertencem a um componente específico.

utils: Contém funções auxiliares e utilitárias, como manipuladores de datas, validações, e outras funcionalidades gerais que podem ser usadas em diferentes partes do projeto.

Essa estrutura promove organização, escalabilidade e facilidade de manutenção no código, tornando o desenvolvimento mais ágil e eficiente. Além disso, o uso de Vite proporciona uma experiência de desenvolvimento moderna, com tempos de build rápidos e suporte a módulos ES modernos.