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
└── src
   └── app
      ├── components
      |  ├── dropdown
      |  ├── map
      |  ├── searchbar
      |  └── sidebar
      ├── constants
      ├── contexts
      ├── 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.

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.
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.

• qrcode/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/axios, e gerenciamento de dados.
theme: Contém definições de tema.

Estrutura de arquivos do backend

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