Rumo Techno Frontend

Frontend que entrega a interface da plataforma de orientação de carreiras. Conecta-se ao backend FastAPI para autenticação JWT, oferece rotas públicas/protegidas/admin via React Router, e usa Tailwind CSS para layout responsivo. Inclui utilitários de requisição autenticada (authFetch) e configuração pronta para deploy na Vercel.

---

Sumário

• Tecnologias
• Configuração
• Instalação
• Scripts
• Ambientes
• Arquitetura e Fluxos
• Integração com o backend
• Build e Deploy (Vercel)
• Estrutura do projeto
• Problemas comuns
• Licença

---

Tecnologias

• React + Vite
• Tailwind CSS

---

Configuração

Crie um arquivo .env na pasta pfc_frontend/ com a URL do backend:

VITE_API_URL=http://localhost:8000

---

Instalação

No Windows (PowerShell):

npm install

---

Scripts

Desenvolvimento (Vite):

npm run dev

Por padrão em http://localhost:5173.

---

Ambientes

• Desenvolvimento: usa VITE_API_URL do .env local.
• Produção: usa variáveis de ambiente da plataforma (ex.: Vercel) e vercel.json para reescritas SPA.

---

Arquitetura e Fluxos

• Roteamento:

  • App.jsx define rotas públicas, protegidas e admin.
  • routes/ProtectedRoutes.jsx contém RequireAuth e RequireAdmin.

• Autenticação:

  • utils/auth.js centraliza:
    • Base URL da API (VITE_API_URL)
    • Helpers de JWT e refresh token
    • authFetch para anexar Authorization: Bearer <access_token> e lidar com cookies refresh_token.

• Páginas:

  • pages/ inclui telas de login, cadastro, recuperação de senha, áreas de usuário e admin.

• Estilo:

  • Tailwind CSS (v4) configurado via vite.config.js.

---

Integração com o backend

• Base URL:

  • Lida por VITE_API_URL em src/utils/auth.js.

• Requisições autenticadas:

  • Use authFetch(...) para:
    • Anexar Authorization: Bearer <access_token>
    • Enviar credentials: 'include' (cookies de refresh)
    • Renovar o access token automaticamente em respostas 401/403 chamando /auth/refresh

• CORS no backend:

  • Deve permitir a origem do frontend
  • allow_credentials=true para aceitar cookies de refresh
  • Em produção cross-site: o backend deve setar o refresh cookie com SameSite=None; Secure

---

Build e Deploy (Vercel)

• O arquivo vercel.json faz rewrite de todas as rotas para index.html (SPA), garantindo que o React Router funcione no servidor.
• Configure variáveis no projeto Vercel:
  • VITE_API_URL apontando para o backend público.

Cross-site em produção:

• Garanta que o backend emita o cookie de refresh com:
  • SameSite=None; Secure
  • Domínio correto
• Ajuste CORS no backend para permitir a origem do frontend e credentials.

---

Estrutura do projeto

pfc_frontend/
  src/
    main.jsx        # monta <App/> com BrowserRouter
    App.jsx         # define rotas públicas, protegidas e admin
    routes/
      ProtectedRoutes.jsx  # RequireAuth e RequireAdmin
    pages/          # telas: login, cadastro, recuperar senha, áreas de usuário e admin
    utils/
      auth.js       # VITE_API_URL, helpers JWT, refresh token e authFetch
  vite.config.js    # plugins React e Tailwind CSS (v4)
  vercel.json       # reescritas para SPA em produção

---

Problemas comuns

• 401/403 após login:

  • Verifique se o navegador aceita cookies
  • Confira se o backend emite refresh_token em /auth/login
  • Valide o domínio e flags do cookie

• CORS:

  • Adicione a origem do frontend no backend
  • Mantenha allow_credentials=true

• VITE_API_URL incorreta:

  • Ajuste no .env do frontend e nas variáveis de ambiente da plataforma de deploy

• Rotas quebrando em produção:

  • Garanta vercel.json com reescrita para index.html

---

Licença

Este projeto é de uso interno.