rede5/gohorsejobs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

docs: Comprehensive FRONTEND.md update with all pages, components, and features

Browse source
This commit is contained in:
Tiago Yamamoto 2025-12-26 12:47:53 -03:00
parent 32fc42a29c
commit cb4fd35dc2
3 changed files with 284 additions and 368 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

257
DEVOPS.md
View file

@ -1,257 +0,0 @@
# DevOps - GoHorseJobs
Documentação de infraestrutura, CI/CD e deploy do projeto GoHorseJobs.
---
## 📁 Estrutura
```
.
├── .drone.yml # Pipeline CI/CD (Drone)
├── k8s/
│ ├── dev/ # Manifests Kubernetes - Desenvolvimento
│ │ ├── backend-deployment.yaml
│ │ └── backend-service.yaml
│ ├── hml/ # Manifests Kubernetes - Homologação
│ │ ├── backend-deployment.yaml
│ │ └── backend-service.yaml
│ └── prd/ # Manifests Kubernetes - Produção
│ ├── backend-deployment.yaml
│ └── backend-service.yaml
├── backend/
│ ├── Dockerfile # Build da API Go
│ └── .env.example # Variáveis de ambiente
├── frontend/ # Next.js App
└── seeder-api/ # Seeder Node.js para popular DB
```
---
## 🌍 Ambientes
| Ambiente | Branch | Namespace K8s | Registry Harbor | Réplicas |
|----------|--------|---------------|-----------------|----------|
| **DEV** | `dev` | `gohorsejobsdev` | `gohorsejobsdev/gohorsejobs-backend` | 1 |
| **HML** | `hml` | `gohorsejobshml` | `gohorsejobshml/gohorsejobs-backend` | 2 |
| **PRD** | `main` | `gohorsejobs` | `gohorsejobs/gohorsejobs-backend` | 3 |
---
## 🔄 Pipeline CI/CD (Drone)
### Fluxo de Deploy
```
dev branch → build → push (Harbor) → deploy (K8s gohorsejobsdev)
↓
hml branch → build → push (Harbor) → deploy (K8s gohorsejobshml)
↓
main branch → build → push (Harbor) → deploy (K8s gohorsejobs)
```
### Triggers
- Push na branch `dev` → executa pipeline `deploy-backend-dev`
- Push na branch `hml` → executa pipeline `deploy-backend-hml`
- Push na branch `main` → executa pipeline `deploy-backend-prd`
### Etapas do Pipeline
1. **build-and-push-backend** - Builda imagem Docker e envia para Harbor
2. **export-envs-to-k8s** - Cria secret `backend-secrets` no namespace
3. **deploy-backend** - Aplica manifests K8s e reinicia deployment
---
## 🔐 Secrets (Drone CI)
Secrets que precisam estar configurados no Drone:
### Registry
| Secret | Descrição |
|--------|-----------|
| `HARBOR_USERNAME` | Usuário do Harbor |
| `HARBOR_PASSWORD` | Senha do Harbor |
### Database
| Secret | Ambiente | Descrição |
|--------|----------|-----------|
| `DB_HOST` | Todos | Host do PostgreSQL |
| `DB_PORT` | Todos | Porta do PostgreSQL |
| `DB_USER` | Todos | Usuário do PostgreSQL |
| `DB_PASSWORD` | Todos | Senha do PostgreSQL |
| `DB_SSLMODE` | Todos | `require` ou `disable` |
| `DB_NAME_DEV` | DEV | Nome do banco dev |
| `DB_NAME_HML` | HML | Nome do banco hml |
| `DB_NAME` | PRD | Nome do banco produção |
### S3/Object Storage
| Secret | Descrição |
|--------|-----------|
| `AWS_ACCESS_KEY_ID` | Access Key |
| `AWS_SECRET_ACCESS_KEY` | Secret Key |
| `AWS_ENDPOINT` | Endpoint S3-compatible |
| `AWS_REGION` | Região |
| `S3_BUCKET` | Nome do bucket |
### Aplicação
| Secret | Descrição |
|--------|-----------|
| `JWT_SECRET` | Secret para tokens JWT (min. 32 chars) |
| `PORT` | Porta da API (8521) |
| `CORS_ORIGINS_DEV` | URLs permitidas CORS (dev) |
| `CORS_ORIGINS_HML` | URLs permitidas CORS (hml) |
| `CORS_ORIGINS` | URLs permitidas CORS (prd) |
---
## ☸️ Kubernetes
### Namespaces
```bash
# Criar namespaces
kubectl create namespace gohorsejobsdev
kubectl create namespace gohorsejobshml
kubectl create namespace gohorsejobs
```
### Registry Secret
Criar secret para pull de imagens do Harbor em cada namespace:
```bash
kubectl create secret docker-registry harbor-registry \
--docker-server=in.gohorsejobs.com \
--docker-username=<user> \
--docker-password=<pass> \
-n gohorsejobsdev
# Repetir para gohorsejobshml e gohorsejobs
```
### Deploy Manual
```bash
# DEV
kubectl apply -f k8s/dev/backend-deployment.yaml
kubectl apply -f k8s/dev/backend-service.yaml
# HML
kubectl apply -f k8s/hml/backend-deployment.yaml
kubectl apply -f k8s/hml/backend-service.yaml
# PRD
kubectl apply -f k8s/prd/backend-deployment.yaml
kubectl apply -f k8s/prd/backend-service.yaml
```
### Comandos Úteis
```bash
# Ver pods
kubectl get pods -n gohorsejobsdev
# Ver logs
kubectl logs -f deployment/gohorse-backend -n gohorsejobsdev
# Restart deployment
kubectl rollout restart deployment/gohorse-backend -n gohorsejobsdev
# Ver secrets
kubectl get secrets -n gohorsejobsdev
# Descrever deployment
kubectl describe deployment gohorse-backend -n gohorsejobsdev
```
---
## 🐳 Docker
### Build Local
```bash
cd backend
docker build -t gohorsejobs-backend:local .
```
### Variáveis de Ambiente
Ver `.env.example` para lista completa. Principais:
| Variável | Descrição | Exemplo |
|----------|-----------|---------|
| `PORT` | Porta da API | `8521` |
| `DB_HOST` | Host PostgreSQL | `db.example.com` |
| `DB_NAME` | Nome do banco | `gohorsejobs_dev` |
| `DB_SSLMODE` | Modo SSL | `require` |
| `JWT_SECRET` | Secret JWT | `sua-chave-secreta-32-chars` |
---
## 🗄️ Banco de Dados
### Conexão
```
Host: db-60059.dc-sp-1.absamcloud.com
Port: 26868
SSL: require
```
### Bancos por Ambiente
| Ambiente | Database |
|----------|----------|
| DEV | `gohorsejobs_dev` |
| HML | `gohorsejobs_hml` |
| PRD | `gohorsejobs` |
### Seeder
```bash
cd seeder-api
npm install
npm run seed # Popular banco
npm run seed:reset # Limpar banco
```
---
## 🧑‍💻 Usuários de Teste
### SuperAdmin
- **Login:** `superadmin`
- **Senha:** `Admin@2025!`
### Company Admins
| Login | Senha | Empresa |
|-------|-------|---------|
| `takeshi_yamamoto` | `Takeshi@2025` | TechCorp |
| `kenji@appmakers.mobile` | `Takeshi@2025` | AppMakers |
### Recrutadores
| Login | Senha | Empresa |
|-------|-------|---------|
| `maria_santos` | `User@2025` | DesignHub |
### Candidatos
| Login | Senha |
|-------|-------|
| `paulo_santos` | `User@2025` |
| `maria@email.com` | `User@2025` |
---
## 📋 Checklist Deploy Novo Ambiente
- [ ] Criar namespace no K8s
- [ ] Criar secret `harbor-registry` no namespace
- [ ] Adicionar secrets no Drone CI
- [ ] Criar banco de dados
- [ ] Executar seeder (opcional)
- [ ] Fazer push na branch correspondente
- [ ] Verificar logs do pipeline
- [ ] Testar endpoint `/health`

