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
    • Módulos
  • Frontend Mobile
    • Definições de Tecnologias
  • Backend
    • Definições de Tecnologias
    • Camadas e Fluxo
  • Integração Frontend + Backend

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

Backend

Definições de Tecnologias

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.