Arquitetura

Descrição

Esta seção apresentará as arquiteturas de ambos os projetos frontend e backend.

Sumário

• Arquitetura Geral da Aplicação
  • Parede de Tecnologias
• Frontend
  • Definições de Tecnologias
  • Arquitetura do Frontend
  • Estrutura dos Componentes
• Backend
  • Definições de Tecnologias
  • Arquitetura do Backend
• Banco de Dados

Arquitetura Geral da Aplicação

Sendo uma aplicação Web, resume-se em três principais módulos:

• Frontend
• Backend
• Banco de Dados

Os módulos foram construidos de forma desacoplada, os quais se conversam via protocolo HTTP.

Parede de Tecnologias

Frontend

Definições de Tecnologias

• React
• Next.js
• Chakra UI
• TypeScript

Arquitetura do Frontend

No Frontend, aplicamos um padrão de projeto chamado Atomic Design Pattern. Desenvolvido por Brad Frost, este padrão adota uma estrutura semelhante a Arquitetura em Camadas, porém busca reunir os elementos visuais por granularidade, ou seja, organiza os elementos do mais simples e primitivo, ao mais estruturado e complexo.

• Átomos (Atoms): Na química, os átomos são os blocos de construção básicos da matéria. Assim, os átomos das nossas interfaces servem como os blocos de construção fundamentais que compõem todas as nossas interfaces de usuário. Esses átomos incluem elementos básicos como labels, inputs, botões Et cetera. Sendo a parte mais genérica e reutilizável da interface do usuário, o átomo não contém regra de negócio.

• Molécula (Molecules): Na química, moléculas são grupos de átomos ligados entre si que assumem novas propriedades. Nas interfaces, as moléculas são grupos simples de elementos da interface do usuário funcionando como uma unidade. Por exemplo, um label de formulário, um input de pesquisa e um botão podem se unir para criar uma molécula de um formulário de pesquisa. É a parte responsável por agrupar componentes que serão utilizados em uma tela. Nesta, é possível conter alguma lógica ou regra de negócio.

• Organismo (Organisms): Organismos são componentes de IU (Interface de Usuário) complexos, compostos por vários grupos de moléculas e/ou átomos. Esses organismos formam seções distintas de uma interface. Responsável por aglutinar diversas estruturas visuais e resguardar uma certa lógica associada.

• Modelos (Templates): São estruturas que agrupam os componentes em um layout, do qual demonstra a estrutura do design planejado. Os templates tem a função de agrupar todos os elementos visuais e ter uma rápida conexão com as páginas, ou seja, permitindo que os modelos sejam trocados com facilidade.

• Páginas (Pages): É responsável por tornar os modelos em um conteúdo real, permitindo articular variações para demonstrar a interface final, a fim de testar a resiliência do sistema.

Para maiores detalhes sobre este tipo de arquitetura, acesse esse link: Atomic Design Pattern.

Estrutura dos Componentes

TBD

Backend

Definições de Tecnologias

• NodeJs
• Express
• Prisma

Arquitetura do Backend

No Backend, por ser uma aplicação Server Side - API, foi aplicado uma Arquitetura em Camadas, da qual se constitui por:

• Controllers: Estrutura que contém toda a lógica de cada requisição solicitada na aplicação.

• Routes: Segmento que ordena as chamadas dos endpoints da API, chamando as funções da controller para cada respectiva rota.

• Prisma: Nesta sessão, se constituem os Schemas Prisma para o banco de dados, ou seja, todos os dados e configurações que estarão contidos no banco de dados. Diferente das Models, os Schemas tem uma representatividade maior sobre os dados do banco, como por exemplo, atributos de sistema como '_id' e especificidades como 'unique', que geralmente não são consideradas nas Models.

• Server.js: Arquivo principal do projeto e responsável por orquestrar todo o sistema, nele são apontadas as chamadas das rotas. O arquivo mantêm o sistema em constante espera, para que quaisquer chamada externa possa ser solicitada, realizada, e respondida.

Banco de Dados

Optamos por fazer uso de um banco de dados MongoDB. Para mais detalhes, acesse a categoria BD (Banco de Dados).