Skip to content

marceloaaps/project-eris-front

BranchesTags

Repository files navigation

Project Eris - Frontend

📋 Descrição

Project Eris (nomeado através da Deusa Grega da Discórdia e Conflito) é um projeto científico focado em Phishing e Engenharia Social, onde, a partir de artigos e estudos científicos, seguimos com a ideia de explorar a maior vulnerabilidade de todos os sistemas: o ser humano.

🔗 Links do Projeto

🎯 Objetivo do Projeto

Com panfletos e aplicação web estruturados com base em artigos científicos, de forma padronizada, distribuímos pelas duas Universidades da UNIUBE de Uberlândia um website de sorteio falso projetado para medir a suscetibilidade à engenharia social.

🔬 Metodologia Científica

O experimento foi conduzido com rigor metodológico:

  1. Distribuição Física: Panfletos impressos distribuídos nos campi universitários
  2. Website Isca: Plataforma web simulando um sorteio corporativo
  3. Design Estratégico: Interface brandless inspirada na estética minimalista da Apple
  4. Gatilhos Mentais: Frases e elementos visuais baseados em estudos de persuasão
  5. Coleta de Dados: Monitoramento de comportamento e engajamento dos participantes

📊 Questões de Pesquisa

O projeto busca responder:

  • ✅ Quantas pessoas cairiam neste experimento de phishing?
  • ✅ Quanto tempo os usuários ficaram na página?
  • ✅ Qual a distribuição por curso e campus?
  • ✅ Quantos efetivamente leram os termos de uso?
  • ✅ Os termos de uso (que avisam explicitamente tratar-se de sorteio FALSO) foram ignorados?

⚠️ Aspecto Ético

Transparência Total: Os termos de uso do sistema informam claramente aos participantes que:

  • O sorteio é fictício
  • Trata-se de um experimento científico
  • Os dados são coletados para fins acadêmicos e de pesquisa

🏗️ Arquitetura

O projeto foi desenvolvido seguindo boas práticas do React e arquitetura de componentes modular, garantindo:

Arquitetura Frontend

  • Separação de responsabilidades entre componentes, APIs e utilitários
  • Modularidade - componentes reutilizáveis e independentes
  • Design Brandless - estética minimalista inspirada na Apple para credibilidade
  • Gatilhos Mentais - elementos de interface baseados em estudos de persuasão
  • Responsividade - design adaptável para mobile e desktop
  • Performance - otimizações com Vite e lazy loading
  • Acessibilidade - implementação de práticas de UX/UI inclusivas
  • Rastreamento Comportamental - analytics integrado para coleta de dados científicos

Estrutura de Camadas

┌─────────────────────────────────────┐
│      Presentation Layer             │  ← Components, Pages
│   (Interface de usuário)            │
├─────────────────────────────────────┤
│      Application Layer              │  ← API Clients, Types
│   (Lógica de aplicação)             │
├─────────────────────────────────────┤
│      Analytics Layer                │  ← Google Analytics, Tracking
│   (Monitoramento de comportamento)  │
├─────────────────────────────────────┤
│      Infrastructure Layer           │  ← Build tools, Configs
│   (Configurações e build)           │
└─────────────────────────────────────┘

🔧 Tecnologias e Dependências

Versão

  • Versão do Projeto: 0.0.0
  • Node.js: 18+ (recomendado)
  • React: 18.3.1
  • TypeScript: 5.5.3
  • Vite: 5.4.2 (Build tool)

Principais Dependências

Framework e UI

  • React (18.3.1)

    • Biblioteca JavaScript para criação de interfaces de usuário
    • Componentes funcionais com hooks
    • Gerenciamento de estado com useState e useEffect

  • React DOM (18.3.1)

    • Renderização de componentes React no navegador
    • Integração com DOM virtual para performance otimizada

  • TypeScript (5.5.3)

    • Tipagem estática para JavaScript
    • IntelliSense e detecção de erros em tempo de desenvolvimento
    • Interfaces e tipos customizados

