# 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