Apresentação Acadêmica · ADS · 2026

Vaporzão

Além da Matéria

7 implementações que foram além do conteúdo visto em aula

7
Conceitos
8
Páginas
14+
Arquivos
React 19
Vite 8
axios
react-router-dom
sweetalert2
JWT
Context API
rolar
01
src/services/api.js
axios.create() + Interceptors além da matéria
implementaçãoapi.js

  
Token injetado automaticamente em toda requisição. Erro 401 redireciona pro login globalmente — sem repetir código em cada componente.
02
src/pages/GameDetails.jsx
Promise.all() — Requisições Paralelas além da matéria
implementaçãoGameDetails.jsx

  
As duas requisições disparam ao mesmo tempo. Tempo total = o da mais lenta, não a soma das duas.
03
src/context/AuthContext.jsx
Token validado no Servidor além da matéria
implementaçãoAuthContext.jsx

  
A matéria ensinou: ter token = logado. Aqui o servidor confirma. Token expirado é apagado automaticamente antes de qualquer tela carregar.
04
src/components/Navbar.jsx
useRef + Fechar ao Clicar Fora além da matéria
implementaçãoNavbar.jsx

  
useRef não foi ensinado na matéria. Permite acessar o DOM diretamente e detectar se o clique veio dentro ou fora do dropdown. O return () => removeEventListener evita memory leak.
05
src/components/SearchBar.jsx · src/pages/Catalog.jsx
useLocation + Navegação com State além da matéria
implementaçãoSearchBar + Catalog

  
Dados passados entre rotas sem aparecer na URL. O mesmo hook detecta a rota ativa para destacar o link correto na Navbar.
06
src/pages/Library.jsx · Wishlist.jsx · GameDetails.jsx
SweetAlert2 com await além da matéria
implementaçãoLibrary.jsx

  
swal.fire() retorna uma Promise. Com await, o código para e espera o usuário decidir. Ação destrutiva só executa com confirmação explícita.
07
Terminal · conflito real no projeto
Conflito de Merge — git stash, drop e revert aprendido na prática
o que aconteceuTerminal

  
Dois devs editando o mesmo arquivo ao mesmo tempo sem comunicação. O pull sobrescreveu o código do Heitor e um revert mal executado apagou 7 commits. A lição: git stash antes de puxar — salva seu trabalho, atualiza, retoma. Simples.
Resumo

O que foi além da matéria

Sete pontos que exigiram pesquisa e resolução de problemas reais durante o desenvolvimento.

01
axios.create() + Interceptors
Token automático · 401 global
02
Promise.all()
Requisições paralelas · performance
03
Validação server-side do token
GET /auth/me · auto-limpeza
04
useRef + click outside
DOM direto · cleanup do useEffect
05
useLocation + navigation state
Dados entre rotas · link ativo
06
await swal.fire()
Confirmação assíncrona · ação protegida
07
Git stash, drop e revert
Conflito real de merge · stash drop era o que faltava