|
|
|
# Arquitetura do Sistema
|
|
|
|
|
|
|
|
## Descrição
|
|
|
|
|
|
|
|
Esta seção apresenta a arquitetura definida para o **Taskee**, contemplando tanto o **Frontend** quanto o **Backend**.
|
|
|
|
Nosso objetivo é garantir uma separação clara de responsabilidades, escalabilidade e facilidade de manutenção.
|
|
|
|
|
|
|
|
A aplicação segue um modelo **Client-Server**, onde o **Frontend Web** (React + TypeScript) se comunica com a **API Backend** (Python) utilisando o **Firebase**.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Sumário
|
|
|
|
|
|
|
|
- [Arquitetura do Sistema](#arquitetura-do-sistema)
|
|
|
|
- [Frontend Web](#frontend-web)
|
|
|
|
- [Definições de Tecnologias](#front-end-def-tec)
|
|
|
|
- [Módulos](#front-end-modules)
|
|
|
|
- [Frontend Mobile](#frontend-mobile)
|
|
|
|
- [Definições de Tecnologias](#front-endmobile--def-tec)
|
|
|
|
- [Backend](#backend)
|
|
|
|
- [Definições de Tecnologias](#back-end-def-tec)
|
|
|
|
- [Camadas e Fluxo](#back-end-camadas)
|
|
|
|
- [Integração Frontend + Backend](#integração-frontend--backend)
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## Frontend Web
|
|
|
|
|
|
|
|
<h3 id="front-end-def-tec">Definições de Tecnologias</h3>
|
|
|
|
|
|
|
|
- Linguagem: **TypeScript** <img src="https://www.svgrepo.com/show/374144/typescript.svg" width="15">
|
|
|
|
- Biblioteca: **React** <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" width="15">
|
|
|
|
- Bundler: **Vite** ⚡
|
|
|
|
- Estilização: **TailwindCSS** e **Design System próprio**
|
|
|
|
- Gerenciamento de estado/queries: **TanStack Query (React Query)**
|
|
|
|
- Autenticação: **Firebase Auth**
|
|
|
|
|
|
|
|
O Frontend é uma SPA (Single Page Application), construída em React.
|
|
|
|
A comunicação com a API é feita via **TanStack Query**, que gerencia o ciclo de vida das requisições, cache de dados e estados de carregamento/erro.
|
|
|
|
|
|
|
|
### Diagrama em Alto Nível do Frontend
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h3 id="front-end-modules">Módulos</h3>
|
|
|
|
|
|
|
|
```
|
|
|
|
├── public/ # Arquivos estáticos
|
|
|
|
├── src/
|
|
|
|
│ ├── app/ # Entrypoint, router e providers
|
|
|
|
│ ├── assets/ # Imagens, ícones e mídias
|
|
|
|
│ ├── components/ # Componentes reutilizáveis de UI
|
|
|
|
│ ├── design-system/ # Tipografia, cores e tokens
|
|
|
|
│ ├── dto/ # Data Transfer Objects (DTOs)
|
|
|
|
│ ├── infra/ # Configurações e integrações
|
|
|
|
│ ├── pages/ # Páginas principais da aplicação
|
|
|
|
│ ├── services/ # Serviços e chamadas de API
|
|
|
|
│ ├── utils/ # Funções auxiliares
|
|
|
|
├── index.html # Arquivo HTML de entrada (Vite)
|
|
|
|
├── package.json # Dependências do projeto
|
|
|
|
├── tsconfig.json # Configuração do TypeScript
|
|
|
|
└── README.md
|
|
|
|
└── ... # Outros arquivos de configuração (husky, eslint, prettier, etc.)
|
|
|
|
```
|
|
|
|
|
|
|
|
- **App** → Ponto de entrada da aplicação, onde o `Router` controla as rotas.
|
|
|
|
- **Pages** → Telas principais, ex.: Home, Sobre do Evento, Tarefas.
|
|
|
|
- **Components** → Botões, Cards, Headers, Sidebar, etc.
|
|
|
|
- **Context** → Compartilhamento de estados globais como lista de eventos.
|
|
|
|
- **Services** → Comunicação com a API via hooks do TanStack Query.
|
|
|
|
- **Design System** → Padronização visual (cores, espaçamentos, fontes).
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Frontend Mobile
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Backend
|
|
|
|
|
|
|
|
<h3 id="back-end-def-tec">Definições de Tecnologias</h3>
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Integração Frontend + Backend
|
|
|
|
|
|
|
|
- O **Frontend** consome a API através de hooks (`useQuery`, `useMutation`) do **TanStack Query**, garantindo que os dados sempre estejam sincronizados.
|
|
|
|
- O **Backend** valida, processa e retorna os dados para o Frontend.
|
|
|
|
- O banco de dados armazena **eventos, tarefas, usuários e resultados**.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Arquitetura em Alto Nível da Aplicação
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
De forma simplificada:
|
|
|
|
|
|
|
|
1. **Usuário** acessa o sistema pelo navegador.
|
|
|
|
2. O **Router** no Frontend direciona para a página correta (Home, Evento, Tarefas).
|
|
|
|
3. Cada módulo da aplicação consome dados da **API Backend**.
|
|
|
|
4. O **Banco de Dados** persiste todas as informações.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
Essa arquitetura garante:
|
|
|
|
- **Escalabilidade** → fácil adicionar novos módulos (ex.: Atividades).
|
|
|
|
- **Reuso** → componentes e serviços reutilizáveis.
|
|
|
|
- **Padronização** → design system + DTOs.
|
|
|
|
|
