Arquitetura

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

Frontend Web

Definições de Tecnologias

Linguagem: TypeScript
Biblioteca: React
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

Módulos

├── 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

Definições de Tecnologias

Linguagem: TypeScript
Framework: React Native
Navegação: Expo Router
Ambiente de desenvolvimento/build: Expo
Estilização: Design System próprio (tokens, tipografia, cores, espaçamentos)
Gerenciamento de estado: Providers globais (ThemeProvider, EventProvider)
Comunicação com API: Fetch + camada de abstração em constants/ApiUrl.tsx
Autenticação: Fluxo via API

O Frontend Mobile é desenvolvido com React Native utilizando o ecossistema do Expo e organizado em módulos funcionais.
A navegação é controlada pelo Expo Router, que fornece rotas baseadas em estrutura de arquivos.
A interface segue um design system próprio, garantindo consistência visual e reuso de componentes.

Arquitetura em alto nível da aplicação

A aplicação segue uma arquitetura por camadas, adaptada ao ambiente mobile:

O Expo Router controla a estrutura de navegação e o fluxo entre telas.
As telas utilizam componentes reutilizáveis do design system.
Os providers controlam estados globais como evento atual, temas e feedback de UI.
As requisições são feitas por meio de camadas centralizadas definidas em services/.

Módulos

Estrutura principal do projeto:

taskee_frontend_mobile/
├── app/ # Telas, rotas e fluxos principais
│ ├── (designSystem)/ # UI de exemplo e padrões visuais
│ ├── (event)/ # Fluxo de eventos e tarefas
│ ├── +not-found.tsx # Tela padrão de rota inexistente
│ ├── eventCode.tsx # Tela de entrada de código do evento
│ ├── home.tsx # Tela inicial
│ ├── login.tsx # Tela de login
│ └── _layout.tsx # Layout principal das rotas
│
├── components/ # Componentes reutilizáveis da aplicação
│ ├── Bottomsheet/
│ ├── Button/
│ ├── CardRanking/
│ ├── EventCard/
│ ├── EventSections/
│ ├── ScreenHeader/
│ ├── TaskAnswer/
│ ├── TaskTypesScreen/
│ ├── Text/
│ └── ThemeProvider/
│
├── constants/ # Configurações globais e tokens
│ ├── ApiUrl.tsx
│ ├── Themes.ts
│ ├── Typography.ts
│ ├── Strings.ts
│ └── CornerRadius.ts
│
├── assets/ # Imagens, fontes e mídias
├── .expo/ # Configurações internas do Expo
├── package.json # Dependências do projeto
└── tsconfig.json # Configurações do TypeScript

App

Ponto de entrada da aplicação. Contém todas as telas organizadas em pastas conforme cada fluxo.
O arquivo _layout.tsx define o layout padrão, inicializa providers e configura o Expo Router.

Pages / Screens

Telas principais do fluxo da aplicação:

Home
Login
Event Code
Fluxo de Tarefas
Ranking
Detalhes do Evento

Cada tela consome componentes reutilizáveis e acessa dados via chamadas centralizadas.

Components

Componentes de UI reutilizáveis:

Botões
Headers
Cards de evento
Inputs
Bottom sheets
Componentes específicos para cada tipo de tarefa

Garantem padronização e reuso.

Design System

Padroniza tipografia, cores, tokens e espaçamentos. Inclui telas de demonstração e serve como referência para nova UI.

Constants

Arquivos de configuração global:

ApiUrl.tsx – Endpoints da API
Themes.ts – Paleta de cores e temas
Typography.ts – Escalas e pesos tipográficos
Strings.ts – Texto constante utilizado na interface
CornerRadius.ts – Valores padronizados de bordas

Providers

Gerenciam estados globais da aplicação:

Tema
Evento atual
Estado de carregamento
Feedback de UI
Controle de tarefas

Assets

Arquivos estáticos: ícones, ilustrações, fontes e logos.

Backend

Definições de Tecnologias

Linguagem: Python
Framework: FastAPI
Banco de Dados: Firebase Firestore (NoSQL)
Armazenamento de Arquivos: Firebase Storage (imagens e mídias)
Autenticação: Firebase Auth
Containerização: Docker + Docker Compose
Testes: Pytest
Documentação de API: Swagger (disponível em /docs)

O backend foi desenvolvido em arquitetura em camadas, garantindo separação de responsabilidades, testabilidade e escalabilidade.

Camadas e Fluxo

A API segue um modelo de camadas bem definidas:

app/
├── main.py          # Ponto de entrada da aplicação
├── controllers/     # Rotas e controladores da API (camada de interface)
├── dependencies/    # Injeção de dependências e middlewares
├── models/          # Modelos de dados e integração com Firebase (Firestore/Storage/Auth)
├── schemas/         # Schemas (Pydantic) para validação e serialização
├── services/        # Regras de negócio e lógica da aplicação
└── tests/           # Testes unitários e de integração

Fluxo de uma requisição

Cliente (Frontend Web/Mobile) envia uma requisição HTTP para a API.
A requisição chega ao Controller, que define a rota e delega a execução.
O Service aplica as regras de negócio (ex.: criar evento, associar usuário, registrar tarefa concluída).
Os Models interagem com o Firebase:
- Firestore → persistência e consulta de dados (eventos, usuários, tarefas, resultados).
- Storage → upload/download de arquivos (imagens de eventos, avatares, certificados).
- Auth → autenticação e autorização de usuários.
O Schema (Pydantic) garante que entrada e saída de dados estão no formato correto.
A resposta validada retorna ao Controller, que a envia ao Cliente.

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:

Usuário acessa o sistema pelo navegador.
O Router no Frontend direciona para a página correta (Home, Evento, Tarefas).
Cada módulo da aplicação consome dados da API Backend.
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.