CRM for insurance brokerages

SEGFLOW CRM

Management and multi-quote system for insurance brokerages

A product showcase covering the interface, architecture, and quality practices behind SegFlow CRM.

View project Explore
0
telas principais
dashboard, auth e fluxos CRUD
0
temas
claro e escuro
0
áreas centrais
clientes, documentos, usuários e corretora
0%
responsivo
desktop e mobile

De zero a um sistema completo

Eu já tinha o repositório e a ideia, mas o tempo sempre era o gargalo. Com o Cursor IDE, o que parecia semanas de trabalho virou 2 dias para entregar um sistema de gestão com clientes, propostas, apólices, autenticação e qualidade de nível produtivo.

"Cada funcionalidade, cada componente e cada teste foram gerados e refinados com IA. O Cursor virou meu parceiro de desenvolvimento durante todo o processo."

— Como eu construí isso com Agent Mode, Rules, Skills e MCP Servers

Recursos completos

Cada tela foi desenhada com atenção a UX, acessibilidade e responsividade.

localhost:3000 / ui
Captura de tela do recurso

Dashboard

Visão geral do negócio com KPIs em tempo real, vencimentos próximos e ações rápidas para a rotina da corretora.

Fluxo de autenticação

Cadastro da corretora, login seguro e controle completo de acesso.

Login — Escuro
localhost:3000/#/login
Tela de login escura
Login — Claro
localhost:3000/#/login
Tela de login clara

MODO CLARO E ESCURO

Foi criado um design system completo com tokens de CSS para os dois temas, sem atalhos.

Dashboard — Escuro
localhost:3000 / dashboard
Dashboard em modo escuro
Dashboard — Claro
localhost:3000 / dashboard
Dashboard em modo claro

MOBILE FIRST

Cada tela foi adaptada para mobile com cards, navegação e formulários otimizados.

Dashboard no mobile
Dashboard
Clientes no mobile
Clientes
Login no mobile
Login

STACK TÉCNICA

Foram escolhidas tecnologias modernas para performance, DX e manutenibilidade.

Frontend

  • -> React 19
  • -> TypeScript
  • -> Vite 6
  • -> Tailwind CSS v4
  • -> React Router 7

Backend

  • -> Node.js + Express
  • -> PostgreSQL
  • -> Zod Validation
  • -> JWT + Refresh
  • -> Clean Architecture

Testing

  • -> Vitest
  • -> Testing Library
  • -> vitest-axe (a11y)
  • -> Supertest
  • -> k6 (load)

Qualidade e Seg.

  • -> SonarCloud
  • -> Rate Limiting
  • -> CORS + Helmet
  • -> Input Sanitization
  • -> Dependabot

ARQUITETURA LIMPA

O backend foi estruturado em camadas com separação clara de responsabilidades.

INTERFACE
Rotas e Controllers
APLICAÇÃO
Casos de Uso
DOMÍNIO / INFRA
Entidades e Repositórios
BANCO
PostgreSQL

QUALIDADE E SEGURANÇA

Padrões profissionais de segurança e qualidade de código foram aplicados em toda a aplicação.

Autenticação JWT

Access e Refresh tokens com rotação automática, cookies `httpOnly` e rate limiting nas rotas de autenticação.

Validação com Zod

Schemas de validação em todas as entradas, middleware centralizado e proteção contra mass assignment.

SonarCloud

Análise estática contínua, sem bugs nem vulnerabilidades, com Quality Gate integrado ao pipeline.

Sem SQL Injection

Queries parametrizadas, proteção contra IDOR via `broker_id` e sanitização de logs contra injeção.

Design System

Tokens de CSS, CVA para variantes, `cn()` para composição e componentes acessíveis com `vitest-axe`.

Testes Abrangentes

Testes unitários, de integração, funcionais e de segurança, cobrindo controllers, use cases e componentes React.

MINHA JORNADA COM CURSOR

Como os recursos do Cursor foram usados para construir este projeto desde a base.

Agent Mode e Multi-Agents

Funcionalidades completas foram construídas com orquestração multiagente, da modelagem do banco a componentes React com testes.

Agent Review

Modo de revisão dedicado para analisar mudanças, identificar riscos e sugerir melhorias dentro do fluxo de desenvolvimento.

Rules System

Regras persistentes ensinaram a IA sobre as convenções do projeto, como tokens de design system, padrões de formulário, arquitetura backend e requisitos de segurança.

Skills como Guias

Skills especializadas foram carregadas sob demanda para dar contexto técnico profundo ao agente ao longo do desenvolvimento.

Estratégia de Modelos de IA

O modo Auto foi combinado com escolhas específicas de modelo conforme a tarefa, equilibrando contexto longo, revisão de texto e implementação.

MCP Servers e Ambiente

O Model Context Protocol integrou o Cursor a GitHub, SonarCloud e ferramentas de browser, além de apoiar a configuração do ambiente.

Jules (Google AI)

Agente complementar da Google para analisar o repositório, sugerir correções e gerar patches para pontos pendentes.

Plan Mode

Plan Mode foi usado para refatorações e revisões maiores, sempre com visão global de frontend, backend, banco e testes antes de alterar código.

Debug Mode

Debug Mode foi usado principalmente para investigar falhas em testes, quando era necessário entrar no detalhe de um problema específico.

Chat & Tab

Autocomplete contextual e geração conversacional de código, de componentes de UI a consultas SQL mais complexas.

Esta Própria Página

A própria landing foi construída com apoio do Cursor, com leitura da estrutura do projeto, captura de referências visuais e geração da implementação final.