Estilização e UI

  • Tailwind CSS (3.4.17)

    • Framework CSS utility-first
    • Design responsivo e mobile-first
    • Customização através de classes utilitárias

  • Framer Motion (11.0.8)

    • Biblioteca de animações para React
    • Transições fluidas e animações de componentes
    • Gestos e interações avançadas

  • Lucide React (0.344.0)

    • Biblioteca de ícones SVG otimizados
    • Ícones modernos e consistentes
    • Totalmente customizáveis

  • React Icons (5.5.0)

    • Coleção extensa de ícones populares
    • Suporte a múltiplas bibliotecas de ícones

Navegação e Roteamento

  • React Router DOM (7.8.2)
    • Roteamento declarativo para React
    • Navegação SPA (Single Page Application)
    • Roteamento aninhado e proteção de rotas

Comunicação com API

  • Axios (1.9.0)
    • Cliente HTTP para requisições à API
    • Interceptadores de request/response
    • Suporte a TypeScript e cancelamento de requests

Analytics e Monitoramento

  • React GA4 (2.1.0)
    • Integração com Google Analytics 4
    • Rastreamento de eventos e conversões
    • Métricas de comportamento do usuário

Notificações

  • React Hot Toast (2.5.2)

    • Notificações toast elegantes e customizáveis
    • Animações suaves e posicionamento flexível

  • React Toastify (11.0.5)

    • Sistema de notificações toast robusto
    • Múltiplos tipos de alerta e configurações

Build e Desenvolvimento

  • Vite (5.4.2)

    • Build tool moderno e rápido
    • Hot Module Replacement (HMR)
    • Otimização automática de bundles

  • @vitejs/plugin-react (4.3.1)

    • Plugin oficial do Vite para React
    • Suporte a JSX e Fast Refresh

Linting e Code Quality

  • ESLint (9.9.1)

    • Linter para identificação de problemas no código
    • Regras customizadas para React e TypeScript
    • Integração com editor

  • TypeScript ESLint (8.3.0)

    • Parser ESLint para TypeScript
    • Regras específicas para código TypeScript

CSS e PostCSS

  • PostCSS (8.5.5)

    • Ferramenta para transformação de CSS
    • Suporte a plugins e otimizações

  • Autoprefixer (10.4.21)

    • Adiciona prefixos CSS automaticamente
    • Compatibilidade cross-browser

⚙️ Variáveis de Ambiente

O projeto requer as seguintes variáveis de ambiente para execução:

Configuração da API e Analytics

VITE_API_BASE_URL=http://localhost:8080/api
VITE_GA4_MEASUREMENT_ID=G-XXXXXXXXXX

Descrição das Variáveis

Variável Descrição Exemplo
VITE_API_BASE_URL URL base da API backend http://localhost:8080/api ou https://api.projeto-eris.com/api
VITE_GA4_MEASUREMENT_ID ID de medição do Google Analytics 4 G-XXXXXXXXXX

Configurando as Variáveis

Arquivo .env (Desenvolvimento Local)

VITE_API_BASE_URL=http://localhost:8080/api
VITE_GA4_MEASUREMENT_ID=G-XXXXXXXXXX

Windows (CMD)

set VITE_API_BASE_URL=http://localhost:8080/api
set VITE_GA4_MEASUREMENT_ID=G-XXXXXXXXXX

Windows (PowerShell)

$env:VITE_API_BASE_URL="http://localhost:8080/api"
$env:VITE_GA4_MEASUREMENT_ID="G-XXXXXXXXXX"

Linux/Mac

export VITE_API_BASE_URL=http://localhost:8080/api
export VITE_GA4_MEASUREMENT_ID=G-XXXXXXXXXX

Docker Compose

environment:
  - VITE_API_BASE_URL=http://backend:8080/api
  - VITE_GA4_MEASUREMENT_ID=G-XXXXXXXXXX

Configuração do Google Analytics 4

Para configurar o GA4:

  1. Acesse Google Analytics
  2. Crie uma nova propriedade GA4
  3. Obtenha o Measurement ID (formato: G-XXXXXXXXXX)
  4. Configure as variáveis de ambiente
  5. A aplicação irá rastrear automaticamente:
    • Visualizações de página
    • Eventos de formulário
    • Tempo de permanência
    • Conversões de cadastro

