📄 Vitae.io App

Plataforma moderna e intuitiva para criação e gerenciamento de currículos profissionais

Funcionalidades • Tecnologias • Instalação • Documentação • Arquitetura

App em execução (Vercel): https://vercel.com/ojuaracoders-projects/vitae-io-app

📖 Sobre o Projeto

Vitae.io é uma aplicação web completa para criação, edição e gerenciamento de currículos profissionais, desenvolvida com Next.js 14 e React 18. O projeto oferece uma experiência rica em funcionalidades, incluindo múltiplos templates, editor de texto avançado, drag-and-drop para reorganização de seções, e persistência local de dados sem necessidade de conta.

🎯 Objetivos

✅ Facilitar a criação de currículos profissionais com templates modernos
✅ Oferecer experiência fluida com validação em tempo real e salvamento automático
✅ Garantir privacidade através de persistência local (localStorage)
✅ Proporcionar flexibilidade com múltiplos layouts e customização completa
✅ Responsividade total para desktop e dispositivos móveis

✨ Funcionalidades

🎨 Templates e Layouts

3 layouts profissionais: Classic, Modern, Eloquent
Visualização em tempo real das mudanças
Controles de zoom e navegação intuitiva
Tema claro/escuro com next-themes

📝 Editor de Conteúdo

Editor rich-text com TipTap (Markdown, formatação, alinhamento)
Formulários dinâmicos com React Hook Form + Zod
Validação robusta com feedback instantâneo
4 tipos de formulários:
- Simple (campos básicos)
- Complex (múltiplos campos agrupados)
- Slider (controles deslizantes)
- Description (áreas de texto expandidas)

🔄 Organização e Gestão

Drag & Drop em dois níveis (seções e itens)
Sincronização automática da ordem de seções
CRUD completo de currículos via localStorage
Importação/Exportação de dados (JSON)
Estatísticas de uso e gestão de currículos

📱 Experiência do Usuário

Interface responsiva com layout mobile otimizado
Salvamento automático (debounced)
Modo de edição expansível para formulários complexos
Títulos editáveis inline
Avatar personalizado com crop de imagem
Geração de PDF direto no navegador (html-to-image + jsPDF)

🛠️ Tecnologias

Core

Next.js 14.2.33 - Framework React com App Router
React 18.3.1 - Biblioteca UI
TypeScript - Tipagem estática

UI & Styling

Tailwind CSS 3.4 - Framework CSS utility-first
Shadcn/ui - Componentes reutilizáveis com Radix UI
Lucide React - Ícones SVG otimizados
next-themes - Gerenciamento de temas

Formulários & Validação

React Hook Form 7.68 - Gerenciamento de formulários performático
Zod 4.1 - Schema validation TypeScript-first
@hookform/resolvers - Integração RHF + Zod

Editor & Interatividade

TipTap 3.13 - Editor WYSIWYG headless
@hello-pangea/dnd - Drag and Drop (fork do react-beautiful-dnd)
react-resizable-panels - Painéis redimensionáveis

Utilitários

date-fns - Manipulação de datas
clsx + tailwind-merge - Utilitários CSS
uuid - Geração de IDs únicos
sonner - Toast notifications
html-to-image - Conversão DOM para imagem
jsPDF - Geração de PDF no navegador

Bibliotecas Adicionais

react-avatar-editor - Editor de avatar com crop
mergician - Deep merge de objetos

🚀 Instalação

Pré-requisitos

Node.js 18+
npm ou yarn

Passos

Clone o repositório

git clone https://github.com/OjuaraCoder/vitae.io-app.git
cd vitae.io-app

Instale as dependências

npm install

Execute em modo de desenvolvimento

npm run dev

Acesse a aplicação

http://localhost:3000

Scripts Disponíveis

npm run dev      # Inicia servidor de desenvolvimento
npm run build    # Gera build de produção
npm start        # Inicia servidor de produção
npm run lint     # Executa linter ESLint

📁 Estrutura do Projeto

vitae.io-app/
├── src/
│   ├── @types/              # Definições TypeScript globais
│   ├── app/                 # App Router (Next.js 14)
│   │   ├── dashboard/       # Dashboard principal
│   │   │   ├── (layout)/    # Grupo de rotas com layout
│   │   │   │   ├── import/  # Página de importação
│   │   │   │   └── statistics/ # Página de estatísticas
│   │   │   └── [id]/        # Página de edição de currículo
│   │   └── layout.tsx       # Layout raiz
│   ├── components/
│   │   ├── pages/           # Componentes específicos de páginas
│   │   │   ├── dashboard/   # Componentes do dashboard
│   │   │   └── vitae/       # Editor de currículo
│   │   │       ├── content/ # Área de preview
│   │   │       ├── context/ # Contextos React
│   │   │       ├── layouts/ # Templates de currículo
│   │   │       └── settings/ # Formulários de edição
│   │   ├── shared/          # Componentes reutilizáveis
│   │   └── ui/              # Componentes Shadcn/ui
│   ├── hooks/               # Custom React hooks
│   ├── lib/                 # Utilitários e serviços
│   │   ├── constants.ts     # Constantes globais
│   │   ├── storage.ts       # API localStorage
│   │   ├── validations.ts   # Schemas Zod
│   │   └── vitae-service.ts # Camada de serviço
│   └── styles/              # Estilos globais
├── docs/                    # Documentação técnica detalhada
└── public/                  # Assets estáticos

