frontend-technical-challenge

Projeto desenvolvido como teste técnico utilizando arquitetura de micro-frontends e Backend For Frontend (BFF), sem uso de frameworks JavaScript (React, Vue, Angular).

Objetivo

A aplicação permite buscar vídeos no YouTube, favoritar/desfavoritar vídeos e navegar entre as telas de Vídeos e Favoritos.

---

Arquitetura

O projeto é composto por três partes principais:

• MF_DRAWER
  Aplicação host (shell) responsável pela navegação e layout geral.

• MF_VIDEOS
  Micro-frontend remoto responsável pela busca, listagem e gerenciamento de favoritos.

• BFF (Backend For Frontend)
  Camada intermediária que se comunica com a API do YouTube.

Fluxo de comunicação

MF_DRAWER → MF_VIDEOS → BFF → YouTube API

O micro-frontend MF_VIDEOS é carregado dinamicamente pelo host através do arquivo: http://localhost:3001/mf-videos.js

---

Tecnologias Utilizadas

• Web Components
• Vite
• Node.js 20 LTS
• Docker
• Docker Compose
• Jest (testes unitários)
• CSS puro (responsivo)

---

Pré-requisitos

• Node.js 20 LTS ou superior
• Docker
• Docker Compose
• Chave de API do YouTube

---

Configuração da API do YouTube

Para que o BFF consiga buscar vídeos, é necessário:

• gerar uma chave de API do YouTube Data API v3 no Google Cloud
• um SESSION_SECRET seguro para sessões do backend.

1. Criar um projeto no Google Cloud

Acesse: https://console.cloud.google.com/

• No topo da tela, clique em Selecionar projeto
• Clique em Novo projeto
• Informe um nome (ex: youtube-microfrontend-challenge)
• Clique em Criar

2. Ativar a YouTube Data API v3

• No menu lateral, acesse APIs e serviços -> Biblioteca
• Pesquise por: YouTube Data API v3
• Clique na API
• Clique em Ativar

3. Criar a chave de API

• Vá em APIs e serviços -> Credenciais
• Clique em Criar credenciais
• Selecione Chave de API
• A chave será exibida na tela
• Copie a chave e cole no arquivo bash .env

4. Restringir a chave (Recomendado)

• Clique na chave criada
• Em Restrições de API, selecione: Restringir chave
• Marque YouTube Data API v3
• Clique em Salvar

5. Criar SESSION_SECRET

O SESSION_SECRET é usado pelo backend para assinar cookies/sessões e deve ser uma string longa e aleatória.

Opção 1 — Node.js (recomendado)

Execute no terminal:

node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

Isso irá gerar algo como:

9f8c2a7b6e5d4c3b2a1f0e9d8c7b6a5f4e3d2c1b0a9f8e7d6c5b4a3f2e1d0c9\

Opção 2 — OpenSSL

bash openssl rand -hex 32

Opção 3 — Gerador online

Use apenas se necessário:

https://www.allkeysgenerator.com/Random/Security-Encryption-Key-Generator.aspx

Escolha:

• 256 bits
• Hex

6. Configurar no projeto

Crie o arquivo:

bash bff/.env

Adicione a chave, o segredo e cole no arquivo:

YOUTUBE_API_KEY=SUA_CHAVE_AQUI
SESSION_SECRET=SUA_SESSION_SECRET_AQUI

O arquivo .env está listado no .gitignore e não deve ser versionado.

---

Como rodar o projeto

Abra três terminais.

1. BFF

cd bff
npm install
npm run build
npm start

Disponível em: http://localhost:3002

2. MF_VIDEOS (remote)

cd mf_videos
npm install
npm run build
npm run preview

Disponível em: http://localhost:3001/mf-videos.js

3. MF_DRAWER (host)

cd mf_drawer
npm install
npm run dev

Disponível em: http://localhost:3000/videos e http://localhost:3000/favoritos

Funcionalidades

Vídeos

• Busca de vídeos utilizando a API do YouTube
• Exibição em grid responsivo
• Reprodução do vídeo em nova aba
• Marcar e desmarcar vídeos como favoritos
• Paginação dos resultados ("Carregar mais")

Favoritos

• Listagem de vídeos favoritados
• Remoção direta da lista de favoritos
• Contador de favoritos atualizado em tempo real no menu lateral

Testes

Os módulos possuem testes unitários (BFF com Jest e micro-frontends com Vitest).

Para executá-los:

cd bff
npm test

cd mf_drawer
npm test

cd mf_videos
npm test

Endpoints do BFF

• GET /api/health
• GET /api/videos/search?q=...
• GET /api/favorites
• POST /api/favorites/toggle

Decisões Técnicas

• Utilização de Web Components para atender ao requisito de não usar frameworks JS
• Arquitetura de micro-frontends com separação clara de responsabilidades
• MF_VIDEOS exportado como library e carregado dinamicamente pelo host
• Estado do micro-frontend mantido ao alternar entre rotas
• Comunicação entre micro-frontends via Custom Events
• Layout responsivo desenvolvido com CSS puro

Licença

Este projeto está licenciado sob a Licença MIT.