dbmaker/docs/auxiliar/ESTRUTURA_PROJETO.md

Estrutura do Projeto SteelBook

📁 Diretório Raiz

steelbook/
├── src/                          # Código fonte da aplicação
├── dist/                         # Build de produção (gerado)
├── docs/                         # Documentação
│   └── auxiliar/                # Documentação auxiliar
├── node_modules/                # Dependências (não versionado)
├── public/                      # Arquivos estáticos
├── .vscode/                     # Configurações do VS Code
├── .env                         # Variáveis de ambiente (não versionado)
├── .env.example                 # Template de variáveis
├── .gitignore                   # Arquivos ignorados pelo git
├── package.json                 # Dependências e scripts
├── tsconfig.json                # Configuração TypeScript
├── vite.config.ts               # Configuração Vite
├── tailwind.config.js           # Configuração Tailwind
├── postcss.config.js            # Configuração PostCSS
├── DOCUMENTACAO.md              # Documentação principal
├── README.md                    # Readme do projeto
└── LICENSE                      # Licença do projeto

📂 Estrutura src/

src/
├── components/                  # Componentes React reutilizáveis
│   ├── common/                 # Componentes genéricos
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   ├── Modal.tsx
│   │   └── LoadingSpinner.tsx
│   ├── layout/                 # Componentes de layout
│   │   ├── Layout.tsx
│   │   ├── Header.tsx
│   │   ├── Sidebar.tsx
│   │   └── Footer.tsx
│   ├── configuracoes/          # Componentes de configurações
│   ├── databook/               # Componentes de databook
│   ├── design/                 # Componentes de design
│   └── ui/                     # Componentes UI customizados
│
├── pages/                       # Páginas da aplicação
│   ├── Login.tsx
│   ├── Dashboard.tsx
│   ├── Templates.tsx
│   ├── TemplateCreate.tsx
│   ├── TemplateEdit.tsx
│   ├── TopicosGestao.tsx
│   ├── Databooks.tsx
│   ├── DatabookNew.tsx
│   ├── DatabookEdit.tsx
│   ├── DatabookView.tsx
│   ├── Configuracoes.tsx
│   ├── Busca.tsx
│   ├── DesignDatabook.tsx
│   └── Busca.tsx
│
├── lib/                         # Utilitários e configurações
│   ├── supabase.ts             # Cliente Supabase
│   ├── store.ts                # Zustand store
│   ├── toast.ts                # Sistema de notificações
│   ├── mutations.ts            # Mutations do Supabase
│   ├── pdfGenerator.ts         # Gerador de PDF
│   ├── storage.ts              # Upload de arquivos
│   ├── types.ts                # Tipos do Supabase
│   └── constants.ts            # Constantes da app
│
├── contexts/                    # Context API
│   └── ThemeContext.tsx        # Contexto de tema (dark/light)
│
├── hooks/                       # Custom hooks
│   ├── useDesignConfig.ts
│   └── useAuth.ts
│
├── types/                       # Tipos TypeScript globais
│   └── index.ts
│
├── App.tsx                      # Componente raiz
├── main.tsx                     # Entrada da aplicação
└── index.css                    # Estilos globais

🔄 Fluxo de Dados

App.tsx (Lazy Loading)
  ├── ThemeProvider
  ├── QueryClientProvider
  └── BrowserRouter
      ├── Login (Lazy)
      └── Layout
          ├── Header
          ├── Sidebar
          └── Routes (Lazy)
              ├── Dashboard
              ├── Templates
              ├── Databooks
              └── ...

📦 Dependências Principais

Runtime

• react - UI framework
• react-dom - React DOM
• react-router-dom - Routing
• @supabase/supabase-js - Backend
• @tanstack/react-query - Data fetching
• zustand - State management
• tailwindcss - Styling
• lucide-react - Icons
• framer-motion - Animations
• jspdf - PDF generation
• pdf-lib - PDF manipulation

Development

• typescript - Type safety
• vite - Build tool
• tailwindcss - CSS framework
• postcss - CSS processing
• eslint - Linting

🔐 Segurança

• Variáveis de ambiente em .env (não versionado)
• Service role key apenas no servidor
• Anon key para cliente
• CORS configurado no Supabase

🚀 Build Process

1. TypeScript compilation (tsc)
2. Vite build com:
   • Code splitting
   • Tree shaking
   • Minification (esbuild)
   • Asset optimization

📊 Tamanho do Projeto

• Código fonte: ~500 KB
• Build (gzip): ~200 KB
• Chunks otimizados para caching

🔄 Ciclo de Desenvolvimento

1. Desenvolvimento local: npm run dev
2. Type checking: npm run type-check
3. Linting: npm run lint
4. Build: npm run build
5. Preview: npm run preview
6. Deploy: vercel ou npm run build + push

📝 Convenções

Nomes de Arquivos

• Componentes: PascalCase (Button.tsx)
• Utilitários: camelCase (supabase.ts)
• Tipos: PascalCase (types.ts)

Estrutura de Componentes

import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'

interface Props {
  // Props
}

export default function ComponentName({ prop }: Props) {
  // Hooks
  // State
  // Effects
  // Handlers
  // Render
  return <div>...</div>
}

Imports

• Imports de bibliotecas primeiro
• Depois imports locais
• Depois tipos
• Ordenados alfabeticamente

🎯 Próximas Melhorias

• Adicionar testes unitários
• Adicionar testes E2E
• Implementar Service Worker
• Adicionar monitoring
• Implementar PWA
• Adicionar analytics