Frontend

Esta página centraliza informações sobre o repositório Frontend do projeto Lucky Draw.

Sumário

• Escolha de tecnologias
• Organização do projeto
• Padrões de código
  • Nomenclatura de componentes
  • Nomenclatura de variáveis e funções
• Estilo e tema (fontes e cores)
• Tratamento de autenticação
• Boas práticas de organização de serviços e rotas
• Integração com backend via Axios

Escolha de tecnologias

O frontend do projeto foi desenvolvido utilizando React Native, permitindo criar aplicativos nativos com JavaScript. As principais bibliotecas e ferramentas utilizadas incluem:

• React Navigation: para gerenciamento de navegação entre as telas.
• React Native Paper: biblioteca de componentes visuais baseada no Material Design.
• Axios: para requisições HTTP à API backend.
• react-native-encrypted-storage: para armazenamento seguro de dados.
• TypeScript: para desenvolvimento.

Organização do projeto

O projeto está estruturado em pastas principais para separar responsabilidades.

Estrutura Principal:

• android/: Configurações Android nativas.

• ios/: Configurações iOS nativas.

• __tests__/: Testes automatizados.

• assets/: Recursos estáticos.

• src/: Código fonte principal:

  - `components/`: Componentes reutilizáveis como botões, inputs, app bars, etc.
  - `screens/`: Telas completas como Login, Home, RevealCards, etc.
  - `services/`: Funções que lidam com chamadas HTTP para o backend.
  - `routes/`: Configuração de navegação e contexto de autenticação.
  - `assets/`: Imagens e outros arquivos estáticos.
  - `styles/`: Arquivos de estilo compartilhado.

Padrões de código

Nomenclatura de componentes

Componentes devem ser nomeados em PascalCase:

• CustomButton.tsx
• CustomAppBar.tsx

Nomenclatura de variáveis e funções

Utiliza-se o padrão camelCase para variáveis e funções:

• isAdmin, handleLogout, getDailyChallengeStatus

Evite abreviações excessivas. Nomeie com clareza.

Estilo e tema (fontes e cores)

As fontes e cores padrão do projeto estão definidas no repositório dentro da pasta styles. Recomenda-se que todo componente reutilizável utilize os estilos definidos nessa pasta, para manter padronização visual entre telas.

Exemplo de uso de cor padrão:

import { colors } from '../../styles/colors';
<Text style={{ color: colors.primary }}>Texto</Text>

Exemplo de uso de fonte padrão:

import { fonts } from '../../styles/fonts';
<Text style={{ fontFamily: fonts.medium }}>Título</Text>

Não é recomendado definir fontes ou cores diretamente em style={{ }} nos componentes sem reutilizar os arquivos da pasta styles.

Tratamento de autenticação

A autenticação JWT é gerenciada via AuthContext com tokens armazenados de forma segura em EncryptedStorage. A função signIn salva o token e signOut limpa os dados. O token é lido automaticamente e injetado nos headers via interceptor do Axios.

Boas práticas de organização de serviços e rotas

Os serviços devem estar organizados em arquivos separados dentro da pasta services, agrupados por domínio (ex: userService.ts, gameService.ts). Cada serviço deve conter apenas a lógica de requisição (sem lógicas de estado ou interface).

As rotas devem ser tipadas utilizando @react-navigation/native-stack com o arquivo types.ts.

Integração com backend via Axios

A integração é feita com a instância configurada do Axios no arquivo api.ts:

const api = axios.create({
  baseURL: 'http://<ip>:8080/api',
  headers: {
    'Content-Type': 'application/json',
  },
});

api.interceptors.request.use(async (config) => {
  const token = await getItem('authToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

Todas as funções que comunicam com o backend usam essa instância.

Exemplo de serviço com axios:

export async function getDailyChallengeStatus() {
  const response = await api.get('/users/game-status', {
    params: { gameType: 'DAILY_CHALLENGE' },
  });
  return response.data;
}

O AuthContext é responsável por salvar o token JWT e garantir que o usuário está logado. As requisições protegidas devem aguardar que o token esteja disponível antes de executar chamadas:

useEffect(() => {
  if (!token) return;
  fetchStatus();
}, [token]);