Voltar para o portfólio
SaaS · Jurídico

Valverde Jurídico

Sistema SaaS de gestão jurídica para escritório de advocacia: clientes, processos, agenda, portal do cliente e site institucional, do UX ao back-end

Meu papel
Desenvolvedor Full Stack · Designer UX/UI
Valverde JurídicoValverde Jurídico
01

Contexto

O Valverde Jurídico é um escritório de advocacia. Fui o responsável único pelo projeto: desenhei a experiência e desenvolvi o sistema inteiro, do banco de dados às telas. Parti do site institucional, que migrei para Next.js mantendo o design system, e construí em sprints o painel do escritório e o portal do cliente.

Cliente
Valverde Jurídico
Categoria
SaaS · Jurídico
Papéis
Desenvolvedor Full Stack, Designer UX/UI
Stack
Next.js, React, NestJS, Prisma, PostgreSQL, Redis
02

Desafio

Clientes, processos, prazos e audiências estavam espalhados em planilhas e agendas, sem visão do andamento de cada caso. O sistema precisava organizar tudo num lugar só e, ao mesmo tempo, respeitar quem pode ver e fazer o quê: sócios, advogados, assistentes, financeiro e o próprio cliente, com dados sensíveis protegidos e cada alteração registrada.

03

O sistema, tela a tela

Todas as telas na mesma estrutura: menu lateral por módulo, busca no topo, números do momento em cards, tabelas e status coloridos e um único botão dourado para a ação principal.

  1. 01 / 20

    Site institucional

    A porta de entrada do escritório: a promessa de assessoria jurídica estratégica, as áreas de atuação, os diferenciais, depoimentos e o formulário de contato com validação no navegador e no servidor.

  2. 02 / 20

    Portal do cliente

    Uma área separada para o cliente do escritório entrar com o próprio e-mail e acompanhar o caso, com login, recuperação de senha e o mesmo sistema visual do site.

  3. 03 / 20

    Dashboard

    A visão geral do escritório: clientes ativos, processos ativos, processos urgentes e tarefas pendentes, a distribuição dos processos por status e os processos atualizados por último, com prioridade e status em cada linha.

  4. 04 / 20

    Clientes

    O CRM jurídico: busca por nome, CPF/CNPJ ou e-mail, filtros por status, tipo de pessoa, cidade, estado, responsável e etiquetas, ações em lote e exportação.

  5. 05 / 20

    Ficha do cliente

    Tudo sobre o cliente numa página: dados da pessoa ou da empresa, contatos, endereço e etiquetas, com abas de observações, timeline, documentos, processos, financeiro e agenda.

  6. 06 / 20

    Novo cliente

    O cadastro muda conforme o tipo, pessoa física ou jurídica, e valida CPF e CNPJ pelos dígitos verificadores antes de salvar.

  7. 07 / 20

    Importação por CSV

    Para trazer a carteira que já existia em planilha: o escritório arrasta um arquivo CSV e o sistema cadastra os clientes de uma vez.

  8. 08 / 20

    Processos

    A lista de processos com número CNJ, cliente, área do direito, classe, tribunal, vara, status, prioridade e advogado responsável, com filtros por período, tribunal, vara e etiquetas.

  9. 09 / 20

    Kanban de processos

    Os mesmos processos em colunas por status (novo, em andamento, aguardando documentação, aguardando audiência…). Arrastar o card muda o status e fica registrado na timeline.

  10. 10 / 20

    Ficha do processo

    O número CNJ validado, status e prioridade no topo e os dados do processo: classe, assunto, tribunal, comarca, vara, instância e valor da causa, com abas para tudo o que acontece no caso.

  11. 11 / 20

    Partes envolvidas

    Autor, réu, terceiros, testemunhas e peritos de cada processo, e na aba ao lado os responsáveis da equipe: advogado principal, auxiliar e assistente.

  12. 12 / 20

    Comentários com menções

    A conversa da equipe dentro do processo, com editor de texto, respostas e @menções que avisam o colega.

  13. 13 / 20

    Checklist

    O que falta para o processo andar (procuração, documentos, cálculos), com o progresso de itens concluídos.

  14. 14 / 20

    Movimentações

    O registro de cada andamento com data e autor. A origem fica guardada: manual ou vinda de integrações com tribunais, como o DataJud do CNJ e o PJe.

  15. 15 / 20

    Timeline

    A auditoria do caso: cada cadastro, parte, responsável, comentário e mudança de status aparece em ordem, com quem fez e quando.

  16. 16 / 20

    Agenda jurídica

    Os compromissos do escritório em números (hoje, próximos 7 e 30 dias, prazos e tarefas atrasados), os prazos críticos em destaque e as próximas audiências e reuniões.

  17. 17 / 20

    Calendário

    Visões de dia, semana, mês e lista, com cada tipo de evento numa cor. Dá para arrastar um evento para reagendar ou clicar num horário vazio para criar.

  18. 18 / 20

    Prazos

    Prazos processuais com responsável, prioridade e status (pendente, atrasado), ligados ao processo e com lembretes automáticos antes do vencimento.

  19. 19 / 20

    Tarefas

    As tarefas da equipe com checklist e percentual concluído, prioridade, status e prazo.

  20. 20 / 20

    Integrações

    A infraestrutura para conectar o escritório a serviços externos: filas de sincronização de processos, e-mail, notificações, OCR, documentos e inteligência artificial, com providers, webhooks e logs.