🚀 Como Executar

Pré-requisitos

  • Node.js 18+ instalado
  • npm ou yarn configurado
  • Variáveis de ambiente configuradas (.env)
  • Backend da aplicação rodando (Project Eris Backend)

Instalação das Dependências

npm install
# ou
yarn install

Executar em Desenvolvimento

npm run dev
# ou
yarn dev

A aplicação estará disponível em: http://localhost:5173

Build para Produção

npm run build
# ou
yarn build

Preview da Build de Produção

npm run preview
# ou
yarn preview

Executar com Docker

# Build da imagem
docker build -t project-eris-front .

# Executar container
docker run -p 3000:3000 \
  -e VITE_API_BASE_URL=http://localhost:8080/api \
  -e VITE_GA4_MEASUREMENT_ID=G-XXXXXXXXXX \
  project-eris-front

Docker Compose (Recomendado)

docker-compose up -d

Lint do Código

npm run lint
# ou
yarn lint

🎨 Funcionalidades da Interface

📱 Design Baseado em Estudos Científicos

  • Estética Brandless: Design minimalista inspirado na Apple para maximizar credibilidade
  • Gatilhos Mentais: Implementação de técnicas de persuasão validadas por artigos científicos
  • Hierarquia Visual: Elementos organizados para guiar o comportamento do usuário
  • Cores e Tipografia: Escolhas baseadas em psicologia das cores e legibilidade
  • Layout Responsivo: Otimizado para diferentes tamanhos de tela
  • Navegação Intuitiva: Interface touch-friendly para dispositivos móveis

🧠 Elementos de Engenharia Social

  • Urgência: Countdown dinâmico criando senso de escassez temporal
  • Autoridade: Design profissional simulando credibilidade corporativa
  • Prova Social: Elementos visuais sugerindo participação massiva
  • Reciprocidade: Promessa de benefício (sorteio) em troca de dados
  • Comprometimento: Formulário progressivo aumentando investimento do usuário

⏱️ Analytics Comportamentais (Coleta de Dados Científicos)

  • Rastreamento de Tempo: Mede tempo gasto na página e lendo termos de uso
  • Google Analytics 4: Integração completa com eventos personalizados para análise científica
  • Métricas de Conversão: Taxa de conversão de cadastros (sucesso do phishing)
  • Engajamento com Termos: Monitoramento se usuários leem avisos de sorteio falso
  • Dados Demográficos: Coleta de curso, campus e idade para análise estatística
  • Debug Mode: Ferramenta de debug para validação de eventos e coleta de dados

🎪 Countdown Dinâmico

  • Contador regressivo para data do sorteio
  • Atualização automática em tempo real
  • Animações visuais atrativas

📋 Termos de Uso (Componente Ético)

  • Modal interativo para visualização dos termos
  • Aviso Explícito: Informa claramente que o sorteio é FALSO
  • Transparência Científica: Declara tratar-se de experimento acadêmico
  • Contador de tempo de leitura para análise de comportamento
  • Rastreamento de engajamento: quantos usuários realmente leem os avisos
  • Questão Central da Pesquisa: Usuários ignoram avisos explícitos?

🔔 Sistema de Notificações

  • Toasts informativos para feedback ao usuário
  • Notificações de sucesso, erro e carregamento
  • Animações suaves de entrada e saída

✨ Animações e Transições

  • Animações fluidas com Framer Motion
  • Transições de página elegantes
  • Micro-interações para melhor UX

� Integração com Backend

O frontend se comunica com a API backend através de requisições HTTP estruturadas:

🔗 Endpoints Utilizados

Registro de Usuários

POST /api/register
Content-Type: application/json

{
  "name": "João Silva",
  "email": "joao@kroton.com.br", 
  "course_id": 1,
  "birth_date": "1995-05-15",
  "campus": 1,
  "viewed_tos": 1,
  "page_time_spent": 120,      // tempo em segundos
  "terms_time_spent": 45       // tempo em segundos (ou null)
}

Busca de Cursos

GET /api/courses/get-all
Response: Array<{id: number, course: string}>

Contadores de Analytics

