gohorsejobs/frontend/FRONTEND.md
Tiago Yamamoto 841b1d780c feat: Email System, Avatar Upload, Email Templates UI, and Public Job Posting
- Backend: Email producer (LavinMQ), EmailService interface
- Backend: CRUD API for email_templates and email_settings
- Backend: avatar_url field in users table + UpdateMyProfile support
- Backend: StorageService for pre-signed URLs
- NestJS: Email consumer with Nodemailer and Handlebars
- Frontend: Email Templates admin pages (list/edit)
- Frontend: Updated profileApi.uploadAvatar with pre-signed URL flow
- Frontend: New /post-job public page (company registration + job creation wizard)
- Migrations: 027_create_email_system.sql, 028_add_avatar_url_to_users.sql
2025-12-26 12:21:34 -03:00

152 lines
3.8 KiB
Markdown

# Frontend - GoHorse Jobs
[![Next.js](https://img.shields.io/badge/Next.js-15-black?style=flat-square&logo=next.js)](https://nextjs.org/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind-4-06B6D4?style=flat-square&logo=tailwindcss)](https://tailwindcss.com/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5-3178C6?style=flat-square&logo=typescript)](https://typescriptlang.org/)
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.
---
## 🏗️ Arquitetura
```
src/
├── app/ # App Router (Páginas)
│ ├── dashboard/ # Área logada
│ │ ├── admin/ # Painel SuperAdmin
│ │ ├── empresa/ # Painel Empresa
│ │ └── candidato/ # Painel Candidato
│ ├── login/ # Autenticação
│ ├── vagas/ # Listagem pública
│ └── layout.tsx # Layout raiz
├── components/ # Componentes React
│ ├── ui/ # shadcn/ui primitives
│ ├── forms/ # Formulários reutilizáveis
│ └── (feature)/ # Componentes por feature
├── contexts/ # React Contexts
│ └── AuthContext.tsx # Autenticação global
├── hooks/ # Custom Hooks
│ ├── useAuth.ts # Hook de autenticação
│ └── useProfile.ts # Hook de perfil
└── lib/ # Utilitários
├── api.ts # Cliente HTTP
└── utils.ts # Helpers gerais
```
---
## 🎨 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 |
### Tema
O tema está definido em `src/app/globals.css` usando CSS variables com cores `oklch()`:
- **Primary**: Laranja (`oklch(0.68 0.22 45)`)
- **Background**: Light/Dark mode automático
- **Componentes**: Herdam do design system
---
## 📱 Páginas Principais
| 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 |
---
## 🚀 Desenvolvimento
### Instalar dependências
```bash
npm install
```
### Executar em desenvolvimento
```bash
npm run dev
```
### Build de produção
```bash
npm run build
npm run start
```
### Linting
```bash
npm run lint
```
---
## 🐳 Docker
```bash
# Build
docker build -t gohorse-frontend .
# Run
docker run -p 3000:3000 gohorse-frontend
```
**Nota**: Requer `output: "standalone"` no `next.config.ts` (já configurado).
---
## 📁 Componentes 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 |
---
## 🔧 Configuração
### Variáveis de Ambiente
```env
NEXT_PUBLIC_API_URL=http://localhost:8080
```
### TypeScript
Configurado com strict mode em `tsconfig.json`.
### ESLint
Configurado com `next/core-web-vitals` e `next/typescript`.