04

No celular

O painel se reorganiza para telas pequenas: os indicadores viram cards empilhados, o kanban rola de lado e a agenda mostra os números do dia primeiro.

Dashboard, kanban e agenda no celular
05

Arquitetura

Um monorepo com pnpm e Turborepo, separando o front-end, que só conversa com a própria origem, do back-end, onde moram as regras.

Front-end
Next.js 15 (App Router) e React 19, Tailwind, shadcn/ui, TanStack Table, dnd-kit no kanban, TipTap nos comentários, React Hook Form e Zod
Back-end
NestJS 11 em módulos (auth, clientes, processos, agenda, financeiro, integrações, auditoria…), com casos de uso e repositórios separados
Dados
PostgreSQL com Prisma: 48 tabelas e migrações versionadas; arquivos no Supabase Storage
Filas
Redis e BullMQ para sincronizações, e-mails e lembretes, com fila de falhas (dead letter queue)
06

Segurança e integridade

Um sistema jurídico guarda dados sensíveis, então a segurança foi tratada no back-end desde a primeira sprint:

Autenticação
Tokens JWT de acesso e renovação em cookies httpOnly, senhas com argon2 e recuperação de senha por e-mail
Perfis
6 perfis com permissões próprias: administrador, sócio, advogado, assistente, financeiro e cliente
Proteções
Verificação de origem contra CSRF, limite de requisições por rota e cabeçalhos de segurança
Validação
CPF, CNPJ e número CNJ conferidos pelos dígitos verificadores, no navegador e no servidor
Auditoria
Registro de quem fez cada alteração, com timeline por cliente e por processo
07

Em números

Construído em sprints: site e base, clientes, processos, integrações e agenda. O módulo financeiro (contratos, honorários, parcelas e despesas) já existe no back-end, com as telas em desenvolvimento.

13

módulos no back-end

48

tabelas no banco de dados

6

perfis de acesso com permissões próprias

Sistema Visual

Um visual sóbrio para um escritório de advocacia: bege e branco nos fundos, o dourado como cor de ação, Playfair Display nos títulos para o tom tradicional e Inter no restante para a leitura de tabelas e formulários.

Paleta

Dourado

#C4A36E

Botões, item ativo do menu e destaques

Dourado Claro

#F3EDE2

Ícones, avatares e seleção

Bege Fundo

#FAF8F5

Fundo das telas

Bege Menu

#F6F3EE

Menu lateral

Grafite

#2B2B2B

Títulos e textos

Tipografia

Playfair Display

400 / 700

Títulos e logotipo

Inter

400 / 500 / 600

Interface, tabelas e formulários

08

Aprendizado

Construir um sistema desse tamanho sozinho pede ordem: começar pelo modelo de dados e pelas regras, entregar um módulo por sprint e só então desenhar as telas em cima do que o back-end garante. A arquitetura em módulos permitiu crescer de clientes para processos, agenda e integrações sem reescrever o que já funcionava.