Initial commit DBMaker - Oficiais e Funcionando

docs/auxiliar/ESTRUTURA_PROJETO.md

@@ -0,0 +1,198 @@
+# 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
+```tsx
+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