Estrutura do Frontend

O LipMKT é o frontend da plataforma LIP, construído com Next.js 15, Redux Toolkit e Firebase.

🚀 Tecnologias Principais

Core

• Next.js 15 - Framework React com App Router
• TypeScript - Tipagem estática rigorosa
• React 19 - Biblioteca de interface
• Tailwind CSS 4 - Framework de estilização

Estado e Dados

• Redux Toolkit - Gerenciamento de estado global
• Firebase - Backend e autenticação
• Context API - Estados específicos (Auth, Realtime)
• React Query - Cache e sincronização de dados

Interface

• shadcn/ui - Sistema de componentes
• Lucide React - Ícones modernos
• Framer Motion - Animações fluídas
• Recharts - Visualização de dados

📁 Estrutura do Projeto

src/
├── app/                          # App Router (Next.js 15)
│   ├── (auth)/                   # Grupo de rotas de autenticação
│   │   ├── login/
│   │   └── auth/
│   ├── dashboard/                # Dashboard principal
│   │   ├── analytics/           # Página de analytics
│   │   ├── conversations/       # Gestão de conversas
│   │   ├── crm/                # CRM integrado
│   │   ├── flows/              # Editor de fluxos
│   │   ├── settings/           # Configurações
│   │   ├── layout.tsx          # Layout do dashboard
│   │   └── page.tsx            # Dashboard home
│   ├── master/                  # Painel super admin
│   ├── analise/                 # Análise de mensagens
│   ├── api/                     # API Routes
│   ├── globals.css             # Estilos globais
│   ├── layout.tsx              # Layout raiz
│   └── page.tsx                # Landing page
│
├── components/                   # Componentes reutilizáveis
│   ├── dashboard/              # Componentes do dashboard
│   │   ├── analytics-dashboard.tsx
│   │   ├── chat-list.tsx
│   │   ├── conversation-list.tsx
│   │   ├── dashboard-nav.tsx
│   │   └── main-dashboard.tsx
│   ├── crm/                    # Componentes de CRM
│   │   ├── contact-form.tsx
│   │   ├── deal-kanban.tsx
│   │   ├── pipeline-view.tsx
│   │   └── activity-timeline.tsx
│   ├── sections/               # Seções da landing page
│   │   ├── hero-section.tsx
│   │   ├── features-section.tsx
│   │   ├── how-it-works-section.tsx
│   │   └── cta-section.tsx
│   ├── ui/                     # Componentes base (shadcn/ui)
│   │   ├── button.tsx
│   │   ├── dialog.tsx
│   │   ├── form.tsx
│   │   └── ... (50+ componentes)
│   ├── forms/                  # Formulários complexos
│   ├── dialogs/                # Modais e diálogos
│   └── providers/              # Context providers
│
├── contexts/                    # Context Providers
│   ├── auth-context.tsx        # Autenticação
│   └── realtime-context.tsx    # Conexão tempo real
│
├── hooks/                      # Custom Hooks
│   ├── redux.ts               # useAppDispatch, useAppSelector
│   ├── use-mobile.tsx
│   ├── use-toast.ts
│   ├── useFlows.ts
│   ├── useAccessControl.ts
│   ├── useAgentOnlineStatus.ts
│   └── crm/                   # Hooks específicos do CRM
│
├── store/                      # Redux Store
│   ├── analytics/             # Store de analytics
│   ├── auth/                  # Store de autenticação
│   ├── conversations/         # Store de conversas
│   ├── flows/                 # Store de fluxos
│   ├── metrics/               # Store de métricas
│   ├── settings/              # Store de configurações
│   ├── whatsapp/              # Store do WhatsApp
│   ├── index.ts               # Configuração da store
│   └── provider.tsx           # Provider da store
│
├── lib/                        # Utilitários e configurações
│   ├── firebase-client.ts     # Cliente Firebase
│   ├── firebase.ts            # Configuração Firebase
│   ├── types.ts               # Tipos globais
│   └── utils.ts               # Funções utilitárias
│
└── public/                     # Arquivos estáticos

🏗️ Padrão de Store (Redux Toolkit)

Cada feature possui sua própria pasta com estrutura padronizada:

store/auth/
├── actions.ts      # Action creators
├── reducers.ts     # Reducers e createAsyncThunk
├── selectors.ts    # Seletores memoizados
├── services.ts     # Chamadas de API
└── types.ts        # TypeScript interfaces

Exemplo de Serviço

Copiar

Exemplo de Async Thunk

Copiar

Exemplo de Seletor

Copiar

🎨 Padrão de Componentes

Componente com Redux

Componente React usando Redux Toolkit - Padrão Recomendadotypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Componente com Context

Componente React usando Context API para Estado Localtypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

🔐 Autenticação

Firebase Auth Context

Context Provider para Autenticação Firebasetypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

🎨 Sistema de Design

Cores

Copiar

Tipografia

Copiar

Componentes shadcn/ui

Todos os componentes são customizados para o tema dark com accent amber:

• Button, Input, Select, Dialog
• Dropdown, Tooltip, Popover
• Table, Card, Tabs
• Form, Label, Checkbox
• +50 componentes prontos

📱 Funcionalidades Principais

Dashboard

• Analytics em Tempo Real: Gráficos com Recharts
• Gestão de Conversas: Lista virtualizad

a com react-window

• Editor de Fluxos: Drag & drop com ReactFlow
• CRM: Kanban boards, pipelines, deals

Landing Page

• Hero Section: Animações com Framer Motion
• Features: Grid responsivo de recursos
• Como Funciona: Timeline interativa
• CTA: Formulário de cadastro com validação

🔄 Tempo Real

Firebase Realtime Context

Context Provider para Dados em Tempo Realtypescript
Copiar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

🚦 Regras de Desenvolvimento

Obrigatório

1. Tipagem rigorosa: Evitar any, usar interfaces específicas
2. camelCase: Para arquivos e funções
3. "use client": Em componentes interativos com dispatch/selectors
4. Documentação: JSDoc para funções públicas
5. Testes: Mínimo de 80% de cobertura

Padrão de Estado

• "use client": Sempre usar dispatch + selectors
• Serviços diretos: Apenas em Server Components
• Unwrap: Usar unwrap() apenas quando estritamente necessário
• Context: Apenas para estado específico (auth, realtime)

📊 Performance

Otimizações Implementadas

• Code Splitting: Lazy loading de rotas
• Image Optimization: Next.js Image component
• Virtual Scrolling: react-window para listas grandes
• Memoization: React.memo e useMemo estratégicos
• Bundle Analysis: Análise de bundle size

🔗 Links Úteis

• Next.js 15 Docs
• Redux Toolkit
• shadcn/ui
• Firebase
• Tailwind CSS

Próximos Passos

• Componentes - Biblioteca de componentes
• Redux Store - Gerenciamento de estado
• Firebase Integration - Configuração Firebase