44
ROADMAP.md
View file

@ -1,44 +0,0 @@
# 🗺️ Roadmap GoHorse Jobs
Este documento descreve o plano de desenvolvimento futuro para a plataforma GoHorse Jobs.
## 🚀 Q1 2026 - Fundação e Core Features (Atual)
- [x] **Backend**: Clean Architecture, Autenticação JWT, CRUD Básico.
- [x] **Frontend**: Next.js 15, UI Components, Listagem de Vagas.
- [x] **Database**: Modelagem inicial (Users, Companies, Jobs, Applications).
- [x] **Performance**: Implementação de Paginação Server-side e Filtros.
- [x] **UX**: Skeleton Screens, i18n, FAQ Page.
## 🏗️ Q2 2026 - Área Administrativa e Candidatura
- [ ] **Admin Dashboard**:
- Métricas de uso (novos usuários, vagas ativas).
- Moderação de vagas e empresas.
- Gestão de Tags e Categorias.
- [ ] **Fluxo de Candidatura Real**:
- Upload de currículo (integração S3/MinIO).
- Histórico de candidaturas no painel do candidato.
- Notificações de status por email.
- [ ] **Perfil da Empresa Completo**:
- Edição de perfil (Logo, Descrição, Cultura).
- Gestão de recrutadores (convidar membros).
## 🛠️ Q3 2026 - Melhorias e Monetização
- [ ] **Monetização**:
- Vagas em destaque (Featured Jobs com pagamento).
- Planos de assinatura para empresas.
- [ ] **Busca Avançada**:
- Integração com ElasticSearch ou Algolia para busca full-text performática.
- Filtros por distância (Geo-search).
- [ ] **Social**:
- Login Social (Google, LinkedIn, GitHub).
- Compartilhamento de vagas com preview (OG Tags dinâmicas).
## 🔮 Futuro (Backlog)
- [ ] **App Mobile** (React Native).
- [ ] **IA para Recrutamento**:
- Matching automático de skills.
- Geração de descrição de vagas com LLMs.
- [ ] **Testes E2E** (Playwright/Cypress).
---
> *Este roadmap é uma estimativa e pode sofrer alterações conforme o feedback dos usuários e prioridades do negócio.*