POST /api/terms/terms_counter    // Incrementa contador de leitura
POST /api/terms/page_counter     // Incrementa contador de visualização

🛡️ Tratamento de Erros

O frontend possui tratamento robusto de erros da API:

// Exemplo de resposta de erro
{
  "success": false,
  "message": "Email já cadastrado no sistema"
}

Tipos de Erro Tratados:

  • ❌ Validação de Campos: Email inválido, campos obrigatórios
  • ❌ Duplicação: Email já cadastrado
  • ❌ Conectividade: Falhas de rede ou servidor indisponível
  • ❌ Timeout: Requisições que excedem tempo limite

📡 Cliente HTTP

Utiliza Axios para comunicação com configurações otimizadas:

// Configuração base do cliente
const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});

📂 Estrutura do Projeto

src/
├── api/                         # CAMADA DE INTEGRAÇÃO
│   └── ga4.tsx                 # Google Analytics 4 integration
├── app/                        # CAMADA DE APLICAÇÃO
│   ├── api/                    # Clientes e tipos da API
│   │   ├── client.ts           # Cliente HTTP para cursos
│   │   ├── register_api.ts     # Cliente HTTP para registro
│   │   └── types.ts            # Interfaces TypeScript
│   └── pages/                  # Páginas da aplicação
│       ├── form.tsx            # Página principal do formulário
│       ├── error_404.tsx       # Página de erro 404
│       └── _components/        # Componentes reutilizáveis
├── App.tsx                     # Componente raiz da aplicação
├── main.tsx                    # Ponto de entrada da aplicação
├── index.css                   # Estilos globais com Tailwind
└── vite-env.d.ts              # Definições de tipos para Vite

Arquivos de Configuração:
├── index.html                  # Template HTML principal
├── package.json                # Dependências e scripts
├── vite.config.ts             # Configuração do Vite
├── tailwind.config.js         # Configuração do Tailwind CSS
├── postcss.config.js          # Configuração do PostCSS
├── tsconfig.json              # Configuração do TypeScript
├── eslint.config.js           # Configuração do ESLint
├── Dockerfile                 # Configuração do container Docker
└── docker-compose.yml         # Orquestração de serviços

🎯 Detalhamento dos Principais Arquivos

src/app/pages/form.tsx - Componente Principal

  • Formulário de cadastro com validações em tempo real
  • Integração com Google Analytics 4
  • Rastreamento de tempo de permanência
  • Animações com Framer Motion
  • Gerenciamento de estado com React Hooks

Componentes Reutilizáveis

  • src/app/pages/_components/TextInput.tsx - Input text reutilizável usado para nome e e-mail
  • src/app/pages/_components/DateInput.tsx - Componente para entrada de data (texto ou date)
  • src/app/pages/_components/CourseSelect.tsx - Busca e seleção de cursos com dropdown
  • src/app/pages/_components/TermsModal.tsx - Modal de termos e condições (conteúdo da política)

src/api/ga4.tsx - Google Analytics

  • Inicialização do GA4 com tratamento de erros
  • Funções de rastreamento de eventos personalizados
  • Debug mode para desenvolvimento
  • Rastreamento de conversões e métricas

src/app/api/types.ts - Interfaces TypeScript

export interface RegisterPayload {
  name: string;
  email: string;
  course_id: number;
  birth_date: string;
  campus: number;
  viewed_tos: number;
  page_time_spent: number;
  terms_time_spent: number | null;
}

src/app/api/client.ts - Cliente HTTP

  • Configuração do Axios
  • Métodos para buscar cursos
  • Tratamento de erros padronizado

tailwind.config.js - Configuração de Estilos

  • Cores personalizadas do projeto
  • Breakpoints responsivos
  • Animações customizadas

⚙️ Configuração

Arquivo de Configuração Principal

vite.config.ts - Configuração do build tool

Configurações de Build

  • Build Tool: Vite 5.4.2 (extremamente rápido)
  • Hot Module Replacement: Ativo durante desenvolvimento
  • Otimizações: Tree-shaking automático e code splitting
  • Target: ES2020 para compatibilidade moderna

