|
|
|
## :computer: Frontend
|
|
|
|
|
|
|
|
#### Stacks definidas:
|
|
|
|
|
|
|
|
Linguagem de programação [](https://www.typescriptlang.org)
|
|
|
|
|
|
|
|
Runtime [](https://nodejs.org/en)
|
|
|
|
|
|
|
|
Biblioteca [](https://react.dev/)
|
|
|
|
|
|
|
|
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 [](https://vitejs.dev/)
|
|
|
|
|
|
|
|
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 [](https://tailwindcss.com/)
|
|
|
|
|
|
|
|
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. |
|
|
\ No newline at end of file |
