M4TCH.AI

M4TCH.AI

Discovery & Interactions

Explorar & Swipe (Tinder Layout)

A tela central de descoberta (ExploreScreen.tsx). Ela utiliza a API nativa Animated e o PanResponder para a física de arrastar cards. Aqui gerenciamos o Feed de recomendações, filtros locais e a emissão de interações (Likes/Dislikes).

Regras de Negócio e UX (Frontend)

Pausa de Like (Free Plan)

Usuários gratuitos (IS_FREE_USER = true) sofrem um cooldown de 15 segundos (LIKE_PAUSE_MS = 15000) entre super likes ou após ações intensas, engajando a retenção na tela[cite: 7].

Filtros Otimizados

Em vez de fazer requisições constantes, o backend entrega os matches de uma vez[cite: 7]. O filtro de gênero, distância, idade e *Encontro às Cegas* é feito via array no próprio app (buildFiltered)[cite: 7].

1. Sincronização em Tempo Real

WEBSOCKET status_online_changed

A tela escuta ativamente as mudanças de status (Invisível/Online) via Socket.io[cite: 7]. O padrão visual exige que, ao ficar online, o app force a variável lastActiveMinutes: 0 para que a bolinha de status fique verde imediatamente nos cards de quem estiver visualizando[cite: 7].

2. Alimentar o Feed (Cards)

GET /api/matches/list/{userId}

Toda vez que a tela ganha foco e a lista está vazia, o app solicita os novos matches calculados[cite: 7]. O frontend injeta os dados do objeto answers_json dentro de allProfiles e os exibe no carrossel de Swipe[cite: 7].

Response Otimizada
{
  "ok": true,
  "matches": [
    {
      "candidate_id": "42",
      "name": "Maria",
      "score_total": 85,
      "answers_json": "{\"s10_profile_pic\": \"url...\", \"s10_hide_online\": \"true\"}"
    }
  ]
}

3. Interação Física (Swipe)

POST /api/matches/swipe
Fluxo de Animação e API

Quando o card sai da tela, a função handleSwipeAPI é ativada em background para não travar a UI[cite: 7]. Se o retorno for match: true, o app dispara as animações de Confete (startMatchAnimations) e exibe o modal de "Conexão confirmada"[cite: 7].

Request Body
{
  "user_from_id": 1,
  "user_to_id": 42,
  "type": "like" // ou "dislike"
}
Response (Quando há Match mútuo)
{
  "ok": true,
  "match": true,
  "match_id": 99
}

4. Quebrar o Gelo (Pós-Match)

POST /api/chat/send

A tela do Modal de Match inclui um pequeno input para enviar a primeira mensagem (quebrar o gelo) imediatamente, sem precisar navegar até a aba de Chats[cite: 7].

Request Body
{
  "match_id": 99,
  "receiver_id": 42,
  "sender_id": 1,
  "content": "Oi, tudo bem?"
}
Response
{
  "ok": true,
  "message_id": 150
}

5. Expandir Perfil (Modal de Detalhes)

GET /api/profile/get-profile/{userId}

Ao tocar na seta do card, a função handleOpenDetails abre o modal que toma a tela inteira[cite: 7]. Como o feed traz dados resumidos, este endpoint é chamado para carregar a Bio completa, citações, e informações ricas do JSON (identMain, sobreLine1) e fotos integradas do Instagram[cite: 7].