Skip to main content

Guia de Instalação e Configuração

📋 Pré-requisitos​

Antes de começar, certifique-se de ter as seguintes ferramentas instaladas:

Obrigatórios​

  • Node.js 18+ - Download
  • npm ou yarn - Gerenciador de pacotes
  • Git - Controle de versão

Recomendados​

  • VSCode - Editor de código
  • Extensões úteis:
    • ES7+ React/Redux/React-Native snippets
    • Tailwind CSS IntelliSense
    • TypeScript Importer
    • Prettier - Code formatter
    • ESLint

🚀 Instalação​

Fluxo de Instalação​

1. Clone o Repositório​

git clone https://github.com/your-org/findup-digital-connect.git
cd findup-digital-connect

2. Instale as Dependências​

# Com npm
npm install

# Com yarn
yarn install

# Com bun (alternativa)
bun install

3. Configuração das Variáveis de Ambiente​

Crie um arquivo .env.local na raiz do projeto:

cp .env.example .env.local

Configure as seguintes variáveis:

# Supabase Configuration
VITE_SUPABASE_URL=https://uplwocvetbcbfzgntupx.supabase.co
VITE_SUPABASE_ANON_KEY=sua_chave_anonima_do_supabase

# Development
NODE_ENV=development
VITE_APP_ENV=development

4. Configuração do Supabase​

Opção A: Usar Instância Existente​

Se você tem acesso à instância de produção, use as credenciais fornecidas.

Opção B: Criar Nova Instância​

  1. Acesse supabase.com
  2. Crie uma nova conta/projeto
  3. Configure o banco de dados PostgreSQL
  4. Execute as migrações (ver seção seguinte)

5. Execute as Migrações​

# Instale a CLI do Supabase (se não tiver)
npm install -g @supabase/cli

# Login no Supabase
supabase login

# Execute as migrações
supabase db push

# Ou execute manualmente cada arquivo em ordem
# supabase/migrations/*.sql

6. Inicie o Servidor de Desenvolvimento​

npm run dev

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

🗄️ Configuração do Banco de Dados​

Schema Principal​

O sistema utiliza PostgreSQL com as seguintes tabelas principais:

  • auth.users - Usuários (Supabase Auth)
  • profiles - Perfis estendidos
  • user_roles - Roles dos usuários
  • products - Catálogo de produtos
  • customers - Base de clientes
  • proposals - Propostas comerciais
  • orders - Pedidos/vendas
  • commissions - Comissões
  • payment_calendar - Calendário de pagamentos
  • audit_logs - Logs de auditoria

Dados Iniciais​

Para popular o banco com dados de exemplo:

-- Inserir primeiro usuário admin
INSERT INTO auth.users (id, email) VALUES
('uuid-aqui', 'admin@findup.com');

-- Criar perfil
INSERT INTO profiles (user_id, full_name, email) VALUES
('uuid-aqui', 'Administrador', 'admin@findup.com');

-- Atribuir role admin
INSERT INTO user_roles (user_id, role) VALUES
('uuid-aqui', 'super_admin');

🔐 Configuração de Segurança​

Row Level Security (RLS)​

O sistema implementa RLS em todas as tabelas. As políticas são aplicadas automaticamente via migrações.

Políticas Principais​

Usuários e Perfis​

-- Usuários podem ver apenas seus próprios dados
CREATE POLICY "Users can view own profile"
ON profiles FOR SELECT
USING (auth.uid() = user_id);

Clientes​

-- Técnicos veem apenas seus clientes
CREATE POLICY "Technicians view own customers"
ON customers FOR SELECT
USING (
  technician_id IN (
    SELECT id FROM profiles WHERE user_id = auth.uid()
  ) OR
  EXISTS (
    SELECT 1 FROM user_roles
    WHERE user_id = auth.uid() AND role IN ('admin', 'super_admin')
  )
);

Configuração de CORS​

O Supabase já vem configurado com CORS apropriado. Para desenvolvimento local, não é necessária configuração adicional.

⚡ Edge Functions​

Deploy das Funções​

# Deploy de todas as funções
supabase functions deploy

# Deploy de função específica
supabase functions deploy approve-proposal
supabase functions deploy generate-proposal-pdf
supabase functions deploy send-proposal-email
supabase functions deploy admin-reset-password

Configuração de Secrets​

# Configurar secrets para as Edge Functions
supabase secrets set RESEND_API_KEY=your_resend_key
supabase secrets set PDF_API_KEY=your_pdf_api_key

🎨 Configuração do Frontend​

Tailwind CSS​

O projeto já vem configurado com Tailwind CSS. Arquivo de configuração:

// tailwind.config.ts
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        // ... outras cores
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};

shadcn/ui​

Os componentes do shadcn/ui já estão configurados. Para adicionar novos:

npx shadcn-ui@latest add button
npx shadcn-ui@latest add form
npx shadcn-ui@latest add dialog

🔧 Scripts Disponíveis​

# Desenvolvimento
npm run dev          # Inicia servidor de desenvolvimento
npm run build        # Build para produção
npm run build:dev    # Build para desenvolvimento
npm run preview      # Preview do build
npm run lint         # Executa ESLint

🌐 Configuração de Deploy​

Vercel (Recomendado)​

  1. Conecte seu repositório no Vercel
  2. Configure as variáveis de ambiente
  3. Deploy automático a cada push

Netlify​

  1. Conecte repositório no Netlify
  2. Configure build settings:
    • Build command: npm run build
    • Publish directory: dist
  3. Configure variáveis de ambiente

Docker​

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

EXPOSE 3000
CMD ["npm", "run", "preview"]

🧪 Configuração de Testes​

Jest + Testing Library​

# Instalar dependências de teste
npm install -D @testing-library/react @testing-library/jest-dom jest

# Executar testes
npm test

Cypress (E2E)​

# Instalar Cypress
npm install -D cypress

# Executar testes E2E
npx cypress open

📊 Monitoramento​

Logs do Supabase​

Acesse os logs em:

  • Dashboard do Supabase > Logs
  • API Logs
  • Database Logs
  • Auth Logs
  • Edge Function Logs

Performance​

Para monitoramento de performance:

// src/lib/analytics.ts
export const trackEvent = (event: string, properties?: any) => {
  if (process.env.NODE_ENV === "production") {
    // Implementar analytics (Google Analytics, etc.)
  }
};

🚨 Resolução de Problemas​

Erro de CORS​

# Verificar configuração do Supabase
# Adicionar domínio nos Allowed Origins

Erro de RLS​

# Verificar se o usuário tem as permissões corretas
# Verificar se as políticas RLS estão aplicadas

Erro de Build​

# Limpar cache
rm -rf node_modules
npm install

# Verificar TypeScript
npx tsc --noEmit

Variáveis de Ambiente​

# Verificar se todas as variáveis estão definidas
echo $VITE_SUPABASE_URL
echo $VITE_SUPABASE_ANON_KEY

📝 Próximos Passos​

Após a instalação:

  1. Primeiro Login - Configure seu primeiro usuário
  2. Explorar Interface - Familiarize-se com o sistema
  3. Configurar Perfil - Complete suas informações

🆘 Suporte​

Em caso de problemas:

  1. Consulte o troubleshooting
  2. Consulte a FAQ
  3. Entre em contato com a equipe de desenvolvimento