🏗️ Arquitetura

Padrões Arquiteturais

1️⃣ Service Layer Pattern

Abstração da camada de persistência através do vitae-service.ts:

// API unificada para CRUD de currículos
export const vitaeService = {
  getAll: () => LocalStorage.getAllVitaes(),
  getById: (id: string) => LocalStorage.getVitae(id),
  create: (data: ResumeData) => LocalStorage.createVitae(data),
  update: (id: string, data: ResumeData) => LocalStorage.updateVitae(id, data),
  delete: (id: string) => LocalStorage.deleteVitae(id)
}

2️⃣ Context + Provider Pattern

Gerenciamento de estado global com React Context:

FormProvider: Centraliza React Hook Form + sincronização de dados
SectionOrderContext: Gerencia ordem de seções com drag-and-drop
MobileViewContext: Controla visualização mobile

3️⃣ Compound Components Pattern

Componentes complexos com subcomponentes compostos:

<DragSection>
  <DragItem />
  <DragItem />
</DragSection>

4️⃣ Custom Hooks Pattern

Encapsulamento de lógica reutilizável:

useIsMobile: Detecção de dispositivo mobile
useDebounce: Debouncing de inputs
useFormEditMode: Controle de modo de edição
useMobileView: Toggle entre editor/preview mobile

Fluxo de Dados

┌─────────────────┐
│  localStorage   │ ← Fonte de dados persistente
└────────┬────────┘
         ↓
┌─────────────────┐
│ vitae-service   │ ← Camada de abstração
└────────┬────────┘
         ↓
┌─────────────────┐
│  FormProvider   │ ← React Hook Form + Zod
└────────┬────────┘
         ↓
┌─────────────────┐
│   Formulários   │ ← UI Components
└─────────────────┘
         ↓
┌─────────────────┐
│ Salvamento Auto │ ← onBlur + debounce
└─────────────────┘

📚 Documentação

Este projeto possui documentação técnica extensa na pasta /docs. Recomendamos seguir a ordem lógica de estudo:

🎯 Documentos Principais

ROUTING_SYSTEM.md - Sistema de rotas e navegação
DASHBOARD.md - Estrutura do dashboard
LOCALSTORAGE_PERSISTENCE.md - Persistência de dados
SERVICE_LAYER_ARCHITECTURE.md - Camada de serviço
ZOD_VALIDATIONS.md - Sistema de validação
FORM_PROVIDER.md - Gerenciamento de formulários
DYNAMIC_FORMS.md - Formulários dinâmicos
DRAG_DROP_ACCORDIONS.md - Sistema de drag & drop
PDF_GENERATION.md - Geração de PDF no navegador
TYPESCRIPT_TYPES.md - Sistema de tipos

📖 Consulte docs/README.md para o índice completo e ordem recomendada de leitura.

🔧 Configuração de Ambiente

Variáveis de Ambiente

Atualmente o projeto funciona 100% no navegador sem necessidade de variáveis de ambiente. Configurações futuras podem incluir:

# Futuras integrações (não implementadas)
DATABASE_URL=postgres://<user>:<password>@<host>:<port>/<database>
NEXT_PUBLIC_API_URL=https://api.vitae.io

Ajustes para Ambientes Restritos

Se você trabalha em ambiente corporativo com proxy/firewall:

Instalar pacotes Shadcn:

$env:NODE_TLS_REJECT_UNAUTHORIZED='0'; npx shadcn@3.5.1 add <component>

Limpar cache e dependências:

Remove-Item -Recurse -Force node_modules, .next, package-lock.json -ErrorAction SilentlyContinue; npm cache clean --force

Instalar com SSL desabilitado:

npm config set strict-ssl false; npm install

🎨 Customização

Adicionar Novo Template

Crie pasta em src/components/pages/vitae/layouts/<nome>/
Implemente componente com interface ResumeData
Registre em constants.ts

Adicionar Nova Seção

Defina tipo em types.d.ts
Crie schema Zod em validations.ts
Implemente componente de formulário
Adicione ao renderizador de seções

🤝 Contribuindo

Contribuições são bem-vindas! Para contribuir:

Fork o projeto
Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
Commit suas mudanças (git commit -m 'Add some AmazingFeature')
Push para a branch (git push origin feature/AmazingFeature)
Abra um Pull Request

📝 Roadmap

Exportação para PDF (html-to-image + jsPDF)
3 templates profissionais (Classic, Modern, Eloquent)
Mais templates profissionais
Assistente IA para sugestões de conteúdo
Suporte a múltiplos idiomas (i18n)
Análise de currículos com score ATS
PWA (Progressive Web App)
Sincronização opcional com nuvem
Compartilhamento de currículos com link público

📄 Licença

Este projeto está licenciado sob a MIT License.

👨‍💻 Autor

Wesley Araujo

GitHub: @OjuaraCoder

🙏 Agradecimentos

Shadcn/ui pela excelente biblioteca de componentes
Vercel pelo Next.js
Comunidade open-source pelas bibliotecas incríveis

⭐ Se este projeto foi útil, considere dar uma estrela!

Name		Name	Last commit message	Last commit date
.vscode		.vscode
docs		docs
public		public
src		src
.gitignore		.gitignore
CLAUDE.md		CLAUDE.md
LICENSE		LICENSE
README.md		README.md
components.json		components.json
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
prompt_vitae-io.txt		prompt_vitae-io.txt
svgr.config.js		svgr.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation