rede5/gohorsejobs

Fork 0

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

2025-12-26 12:47:53 -03:00

9.8 KiB

Raw Blame History

Frontend - GoHorse Jobs

Frontend da plataforma GoHorse Jobs construído com Next.js 15 e App Router.

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

🏗️ Arquitetura

src/
├── app/                        # App Router (35 pages)
│   ├── page.tsx                # Landing page
│   ├── login/                  # Autenticação
│   ├── 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/                 # 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
│   └── ThemeContext.tsx        # **NEW** Tema configurável
│
├── hooks/                      # Custom Hooks
│   ├── useAuth.ts              # Autenticação
│   ├── useProfile.ts           # Perfil
│   └── ...
│
├── 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	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

Definido em src/app/globals.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 */
}

🔌 API Client

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

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

Login: POST /api/v1/auth/login
Token Storage: localStorage.auth_token
Cookie: JWT HttpOnly (backup)
Headers: Authorization: Bearer <token>

Auth Context

import { useAuth } from "@/hooks/useAuth";

const { user, isLoading, login, logout } = useAuth();

🌍 Internacionalização

Idiomas Suportados

🇧🇷 Português (pt)
🇺🇸 English (en)

Uso

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

# 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

npm install
# ou
pnpm install

Executar

npm run dev

Build

npm run build
npm run start

Testes

npm run test

Lint

npm run lint

🐳 Docker

# Build
docker build -t gohorse-frontend .

# Run
docker run -p 3000:3000 gohorse-frontend

Nota: Usa output: "standalone" no next.config.ts.

📦 Dependências Principais

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

📁 Componentes UI (shadcn)

24 componentes do shadcn/ui:

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

9.8 KiB Raw Blame History