Configurações de Desenvolvimento

  • Dev Server: Porta 5173 (padrão do Vite)
  • Proxy: Configurável para API backend
  • Source Maps: Habilitados para debug

Configurações de Produção

  • Output: Pasta dist/ com assets otimizados
  • Minificação: CSS e JavaScript minificados
  • Assets: Versionamento automático para cache busting

Configuração do TypeScript

tsconfig.json - Configurações de tipagem strict

Configuração do ESLint

eslint.config.js - Regras de linting para React/TypeScript

Logs e Debug

  • Console Logs: Disponíveis durante desenvolvimento
  • GA4 Debug: Modo debug para validação de eventos
  • Error Boundary: Captura de erros React em produção

� Validações e UX

Validações do Frontend

Campo de Email

  • Formato: Validação de formato de email válido
  • Domínio: Específico para emails universitários (@kroton.com.br)
  • Caracteres Especiais: Bloqueio de caracteres inválidos em tempo real
  • Feedback Visual: Indicação imediata de erro/sucesso

Campo de Nome

  • Caracteres Especiais: Bloqueio automático de símbolos e números
  • Comprimento: Validação de tamanho mínimo e máximo
  • Formato: Apenas letras e espaços permitidos

Data de Nascimento

  • Formato Dual: Digitação manual (DD/MM/YYYY) ou seleção via calendário
  • Validação de Idade: Verificação automática se maior de 18 anos
  • Conversão Automática: DD/MM/YYYY ↔ YYYY-MM-DD para backend
  • Compatibilidade Mobile: Input apropriado para dispositivos móveis

Seleção de Curso

  • Busca Dinâmica: Filtragem em tempo real por nome do curso
  • Dropdown Inteligente: Lista suspensa com scroll otimizado
  • Validação: Verificação se curso selecionado é válido

Experiência do Usuário (UX)

Responsividade

  • Mobile First: Design otimizado para dispositivos móveis
  • Breakpoints: Adaptação fluida para tablet e desktop
  • Touch Gestures: Suporte completo a gestos touch

Acessibilidade

  • Contraste: Cores com contraste adequado (WCAG)
  • Navegação por Teclado: Suporte completo a tab navigation
  • Screen Readers: Atributos ARIA para leitores de tela
  • Focus Management: Indicações visuais claras de foco

Performance

  • Lazy Loading: Carregamento otimizado de componentes
  • Debouncing: Pesquisa de cursos com delay para performance
  • Memoização: Otimização de re-renders desnecessários

🔒 Segurança e Performance

Segurança Frontend

Sanitização de Dados

  • Input Filtering: Filtragem automática de caracteres maliciosos
  • XSS Prevention: Proteção contra Cross-Site Scripting
  • Data Validation: Validação rigorosa antes do envio ao backend

HTTPS Ready

  • Secure Communications: Preparado para comunicação HTTPS
  • Environment Variables: Credenciais sensíveis via variáveis de ambiente
  • API Security: Headers de segurança apropriados nas requisições

Performance

Otimizações de Build

  • Code Splitting: Divisão automática do código em chunks
  • Tree Shaking: Remoção de código não utilizado
  • Asset Optimization: Compressão de imagens e assets
  • Bundle Analysis: Análise de tamanho dos bundles

Runtime Performance

  • Virtual DOM: Otimizações nativas do React
  • Memoização: React.memo e useMemo para evitar re-renders
  • Debouncing: Otimização de pesquisas e validações
  • Lazy Loading: Carregamento sob demanda de componentes

Métricas de Performance

  • Core Web Vitals: Otimizado para LCP, FID e CLS
  • Time to Interactive: Tempo reduzido para interação
  • Bundle Size: Bundles otimizados para carregamento rápido

� Analytics e Monitoramento

Google Analytics 4 Integration

Eventos Rastreados

  • Page Views: Visualizações de página automáticas
  • Form Interactions: Início de preenchimento, submissão
  • User Engagement: Tempo de permanência, scroll depth
  • Terms Reading: Tempo gasto lendo termos de uso
  • Conversions: Cadastros completados com sucesso

Métricas Personalizadas

