Connective

Um sistema CRM (Customer Relationship Management) moderno e intuitivo para gerenciamento de clientes e relacionamentos comerciais.

📋 Sobre o Projeto

Connective é uma solução completa de CRM que oferece uma interface visual e interativa para gerenciar todo o ciclo de relacionamento com clientes. O sistema conta com funcionalidades essenciais para organização e acompanhamento de leads e clientes.

✨ Funcionalidades

• Quadro Kanban - Visualização e organização de leads/clientes em estágios do funil de vendas
• Gráficos e Dashboard - Análise visual de métricas e performance
• Tabela de Clientes - Cadastro e gerenciamento completo de informações de clientes
• Interface Responsiva - Design adaptável para diferentes dispositivos
• Tema Dark/Light - Alternância entre modos claro e escuro

🚀 Tecnologias

Este projeto foi desenvolvido com as seguintes tecnologias:

• Next.js 15 - Framework React com Turbopack
• React 19 - Biblioteca JavaScript para interfaces
• TypeScript - Superset JavaScript com tipagem estática
• Tailwind CSS 4 - Framework CSS utility-first
• Radix UI - Componentes acessíveis e não-estilizados
• Zustand - Gerenciamento de estado
• React Hook Form - Gerenciamento de formulários
• Zod - Validação de schemas TypeScript
• Recharts - Biblioteca de gráficos para React
• dnd-kit - Drag and drop toolkit
• Axios - Cliente HTTP
• Motion - Biblioteca de animações

📦 Pré-requisitos

Antes de começar, você precisa ter instalado em sua máquina:

• Node.js (versão 20 ou superior)
• npm ou yarn

🔧 Instalação

1. Clone o repositório:

git clone https://github.com/seu-usuario/connective.git

2. Acesse a pasta do projeto:

cd connective/web

3. Instale as dependências:

npm install
# ou
yarn install

4. Configure as variáveis de ambiente:

Crie um arquivo .env na raiz do projeto com as seguintes variáveis:

NEXT_PUBLIC_API_URL=http://localhost:3333

🎮 Executando o Projeto

Modo Desenvolvimento

npm run dev
# ou
yarn dev

O aplicativo estará disponível em http://localhost:3000

Modo Produção

# Build
npm run build
# ou
yarn build

# Start
npm start
# ou
yarn start

📁 Estrutura do Projeto

web/
├── app/
│   ├── (auth)/          # Rotas de autenticação
│   ├── dashboard/       # Área logada
│   ├── pricing/         # Página de preços
│   ├── globals.css      # Estilos globais
│   ├── layout.tsx       # Layout principal
│   └── page.tsx         # Página inicial
├── components/
│   ├── cards/           # Componentes de cards
│   ├── chart/           # Componentes de gráficos
│   ├── dialog/          # Modais e diálogos
│   ├── form/            # Componentes de formulário
│   ├── header/          # Cabeçalho
│   ├── nav/             # Navegação
│   ├── sidebar/         # Barra lateral
│   ├── table/           # Tabelas
│   └── ui/              # Componentes base
├── data/                # Dados estáticos
├── hooks/               # Custom hooks
├── lib/                 # Utilitários e configurações
├── public/              # Arquivos públicos
├── store/               # Gerenciamento de estado
├── types/               # Definições TypeScript
└── utils/               # Funções auxiliares

📝 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

👤 Autor

Victor Pinheiro Mello

---

⭐ Se este projeto te ajudou, considere dar uma estrela no repositório!