Visão Geral
A Jus21 oferece mentorias jurídicas em que cada aluno recebe um cronograma de estudos diário, montado sob medida pelo seu mentor. Com cerca de 50 alunos por mentor, essa personalização deixou de ser viável sem uma ferramenta própria — e foi esse o produto que projetei e desenvolvi de ponta a ponta.
O resultado é uma plataforma web com três perfis de acesso: o aluno acompanha suas atividades semana a semana, marca conclusões e vê seu progresso; o mentor cria cronogramas a partir de modelos reutilizáveis, copia de outro aluno ou monta do zero, e acompanha atrasos de toda a sua turma em um dashboard; o administrador gerencia mentores e redistribui alunos entre eles.
Resultado: do primeiro ao último commit foram 13 dias — design de produto, interface, front-end, modelagem de dados e regras de segurança — entregando uma operação com capacidade para 100 a 120 alunos simultâneos.
"Personalização 1:1 não escala na base do esforço. Ela escala quando a ferramenta transforma o trabalho repetitivo em modelo, cópia e ajuste."
Contexto
Neste projeto, atuei além do design e do código: participo como gestor do produto, definindo escopo, priorizando funcionalidades e centralizando decisões de governança — como a criação de novos administradores, que deliberadamente não existe na interface e passa por mim.
A escala esperada guiou cada decisão técnica: cerca de 50 alunos por mentor e 100 a 120 alunos no total. Não é um produto para milhões de usuários — é uma ferramenta operacional para uma equipe enxuta, e o desenho respeita isso. Nada de infraestrutura especulativa: apenas 6 dependências de produção e um único endpoint próprio no servidor.
A ponta comercial permanece onde o cliente prefere: renovações de mentoria acontecem por WhatsApp, com negociação pessoal. A plataforma sinaliza a expiração ao aluno e oferece o canal direto — sem tentar forçar um checkout que não faz sentido para o modelo de negócio.
Saber o tamanho real da operação — 120 alunos, não 12.000 — permitiu eliminar camadas inteiras de complexidade: sem paginação desnecessária, sem cache distribuído, sem gestão de estado elaborada. O produto certo para a escala certa fica pronto em semanas, não meses.
Os Desafios
Três públicos diferentes, dados sensíveis de alunos e um fluxo de trabalho que precisava caber na rotina corrida de mentores:
Papéis e Permissões
Desenhei o produto a partir dos três perfis — cada um com uma tela inicial própria, um conjunto de ações possíveis e limites claros do que jamais pode fazer:
Todas essas regras existem como 26 políticas de Row-Level Security no PostgreSQL, reforçadas por triggers que impedem, por exemplo, que um aluno altere qualquer coisa além da conclusão de uma atividade — ou que alguém eleve o próprio papel. A interface reflete as permissões; o banco de dados as garante.
Arquitetura de Informação
Nove telas e oito modais organizados por perfil, com uma regra de ouro: a tarefa mais frequente de cada usuário deve estar no menor caminho possível. O aluno vive em uma única tela; o mentor navega entre dashboard, detalhe do aluno e editor.
A profundidade de navegação foi medida ação por ação — e otimizada para as tarefas que se repetem todos os dias:
Fluxos-Chave
O coração do produto é o ciclo de vida do cronograma: criar, publicar, acompanhar e replanejar. Cada etapa foi desenhada para reduzir trabalho repetitivo do mentor:
Todos os salvamentos têm proteção contra duplo envio e rótulos de progresso ("Criando…", "Salvando…", "Realocando…"). A conclusão de atividade pelo aluno é otimista — marca na hora e reverte com aviso se a rede falhar. Estados de vazio, carregamento e erro foram tratados em todas as telas.
Design System
A interface usa um tema claro e sóbrio — azul-marinho institucional como cor primária, azul vivo para realces e uma escala de cinzas para texto — coerente com um produto jurídico que precisa transmitir ordem e seriedade. Toda a paleta, raios e sombras vivem em um arquivo único de tokens, consumido por cerca de 60 componentes.
A cor nunca trabalha sozinha: todo status colorido — "Atrasada", "Em dia", "Expirado" — vem acompanhado de texto, e as áreas de toque no mobile foram dimensionadas para o dedo, não para o cursor.
Interface
As duas telas que definem o produto: o painel do aluno — mobile-first, onde a rotina de estudo acontece — e o editor de cronogramas, a bancada de trabalho do mentor.
Decisões Técnicas
Stack: Next.js (App Router) + React no front-end, Supabase (PostgreSQL, Auth e PostgREST) como back-end. Apenas 6 dependências de produção e um único endpoint próprio — o convite de usuários, que exige a chave de serviço no servidor. Cada trade-off foi consciente:
Resultados
Um produto completo — design, front-end, modelagem de dados e segurança — entregue em produção em duas semanas de trabalho:
Aprendizados
"Um produto sob medida não é o que tem mais recursos — é o que conhece sua operação tão bem que cada clique economizado foi calculado."