345
frontend/FRONTEND.md
View file

@ -6,12 +6,22 @@
Frontend da plataforma GoHorse Jobs construído com **Next.js 15** e **App Router**.
### ✨ Features Recentes
- **Server-Side Pagination**: Listagem de vagas otimizada com paginação real.
- **Busca e Filtros**: Filtragem por localização, tipo e modo de trabalho integrada ao backend.
- **Internacionalização (i18n)**: Suporte a múltiplos idiomas (PT, EN, ES).
- **Skeleton Loading**: UI polida com estados de carregamento.
- **FAQ & Contato**: Páginas de suporte com tickets simulados.
> **Last Updated:** 2024-12-26
---
## ✨ Features
- **Server-Side Pagination**: Listagem de vagas otimizada
- **Busca e Filtros**: Tipo, localização, modo de trabalho
- **Internacionalização (i18n)**: PT, EN
- **Dark/Light Mode**: Tema automático
- **Skeleton Loading**: Estados de carregamento
- **Real-time Chat**: Integração Appwrite
- **Push Notifications**: Firebase Cloud Messaging
- **Avatar Upload**: Pre-signed URLs (S3/R2)
- **Email Templates Admin**: CRUD para templates
- **Public Job Posting**: Wizard de registro + vaga
---
@ -19,90 +29,267 @@ Frontend da plataforma GoHorse Jobs construído com **Next.js 15** e **App Route
```
src/
├── app/ # App Router (Páginas)
│ ├── dashboard/ # Área logada
│ │ ├── admin/ # Painel SuperAdmin
│ │ ├── empresa/ # Painel Empresa
│ │ └── candidato/ # Painel Candidato
├── app/ # App Router (35 pages)
│ ├── page.tsx # Landing page
│ ├── login/ # Autenticação
│ ├── vagas/ # Listagem pública
│ └── layout.tsx # Layout raiz
│ ├── register/ # Registro (candidate, company)
│ ├── post-job/ # **NEW** Wizard público
│ ├── jobs/ # Listagem e detalhes
│ │ ├── page.tsx # Listagem
│ │ ├── [id]/page.tsx # Detalhes
│ │ └── [id]/apply/ # Candidatura
│ ├── dashboard/ # Área logada (12 subpastas)
│ │ ├── admin/ # Painel Admin
│ │ │ └── email-templates/ # **NEW** CRUD templates
│ │ ├── applications/ # Candidaturas
│ │ ├── candidates/ # Lista candidatos
│ │ ├── companies/ # Lista empresas
│ │ ├── jobs/ # Gestão de vagas
│ │ ├── messages/ # Chat real-time
│ │ ├── profile/ # Perfil do usuário
│ │ ├── settings/ # Configurações
│ │ ├── support/ # Tickets
│ │ └── users/ # Gestão de usuários
│ ├── about/ # Sobre
│ ├── contact/ # Contato
│ ├── faq/ # FAQ
│ └── terms/, privacy/ # Legais
│
├── components/ # Componentes React
│ ├── ui/ # shadcn/ui primitives
│ ├── forms/ # Formulários reutilizáveis
│ └── (feature)/ # Componentes por feature
├── components/ # 44 componentes
│ ├── ui/ # 24 shadcn/ui primitives
│ ├── navbar.tsx # Navegação principal
│ ├── footer.tsx # Rodapé
│ ├── sidebar.tsx # Sidebar dashboard
│ ├── job-card.tsx # Card de vaga
│ ├── notification-dropdown.tsx # Notificações
│ ├── profile-picture-upload.tsx # Upload de avatar
│ └── loading-skeletons.tsx # Skeletons
│
├── contexts/ # React Contexts
│ └── AuthContext.tsx # Autenticação global
│ ├── AuthContext.tsx # Autenticação global
│ └── ThemeContext.tsx # **NEW** Tema configurável
│
├── hooks/ # Custom Hooks
│ ├── useAuth.ts # Hook de autenticação
│ └── useProfile.ts # Hook de perfil
│ ├── useAuth.ts # Autenticação
│ ├── useProfile.ts # Perfil
│ └── ...
│
└── lib/ # Utilitários
├── api.ts # Cliente HTTP
└── utils.ts # Helpers gerais
├── lib/ # Utilitários (13 arquivos)
│ ├── api.ts # Cliente HTTP (22KB)
│ ├── auth.ts # Auth helpers
│ ├── appwrite.ts # Appwrite client
│ ├── firebase-client.ts # FCM client
│ ├── storage.ts # Pre-signed URLs
│ ├── i18n.tsx # Internacionalização
│ ├── types.ts # TypeScript types
│ └── mock-data.ts # Dados mock (fallback)
│
└── i18n/ # Traduções
├── pt.json # Português
└── en.json # English
```
---
## 📱 Páginas
### Públicas
| Rota | Descrição |
|------|-----------|
| `/` | Landing page |
| `/jobs` | Listagem de vagas |
| `/jobs/{id}` | Detalhes da vaga |
| `/jobs/{id}/apply` | Candidatura |
| `/login` | Login |
| `/register/candidate` | Registro candidato |
| `/register/company` | Registro empresa |
| `/post-job` | **NEW** Wizard público (registro + vaga) |
| `/about` | Sobre |
| `/contact` | Contato |
| `/faq` | FAQ |
| `/forgot-password` | Reset senha |
### Dashboard (Autenticadas)
| Rota | Roles | Descrição |
|------|-------|-----------|
| `/dashboard` | All | Dashboard home |
| `/dashboard/profile` | All | Perfil do usuário |
| `/dashboard/settings` | Admin | Configurações (tema, logo) |
| `/dashboard/jobs` | Admin, Recruiter | Gestão de vagas |
| `/dashboard/jobs/new` | Admin, Recruiter | Criar vaga |
| `/dashboard/applications` | Admin, Recruiter | Candidaturas |
| `/dashboard/candidates` | Admin | Lista candidatos |
| `/dashboard/companies` | SuperAdmin | Lista empresas |
| `/dashboard/users` | SuperAdmin, Admin | Gestão usuários |
| `/dashboard/messages` | All | Chat real-time |
| `/dashboard/support` | All | Tickets de suporte |
| `/dashboard/admin/email-templates` | SuperAdmin | **NEW** Templates email |
---
## 🎨 Design System
### Tecnologias
| Tecnologia | Uso |
|------------|-----|
| **shadcn/ui** | Componentes base (Radix UI) |
| **Tailwind CSS 4** | Estilização utility-first |
| **Lucide Icons** | Ícones |
| **Framer Motion** | Animações |
| Tecnologia | Versão | Uso |
|------------|--------|-----|
| **shadcn/ui** | - | Componentes base (Radix UI) |
| **Tailwind CSS** | 4 | Estilização utility-first |
| **Lucide Icons** | 0.454 | Ícones |
| **Framer Motion** | 12 | Animações |
| **Sonner** | 1.7 | Toasts/Notificações |
| **Recharts** | 2.15 | Gráficos |
### Tema
O tema está definido em `src/app/globals.css` usando CSS variables com cores `oklch()`:
Definido em `src/app/globals.css`:
- **Primary**: Laranja (`oklch(0.68 0.22 45)`)
- **Background**: Light/Dark mode automático
- **Componentes**: Herdam do design system
```css
:root {
--primary: oklch(0.68 0.22 45); /* Laranja */
--background: oklch(1 0 0); /* Branco */
--foreground: oklch(0.145 0 0); /* Preto */
}
.dark {
--background: oklch(0.145 0 0); /* Preto */
--foreground: oklch(0.985 0 0); /* Branco */
}
```
---
## 📱 Páginas Principais
## 🔌 API Client
| Rota | Descrição | Acesso |
|------|-----------|--------|
| `/` | Landing page | Público |
| `/jobs` | Listagem de vagas | Público |
| `/login` | Autenticação | Público |
| `/dashboard/admin` | Painel admin | SuperAdmin |
| `/dashboard/empresa` | Painel empresa | CompanyAdmin, Recruiter |
| `/dashboard/candidato` | Painel candidato | JobSeeker |
O cliente de API está em `lib/api.ts` (22KB):
### Módulos
| Módulo | Funções |
|--------|---------|
| **jobsApi** | list, getById, create, update, delete |
| **adminApi** | companies, users, candidates, tags |
| **profileApi** | getMe, updateProfile, uploadAvatar |
| **applicationsApi** | create, list, getById, updateStatus |
| **emailTemplatesApi** | **NEW** list, get, create, update, delete |
| **emailSettingsApi** | **NEW** get, update |
| **chatApi** | listConversations, listMessages, sendMessage |
| **supportApi** | tickets, messages |
| **settingsApi** | get, save |
| **fcmApi** | saveToken |
### Exemplo
```typescript
import { jobsApi, profileApi } from "@/lib/api";
// Listar vagas
const jobs = await jobsApi.list({ page: 1, limit: 10 });
// Atualizar perfil
await profileApi.updateProfile({ name: "New Name" });
// Upload avatar (pre-signed URL flow)
await profileApi.uploadAvatar(file);
```
---
## 🔒 Autenticação
### Fluxo
1. **Login**: POST `/api/v1/auth/login`
2. **Token Storage**: `localStorage.auth_token`
3. **Cookie**: JWT HttpOnly (backup)
4. **Headers**: `Authorization: Bearer <token>`
### Auth Context
```typescript
import { useAuth } from "@/hooks/useAuth";
const { user, isLoading, login, logout } = useAuth();
```
---
## 🌍 Internacionalização
### Idiomas Suportados
- 🇧🇷 Português (pt)
- 🇺🇸 English (en)
### Uso
```typescript
import { useTranslation } from "@/lib/i18n";
const { t, locale, setLocale } = useTranslation();
// Usar tradução
<h1>{t("home.hero.title")}</h1>
// Trocar idioma
<button onClick={() => setLocale("en")}>English</button>
```
---
## 🔧 Environment Variables
```env
# API
NEXT_PUBLIC_API_URL=https://api.gohorsejobs.com
# Backoffice
NEXT_PUBLIC_BACKOFFICE_URL=https://backoffice.gohorsejobs.com
# Appwrite (Chat)
NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
NEXT_PUBLIC_APPWRITE_PROJECT_ID=your-project-id
NEXT_PUBLIC_APPWRITE_DATABASE_ID=your-database-id
# Firebase (Push Notifications)
NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
```
---
## 🚀 Desenvolvimento
### Instalar dependências
### Instalar
```bash
npm install
# ou
pnpm install
```
### Executar em desenvolvimento
### Executar
```bash
npm run dev
```
### Build de produção
### Build
```bash
npm run build
npm run start
```
### Linting
### Testes
```bash
npm run test
```
### Lint
```bash
npm run lint
@ -120,33 +307,63 @@ docker build -t gohorse-frontend .
docker run -p 3000:3000 gohorse-frontend
```
**Nota**: Requer `output: "standalone"` no `next.config.ts` (já configurado).
**Nota**: Usa `output: "standalone"` no `next.config.ts`.
---
## 📁 Componentes Principais
## 📦 Dependências Principais
| Componente | Descrição |
|------------|-----------|
| `components/ui/*` | Primitivos shadcn/ui |
| `components/dashboard-*` | Componentes do dashboard |
| `components/job-*` | Componentes de vagas |
| `components/sidebar.tsx` | Navegação lateral |
| Package | Version | Uso |
|---------|---------|-----|
| next | 15.5 | Framework |
| react | 19.1 | UI Library |
| tailwindcss | 4.1 | CSS |
| framer-motion | 12.23 | Animações |
| sonner | 1.7 | Toasts |
| recharts | 2.15 | Gráficos |
| firebase | 12.7 | FCM |
| appwrite | 17.0 | Chat |
| zod | 3.25 | Validação |
| zustand | 4.5 | State |
---
## 🔧 Configuração
## 📁 Componentes UI (shadcn)
### Variáveis de Ambiente
24 componentes do shadcn/ui:
```env
NEXT_PUBLIC_API_URL=http://localhost:8080
```
| Componente | Uso |
|------------|-----|
| `accordion` | FAQ |
| `alert-dialog` | Confirmações |
| `avatar` | Fotos de perfil |
| `badge` | Tags |
| `button` | Ações |
| `card` | Containers |
| `checkbox` | Formulários |
| `dialog` | Modais |
| `dropdown-menu` | Menus |
| `input` | Campos |
| `label` | Labels |
| `popover` | Popovers |
| `progress` | Progresso |
| `radio-group` | Seleção única |
| `scroll-area` | Scroll customizado |
| `select` | Dropdowns |
| `separator` | Divisores |
| `skeleton` | Loading |
| `slider` | Range |
| `switch` | Toggles |
| `tabs` | Navegação |
| `textarea` | Texto longo |
| `toast` | Notificações |
| `tooltip` | Hints |
### TypeScript
---
Configurado com strict mode em `tsconfig.json`.
## 🔗 Referências
### ESLint
Configurado com `next/core-web-vitals` e `next/typescript`.
- [API Documentation](../docs/API.md)
- [Backend](../backend/BACKEND.md)
- [Backoffice](../backoffice/BACKOFFICE.md)
- [Database Schema](../docs/DATABASE.md)