// Exemplos de eventos rastreados
trackEvent('form_start', { page: 'registration' });
trackEvent('terms_opened', { engagement_time: timeSpent });
trackEvent('course_selected', { course_id: selectedCourse });
trackConversion('registration_complete', { 
  page_time: pageTimeSpent,
  terms_time: termsTimeSpent 
});

Debug e Desenvolvimento

  • Debug Mode: Validação de eventos em desenvolvimento
  • Console Logging: Logs detalhados para troubleshooting
  • Event Validation: Verificação de parâmetros de eventos

Monitoramento de Comportamento

Time Tracking

  • Page Time: Tempo total gasto na página de cadastro
  • Terms Time: Tempo específico lendo termos de uso
  • Precision: Medição em milissegundos convertidos para segundos

User Journey Analytics

  • Funnel Analysis: Análise do funil de conversão
  • Drop-off Points: Identificação de pontos de abandono
  • Engagement Metrics: Métricas de engajamento do usuário

Dados Coletados para Backend

{
  page_time_spent: number,        // Segundos na página
  terms_time_spent: number | null, // Segundos lendo termos
  viewed_tos: number              // 0 ou 1 (booleano)
}

🐳 Docker e Deploy

Configuração Docker

Dockerfile

# Build stage
FROM node:18-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
ARG VITE_API_BASE_URL
ARG VITE_GA4_MEASUREMENT_ID
ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
ENV VITE_GA4_MEASUREMENT_ID=$VITE_GA4_MEASUREMENT_ID
RUN npm run build

# Production stage
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Docker Compose

version: '3.8'
services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile
      args:
        VITE_API_BASE_URL: ${VITE_API_BASE_URL}
        VITE_GA4_MEASUREMENT_ID: ${VITE_GA4_MEASUREMENT_ID}
    ports:
      - "80:3000"
    environment:
      - NODE_ENV=production

Deploy

Build de Produção

# Build local
npm run build

# Build com Docker
docker build -t project-eris-front:latest .

# Push para registry
docker push marceloaaps/project-eris-front:1.0.15

Ambientes

  • Desenvolvimento: npm run dev (localhost:5173)
  • Preview: npm run preview (build local)
  • Produção: Docker container com Nginx

CI/CD Ready

  • Dockerfile otimizado para builds automatizados
  • Suporte a variáveis de ambiente para diferentes ambientes
  • Build multi-stage para redução de tamanho da imagem

🧪 Testes e Qualidade

Testing Framework

  • React Testing Library: Testes focados no comportamento do usuário
  • Jest: Framework de testes integrado ao Vite
  • User Event Testing: Simulação de interações reais do usuário

Estratégia de Testes

Testes de Componentes

// Exemplo de teste do componente Form
test('should validate email format', () => {
  render(<Form pageNumber={1} />);
  const emailInput = screen.getByLabelText(/email/i);
  fireEvent.change(emailInput, { target: { value: 'invalid-email' } });
  expect(screen.getByText(/email inválido/i)).toBeInTheDocument();
});

Testes de Integração

  • Fluxo completo de cadastro
  • Validações de formulário
  • Comunicação com API mock

Testes de Acessibilidade

  • Navegação por teclado
  • Leitores de tela
  • Contraste de cores

Quality Assurance

Code Linting

npm run lint  # ESLint para qualidade de código

Type Checking

npx tsc --noEmit  # Verificação de tipos TypeScript

Performance Testing

  • Lighthouse audits
  • Bundle size analysis
  • Runtime performance monitoring

Boas Práticas Implementadas

  • Clean Code: Código limpo e bem documentado
  • SOLID Principles: Aplicados na arquitetura de componentes
  • DRY: Reutilização de componentes e funções
  • Separation of Concerns: Separação clara de responsabilidades

👥 Autores do Projeto

Project Eris - Desenvolvido com ❤️ para estudos de Cibersegurança e Engenharia Social

About

Project Eris é um projeto científico focado em Phishing e Engenharia Social, onde, a partir de artigos e estudos científicos, seguimos com a ideia de explorar a maior vulnerabilidade de todos os sistemas: o ser humano.

project-eris.com

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages