Arquitetura

• Nesta seção é abordada:
  • arquitetura do projeto
  • funcionamento do Deploy/ produção

Framework Utilizado

• O Framework Next.js é utilizado para o desenvolvimento unificado de frontend e backend. Foi optado utilizar ele devido a capacidade de criar um site que combina as duas áreas, eliminando a necessidade de repositórios separados para o frontend e o backend. Essa simplificação é possível graças ao uso de API Routes no Next.js para executar endpoints da API somente quando são chamados, evitando a necessidade de uma infraestrutura completa para o backend com endpoints semelhantes.

Plataforma de Hospedagem

• Realizamos o deploy do projeto na plataforma Vercel, sendo um processo automatizado. As rotas da API são implementadas como funções lambda. Cada deploy gera uma nova versão de build, e ao acessar o site, os servidores da Vercel respondem apenas com o código da versão mais recente. A branch de produção se chama "main", e toda mesclagem (merge) para essa branch aciona automaticamente um novo processo de build e deploy. Nosso banco de dados é armazenado na Vercel, e todo o processo de configuração e deploy é gerenciado pela plataforma.

Frontend

• Ele é construído com base no Next.js, que é construído sobre o React.js. A arquitetura do React é do tipo Model View Controller (MVC), na qual as funções da aplicação são divididas em três módulos:
  • Model
  • View
  • Controller
• Essa divisão permite separar as responsabilidades de cada componente na aplicação. Além disso, para facilitar o desenvolvimento, as funções que são usadas em toda a aplicação são isoladas, e componentes de interface do usuário (UI) genéricos são criados em suas pastas específicas para possibilitar o reuso em todo o sistema.

Backend

• Ele também é desenvolvido usando Next.js, que cria endpoints da API como funções lambda (funções anônimas, usadas para criar pequenos blocos de código reutilizável de forma concisa). Isso significa que o código é executado apenas quando um endpoint específico é chamado, o que contribui para uma maior eficiência e economia de recursos.

Cloud e Deploy

Hospedagem na Vercel

• O deploy completo é automaticamente realizado na plataforma Vercel.
• As rotas da API são implementadas como funções lambda.
• A cada deploy, uma nova versão de build é gerada. Ao acessar o site, os servidores da Vercel retornam apenas esta versão de código.
• A branch de produção se chama "main", e qualquer merge para esta branch gera um novo processo de build e deploy de forma automática.
• O banco de dados é armazenado na Vercel, juntamente com o projeto frontend e backend. A Vercel cuida de todo o processo de configuração e deploy, eliminando preocupações adicionais.

Ambiente Local

• Localmente, utilizamos Docker e Docker Compose para criar um banco de dados local que o projeto se conecta.
• O projeto é executado localmente com o comando "npm run dev".

Gerenciamento de Código

• Seguimos o padrão Gitflow para o desenvolvimento de features e correções (fixes).

Diagrama de Deploy

• No diagrama de deploy acima, é destacado a arquitetura do projeto e como ele é implantado e executado na nuvem e localmente. A plataforma Vercel é o ponto central do deploy na nuvem, enquanto o Docker e o Docker Compose são usados localmente para simular o ambiente de produção. A branch "main" aciona automaticamente o processo de deploy na Vercel quando mesclada. O banco de dados é hospedado na Vercel em conjunto com o projeto, proporcionando um ambiente de desenvolvimento simplificado e controlado.

Estrutura de pastas

(colocar aqui a estrutura das pastas do projeto)

Componentes da estrutura

prisma

migrations

svgs

api

services

components

enums

interfaces

mocks

types

utils

Cloud e Deploy

• Deploy completo feito na vercel (automatico)
• Rotas de API sao lambda functions
• Em todo deploy uma versao de build eh gerada e ao acessar o site os servidores da vercel retornam apenas este codigo
• Nossa branch de prod se chama main e todo merge para ele cria um novo processo de build e deploy automaticamente
• Nosso banco de dados se encontra armazenado na vercel juntamente com o projeto do font e back, nao precisamos nos preucupar pois a vercel cuida de todo o processo de config e deploy.

Localmente

• Localmente utilizamos o docker e docker compose para criar um banco de dados local para o app se conectar e rodamos o app regularmente com o comando npm run dev
• Utilizamos o gitflow padrao para o desenvolvimentos de features e fixes.