Sumário

• Tecnologias
  • React
  • Next.js
  • Node.js
  • NestJS
  • TypeScript
  • Swagger
  • SQLite
• Modelo Arquitetural
  • Diagrama de fluxo do Frontend
  • Diagrama de fluxo do Backend
• Estrutura de arquivos do frontend
• Estrutura de arquivos do backend

Tecnologias

React

Biblioteca JavaScript para construção de interfaces de usuário reativas e componentes reutilizáveis. Utilizado no frontend para criar componentes interativos da aplicação.

Next.js

Framework React para desenvolvimento web com renderização híbrida. Ideal para construir a interface do usuário.

Node.js

Ambiente de execução JavaScript no lado do servidor. Permite rodar aplicações backend com alta performance e I/O não bloqueante, servindo como base para frameworks como NestJS e facilitando a construção de APIs escaláveis.

NestJS

Framework Node.js para construção de APIs escaláveis e orientadas a módulos. Base do backend para organizar a lógica de negócio, criar rotas RESTful e gerenciar a comunicação com o banco de dados.

TypeScript

Superset do JavaScript com tipagem estática, que melhora a legibilidade e robustez do código. Utilizado tanto no frontend quanto no backend para evitar erros comuns e melhorar a manutenção do projeto.

Swagger

Ferramenta para documentação e testes interativos de APIs RESTful. Documenta automaticamente as rotas da API do backend.

SQLite

Banco de dados relacional leve, baseado em arquivos locais, sem necessidade de servidor.

Modelo Arquitetural

Diagrama de fluxo do Frontend

Diagrama de fluxo do Backend

Estrutura de arquivos do frontend

frontend
├── public
|  ├── assets
|  ├── fonts
|  ├── models
|  └── textures
└── src
   └── app
      ├── admin
      ├── admin-import
      ├── components
      |  ├── dropdown
      |  ├── map
      |  ├── searchbar
      |  └── sidebar
      ├── constants
      ├── contexts
      ├── hooks
      ├── pages
      ├── qrcode
      |  └── components
      ├── services
      └── theme

assets: Contém imagens, ícones, ou outros arquivos estáticos usados no frontend.
fonts: Armazena arquivos de fontes personalizados utilizados na estilização do projeto.
models: Modelos 3D para o mapa.
textures: Texturas para os modelos do mapa.

admin: Página de Exportação dos leads em CSV.
admin-import: Página para importar o CSV com dados das empresas.
components: Componentes React reutilizáveis que representam partes da interface do usuário.

• dropdown: Componentes de menus de procura.
• map: Componentes relacionados a o mapas interativo.
• searchbar: Componentes de barra de busca.
• sidebar: Componentes de navegação lateral.

constants: Armazena valores fixos e reutilizáveis.
contexts: Define contextos React para gerenciamento de estado global.
hooks: Utilizado para implementar o logout automatico do usuário.
pages: Pasta de rotas no Next.js. Cada arquivo ou pasta define uma rota da aplicação.
qrcode: Funcionalidades específicas relacionadas a QR Codes.

• components: Componentes reutilizáveis dentro do módulo de QR Code.

services: Lida com a lógica de comunicação com a API (backend), integração com fetch e axios, e gerenciamento de dados.
theme: Contém definições de tema, como paleta de cores, tipografia e customizações do Material UI

Estrutura de arquivos do backend

backend
├── src
|  ├── common
|  |  ├── filters
|  |  └── guards
|  ├── controllers
|  ├── dtos
|  ├── entities
|  ├── modules
|  └── services
└── test

common: Componentes reutilizáveis e globais, aplicáveis em várias partes da aplicação.

• filters: Filtros de exceção personalizados.
• guards: Lógicas de autorização ou proteção de rotas.

controllers: Define os controladores da aplicação, responsáveis por mapear rotas HTTP e chamar os serviços.
dtos: Data Transfer Objects. Define e valida a estrutura dos dados recebidos e enviados nas requisições/respostas da API.
entities: Define os modelos de dados utilizados com o ORM, correspondentes às tabelas do banco de dados.
modules: Organiza funcionalidades da aplicação em módulos.
services: Contém os serviços da aplicação, que concentram a lógica de negócio.
test: Contém os testes automatizados.