docs: adiciona documentação completa do projeto SaveInMed

- Cria README.md na raiz com visão global e diagrama de arquitetura
- Adiciona/atualiza README.md em todos os componentes:
  - backend (API Go)
  - backoffice (NestJS)
  - marketplace (React/Vite)
  - saveinmed-bff (Python/FastAPI)
  - saveinmed-frontend (Next.js)
  - website (Fresh/Deno)
- Atualiza .gitignore em todos os componentes com regras abrangentes
- Cria .gitignore na raiz do projeto
- Renomeia pastas para melhor organização:
  - backend-go → backend
  - backend-nest → backoffice
  - marketplace-front → marketplace
- Documenta arquitetura, tecnologias, setup e fluxo de desenvolvimento
This commit is contained in:
Tiago Yamamoto 2025-12-17 17:07:30 -03:00
parent 1130fb662a
commit 42f72f5f43
86 changed files with 2337 additions and 69 deletions

40
.gitignore vendored Normal file
View file

@ -0,0 +1,40 @@
# IDEs and Editors
.vscode/
.idea/
*.swp
*.swo
*~
.DS_Store
# OS
Thumbs.db
.Spotlight-V100
.Trashes
# Environment variables
.env
.env.local
.env.*.local
# Logs
*.log
logs/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Temporary files
*.tmp
*.temp
.cache/
# Build outputs (general)
dist/
build/
out/
# Dependencies
node_modules/
# Each subproject has its own .gitignore for specific rules

582
README.md Normal file
View file

@ -0,0 +1,582 @@
# SaveInMed
**Plataforma B2B de Marketplace Farmacêutico**
SaveInMed é uma plataforma completa de marketplace B2B que conecta farmácias e distribuidoras farmacêuticas, facilitando a compra e venda de medicamentos e produtos farmacêuticos com eficiência, segurança e transparência.
---
## 📋 Índice
- [Visão Geral](#-visão-geral)
- [Arquitetura do Sistema](#-arquitetura-do-sistema)
- [Componentes do Projeto](#-componentes-do-projeto)
- [Tecnologias Utilizadas](#-tecnologias-utilizadas)
- [Setup Completo](#-setup-completo)
- [Fluxo de Desenvolvimento](#-fluxo-de-desenvolvimento)
- [Deploy](#-deploy)
- [Contribuindo](#-contribuindo)
- [Licença](#-licença)
---
## 🎯 Visão Geral
SaveInMed é uma solução completa que oferece:
- ✅ **Marketplace B2B**: Conecta farmácias compradoras com distribuidoras vendedoras
- ✅ **Gestão de Catálogo**: Controle completo de produtos, lotes e validades
- ✅ **Processamento de Pedidos**: Fluxo completo desde o carrinho até a entrega
- ✅ **Pagamentos Integrados**: Mercado Pago com split automático de comissões
- ✅ **Dashboard Administrativo**: Métricas, relatórios e gestão completa
- ✅ **Multi-tenant**: Suporte para múltiplas empresas e usuários
- ✅ **Alta Performance**: APIs otimizadas em Go para operações críticas
- ✅ **Escalabilidade**: Arquitetura moderna e cloud-native
---
## 🏗️ Arquitetura do Sistema
```mermaid
graph TB
subgraph "Frontend Layer"
WEB[Website<br/>Fresh/Deno<br/>:8000]
MKT[Marketplace Frontend<br/>React/Vite<br/>:5173]
MAIN[SaveInMed Frontend<br/>Next.js 15<br/>:3000]
end
subgraph "Backend Layer"
BFF[SaveInMed BFF<br/>Python/FastAPI<br/>:8000]
API[Backend API<br/>Go 1.24<br/>:8080]
BACK[Backoffice<br/>NestJS/Fastify<br/>:3000]
end
subgraph "Data Layer"
PG[(PostgreSQL<br/>Database)]
AW[(Appwrite<br/>BaaS)]
end
subgraph "External Services"
MP[Mercado Pago<br/>Payments]
MB[Mapbox<br/>Geocoding]
end
WEB -->|Landing Pages| BFF
MKT -->|Marketplace| API
MAIN -->|Main App| AW
MAIN -->|Admin| BACK
BFF --> AW
API --> PG
BACK --> PG
API --> MP
BFF --> MB
BACK --> MP
style WEB fill:#4ade80
style MKT fill:#60a5fa
style MAIN fill:#a78bfa
style BFF fill:#fbbf24
style API fill:#f87171
style BACK fill:#fb923c
style PG fill:#94a3b8
style AW fill:#94a3b8
```
---
## 📦 Componentes do Projeto
### 1. **backend** - API de Alta Performance (Go)
**Propósito**: Núcleo de performance para operações críticas
**Tecnologias**: Go 1.24, PostgreSQL, Swagger
**Porta**: 8080
**Principais Funcionalidades**:
- Gestão de empresas (farmácias, distribuidoras)
- Catálogo de produtos com lote e validade
- Processamento de pedidos
- Integração Mercado Pago com split de pagamento
- Respostas JSON otimizadas com compressão gzip
**Documentação**: [backend/README.md](./backend/README.md)
**Como executar**:
```bash
cd backend
export DATABASE_URL=postgres://postgres:postgres@localhost:5432/saveinmed?sslmode=disable
go run ./cmd/api
```
---
### 2. **backoffice** - Sistema Administrativo (NestJS)
**Propósito**: Interface de gestão e administração
**Tecnologias**: NestJS 10, Fastify, Prisma, PostgreSQL
**Porta**: 3000
**Principais Funcionalidades**:
- Autenticação JWT (access + refresh tokens)
- Gestão de usuários e permissões
- Controle de inventário
- Processamento de webhooks Mercado Pago
- Dashboard administrativo
**Documentação**: [backoffice/README.md](./backoffice/README.md)
**Como executar**:
```bash
cd backoffice
pnpm install
pnpm prisma:generate
pnpm start:dev
```
---
### 3. **marketplace** - Frontend do Marketplace (React)
**Propósito**: Interface do marketplace B2B
**Tecnologias**: React 18, Vite 5, TailwindCSS, Zustand
**Porta**: 5173
**Principais Funcionalidades**:
- Catálogo de produtos com virtualização
- Carrinho de compras
- Checkout com Mercado Pago
- Dashboard de pedidos
- Autenticação e rotas protegidas
**Documentação**: [marketplace/README.md](./marketplace/README.md)
**Como executar**:
```bash
cd marketplace
npm install
npm run dev
```
---
### 4. **saveinmed-bff** - Backend For Frontend (Python)
**Propósito**: Agregação de dados e proxy para frontends
**Tecnologias**: Python 3.12, FastAPI, Appwrite
**Porta**: 8000
**Principais Funcionalidades**:
- Integração com Appwrite (Databases)
- Autenticação JWT com cookies httpOnly
- CRUD de categorias, produtos, pedidos
- Geocodificação automática (Mapbox)
- Cálculo de frete dinâmico
- API key protection
**Documentação**: [saveinmed-bff/README.md](./saveinmed-bff/README.md)
**Como executar**:
```bash
cd saveinmed-bff
pip install -r requirements.txt
uvicorn src.main:app --reload
```
---
### 5. **saveinmed-frontend** - Frontend Principal (Next.js)
**Propósito**: Aplicação frontend completa e principal
**Tecnologias**: Next.js 15, React 19, TailwindCSS 4, Appwrite
**Porta**: 3000
**Principais Funcionalidades**:
- Interface completa para farmácias e distribuidoras
- Gestão de catálogo de produtos
- Sistema de pedidos e pagamentos
- Dashboard com gráficos (Chart.js)
- Integração Appwrite para backend
- Checkout Mercado Pago
- Envio de emails (Nodemailer)
**Documentação**: [saveinmed-frontend/README.md](./saveinmed-frontend/README.md)
**Como executar**:
```bash
cd saveinmed-frontend
npm install
npm run dev
```
---
### 6. **website** - Site Institucional (Fresh/Deno)
**Propósito**: Landing pages e marketing
**Tecnologias**: Fresh v2, Deno 2, Preact, TailwindCSS
**Porta**: 8000
**Principais Funcionalidades**:
- Landing pages institucionais
- Captura de leads
- Blog e conteúdo educacional
- SEO otimizado
- Islands Architecture (hidratação parcial)
**Documentação**: [website/README.md](./website/README.md)
**Como executar**:
```bash
cd website
deno task dev
```
---
## 🛠️ Tecnologias Utilizadas
### Backend
| Componente | Linguagem | Framework | Banco de Dados |
|------------|-----------|-----------|----------------|
| **backend** | Go 1.24 | - | PostgreSQL |
| **backoffice** | TypeScript | NestJS 10 + Fastify | PostgreSQL (Prisma) |
| **saveinmed-bff** | Python 3.12 | FastAPI | Appwrite |
### Frontend
| Componente | Framework | Versão | Estilização |
|------------|-----------|--------|-------------|
| **marketplace** | React + Vite | 18 + 5 | TailwindCSS 3 |
| **saveinmed-frontend** | Next.js | 15 | TailwindCSS 4 |
| **website** | Fresh (Deno) | v2 | TailwindCSS |
### Infraestrutura e Serviços
- **Banco de Dados**: PostgreSQL 14+
- **BaaS**: Appwrite 18
- **Pagamentos**: Mercado Pago SDK
- **Geocoding**: Mapbox API
- **Email**: Nodemailer
- **Containerização**: Docker
- **Documentação**: Swagger/OpenAPI
---
## 🚀 Setup Completo
### Pré-requisitos
- **Go** 1.24+
- **Node.js** 20+
- **Python** 3.12+
- **Deno** 2.0+
- **PostgreSQL** 14+
- **pnpm** 8+ (para backoffice)
- **Docker** (opcional)
### 1. Clonar o Repositório
```bash
git clone https://github.com/rede5/saveinmed.git
cd saveinmed
```
### 2. Configurar Banco de Dados
```bash
# Criar banco de dados PostgreSQL
createdb saveinmed
# Ou via Docker
docker run --name saveinmed-postgres \
-e POSTGRES_PASSWORD=postgres \
-e POSTGRES_DB=saveinmed \
-p 5432:5432 \
-d postgres:14
```
### 3. Configurar Variáveis de Ambiente
Cada componente possui um arquivo `.env.example`. Copie e configure:
```bash
# Backend Go
cd backend
cp .env.example .env
# Edite .env com suas configurações
# Backoffice NestJS
cd ../backoffice
cp .env.example .env
# Edite .env com suas configurações
# E assim por diante para cada componente...
```
### 4. Instalar Dependências
```bash
# Backend Go
cd backend
go mod download
# Backoffice NestJS
cd ../backoffice
pnpm install
pnpm prisma:generate
pnpm prisma migrate dev
# Marketplace React
cd ../marketplace
npm install
# SaveInMed BFF Python
cd ../saveinmed-bff
python -m venv venv
source venv/bin/activate # ou `venv\Scripts\activate` no Windows
pip install -r requirements.txt
# SaveInMed Frontend Next.js
cd ../saveinmed-frontend
npm install
# Website Fresh/Deno
cd ../website
# Deno não requer instalação de dependências
```
### 5. Executar Todos os Serviços
**Opção 1: Manualmente (em terminais separados)**
```bash
# Terminal 1 - Backend Go
cd backend && go run ./cmd/api
# Terminal 2 - Backoffice NestJS
cd backoffice && pnpm start:dev
# Terminal 3 - Marketplace React
cd marketplace && npm run dev
# Terminal 4 - SaveInMed BFF
cd saveinmed-bff && uvicorn src.main:app --reload
# Terminal 5 - SaveInMed Frontend
cd saveinmed-frontend && npm run dev
# Terminal 6 - Website
cd website && deno task dev
```
**Opção 2: Docker Compose (em desenvolvimento)**
```bash
docker-compose up
```
### 6. Acessar as Aplicações
| Serviço | URL | Descrição |
|---------|-----|-----------|
| Backend API | http://localhost:8080 | API Go |
| Backend Swagger | http://localhost:8080/swagger/index.html | Docs API Go |
| Backoffice | http://localhost:3000 | Admin NestJS |
| Backoffice Swagger | http://localhost:3000/api | Docs NestJS |
| Marketplace | http://localhost:5173 | Frontend React |
| SaveInMed BFF | http://localhost:8000 | BFF Python |
| SaveInMed BFF Docs | http://localhost:8000/docs | Docs FastAPI |
| SaveInMed Frontend | http://localhost:3000 | Frontend Next.js |
| Website | http://localhost:8000 | Site Fresh/Deno |
---
## 💻 Fluxo de Desenvolvimento
### 1. Criar Nova Feature
```bash
# Criar branch
git checkout -b feature/nome-da-feature
# Desenvolver...
# Testar...
# Commit
git add .
git commit -m "feat: adiciona nova funcionalidade X"
# Push
git push origin feature/nome-da-feature
# Criar Pull Request no GitHub
```
### 2. Padrões de Commit
Seguimos [Conventional Commits](https://www.conventionalcommits.org/):
- `feat:` - Nova funcionalidade
- `fix:` - Correção de bug
- `docs:` - Documentação
- `style:` - Formatação
- `refactor:` - Refatoração
- `test:` - Testes
- `chore:` - Tarefas de build/config
### 3. Testes
```bash
# Backend Go
cd backend && go test ./...
# Backoffice NestJS
cd backoffice && pnpm test
# SaveInMed BFF Python
cd saveinmed-bff && pytest
# Frontend Next.js
cd saveinmed-frontend && npm test
```
### 4. Linting
```bash
# Backend Go
cd backend && golangci-lint run
# Backoffice NestJS
cd backoffice && pnpm lint
# Marketplace React
cd marketplace && npm run lint
# Frontend Next.js
cd saveinmed-frontend && npm run lint
```
---
## 🚢 Deploy
### Backend (Go)
```bash
# Build
cd backend
go build -o bin/api ./cmd/api
# Docker
docker build -t saveinmed-api:latest .
docker push registry.example.com/saveinmed-api:latest
```
### Backoffice (NestJS)
```bash
# Build
cd backoffice
pnpm build
# Docker
docker build -t saveinmed-backoffice:latest .
docker push registry.example.com/saveinmed-backoffice:latest
```
### Marketplace (React)
```bash
# Build
cd marketplace
npm run build
# Deploy para Vercel/Netlify
vercel --prod
```
### SaveInMed BFF (Python)
```bash
# Docker
cd saveinmed-bff
docker build -t saveinmed-bff:latest .
docker push registry.example.com/saveinmed-bff:latest
```
### SaveInMed Frontend (Next.js)
```bash
# Build
cd saveinmed-frontend
npm run build
# Deploy para Vercel
vercel --prod
```
### Website (Fresh/Deno)
```bash
# Deploy para Deno Deploy
cd website
deployctl deploy --project=saveinmed-website
```
---
## 🤝 Contribuindo
1. Fork o projeto
2. Crie uma branch para sua feature (`git checkout -b feature/AmazingFeature`)
3. Commit suas mudanças (`git commit -m 'feat: Add some AmazingFeature'`)
4. Push para a branch (`git push origin feature/AmazingFeature`)
5. Abra um Pull Request
### Diretrizes
- Escreva testes para novas funcionalidades
- Mantenha a documentação atualizada
- Siga os padrões de código de cada linguagem
- Use Conventional Commits
- Revise seu próprio código antes de submeter PR
---
## 📄 Licença
Este projeto está licenciado sob a Licença MIT - veja o arquivo [LICENSE](LICENSE) para detalhes.
---
## 📞 Contato
**SaveInMed Team**
- Website: https://saveinmed.com
- Email: contato@saveinmed.com
- GitHub: https://github.com/rede5/saveinmed
---
## 🙏 Agradecimentos
- Equipe de desenvolvimento
- Contribuidores open source
- Comunidades Go, NestJS, React, Python, e Deno
---
**Desenvolvido com ❤️ pela equipe SaveInMed**

View file

@ -1 +0,0 @@
/bin

View file

@ -1,27 +0,0 @@
# SaveInMed Performance Core (Go)
Backend em Go 1.24 focado em alta performance para o marketplace farmacêutico B2B.
## Funcionalidades
- Gestão de empresas com separação de papéis (farmácia, distribuidora, administrador).
- Catálogo de produtos com lote e validade obrigatórios.
- Pedidos com ciclo Pendente → Pago → Faturado → Entregue.
- Geração de preferência de pagamento Mercado Pago com split e retenção de comissão.
- Respostas JSON com `json-iterator` e compressão gzip.
- Swagger disponível em `/swagger/index.html`.
## Execução local
```bash
export DATABASE_URL=postgres://postgres:postgres@localhost:5432/saveinmed?sslmode=disable
cd backend-go
# gerar swagger (já versionado)
./bin/swag init --dir ./cmd/api,./internal/http/handler,./internal/domain --output ./docs --parseDependency --parseInternal
# executar API
go run ./cmd/api
```
## Docker
```bash
docker build -t saveinmed-performance-core:dev .
docker run -p 8080:8080 -e DATABASE_URL=postgres://... saveinmed-performance-core:dev
```

View file

@ -1,6 +0,0 @@
node_modules
.env
coverage
dist
.DS_Store
.prisma

47
backend/.gitignore vendored Normal file
View file

@ -0,0 +1,47 @@
# Binaries for programs and plugins
*.exe
*.exe~
*.dll
*.so
*.dylib
*.db
# Test binary, built with `go test -c`
*.test
# Output of the go coverage tool
*.out
coverage.txt
coverage.html
# Go workspace file
go.work
# Dependency directories
vendor/
# Build output
/bin
dist/
*.o
*.a
# Environment variables
.env
.env.local
# Logs
*.log
# Swagger generated files (if regenerating)
# docs/
# IDE
.vscode/
.idea/
*.swp
*.swo
# OS
.DS_Store
Thumbs.db

160
backend/README.md Normal file
View file

@ -0,0 +1,160 @@
# SaveInMed API (Backend Go)
API de alta performance em Go 1.24 para o marketplace farmacêutico B2B SaveInMed.
## 🎯 Propósito
Este é o núcleo de performance do SaveInMed, responsável por operações críticas que exigem alta velocidade e eficiência, incluindo:
- Gestão de empresas (farmácias, distribuidoras, administradores)
- Catálogo de produtos com controle de lote e validade
- Processamento de pedidos
- Integração com Mercado Pago para pagamentos
## 🚀 Tecnologias
- **Go 1.24.3** - Linguagem de programação
- **PostgreSQL** - Banco de dados (via pgx/v5)
- **json-iterator** - Serialização JSON de alta performance
- **Swagger** - Documentação automática da API
- **Gzip** - Compressão de respostas
## 📋 Funcionalidades
### Gestão de Empresas
- Separação de papéis: farmácia, distribuidora, administrador
- CRUD completo de empresas
- Validação de CNPJ
### Catálogo de Produtos
- Produtos com lote e validade obrigatórios
- Categorização e subcategorização
- Controle de estoque
### Pedidos
- Ciclo completo: Pendente → Pago → Faturado → Entregue
- Rastreamento de status
- Histórico de transações
### Pagamentos
- Geração de preferência de pagamento Mercado Pago
- Split de pagamento automático
- Retenção de comissão da plataforma
## 🏗️ Arquitetura
```
backend/
├── cmd/
│ └── api/
│ └── main.go # Entry point da aplicação
├── internal/
│ ├── config/ # Configurações
│ ├── domain/ # Modelos de domínio
│ ├── http/
│ │ ├── handler/ # Handlers HTTP
│ │ └── middleware/ # Middlewares (logging, compress)
│ ├── payments/ # Integração Mercado Pago
│ ├── repository/
│ │ └── postgres/ # Repositório PostgreSQL
│ ├── server/ # Configuração do servidor
│ └── usecase/ # Casos de uso / lógica de negócio
├── docs/ # Documentação Swagger
├── Dockerfile
└── README.md
```
## 🔧 Configuração
### Variáveis de Ambiente
```bash
DATABASE_URL=postgres://user:password@localhost:5432/saveinmed?sslmode=disable
PORT=8080
```
### Pré-requisitos
- Go 1.24 ou superior
- PostgreSQL 14+
- Swag CLI (para regenerar documentação)
## 🏃 Execução Local
```bash
# Configurar variável de ambiente
export DATABASE_URL=postgres://postgres:postgres@localhost:5432/saveinmed?sslmode=disable
# Instalar dependências
go mod download
# Executar API
go run ./cmd/api
# API estará disponível em http://localhost:8080
# Swagger UI em http://localhost:8080/swagger/index.html
```
## 🐳 Docker
```bash
# Build da imagem
docker build -t saveinmed-api:latest .
# Executar container
docker run -p 8080:8080 \
-e DATABASE_URL=postgres://user:password@host:5432/saveinmed \
saveinmed-api:latest
```
## 📚 Documentação da API
A documentação completa da API está disponível via Swagger UI:
```
http://localhost:8080/swagger/index.html
```
### Regenerar Swagger
```bash
# Instalar swag
go install github.com/swaggo/swag/cmd/swag@latest
# Gerar documentação
swag init --dir ./cmd/api,./internal/http/handler,./internal/domain \
--output ./docs \
--parseDependency \
--parseInternal
```
## 🧪 Testes
```bash
# Executar todos os testes
go test ./...
# Executar testes com coverage
go test -cover ./...
# Gerar relatório de coverage
go test -coverprofile=coverage.out ./...
go tool cover -html=coverage.out
```
## 📊 Performance
Esta API foi otimizada para alta performance:
- **json-iterator**: ~2-3x mais rápido que encoding/json padrão
- **Compressão gzip**: Reduz tamanho das respostas em ~70%
- **Connection pooling**: Gerenciamento eficiente de conexões com PostgreSQL
- **Prepared statements**: Queries otimizadas e protegidas contra SQL injection
## 🔗 Integração com Outros Componentes
- **Backoffice (NestJS)**: Compartilha o mesmo banco de dados PostgreSQL
- **Marketplace Frontend**: Consome esta API para operações críticas
- **SaveInMed BFF**: Pode fazer proxy para endpoints específicos desta API
## 📝 Licença
MIT

44
backoffice/.gitignore vendored Normal file
View file

@ -0,0 +1,44 @@
# Dependencies
node_modules/
.pnp
.pnp.js
# Build output
dist/
build/
*.tsbuildinfo
# Environment variables
.env
.env.local
.env.*.local
# Logs
logs/
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Testing
coverage/
.nyc_output/
# Prisma
.prisma/
prisma/migrations/**/migration.sql.bak
# IDE
.vscode/
.idea/
*.swp
*.swo
# OS
.DS_Store
Thumbs.db
# Temporary files
*.tmp
.cache/

240
backoffice/README.md Normal file
View file

@ -0,0 +1,240 @@
# SaveInMed Backoffice
Sistema de gestão administrativa (backoffice) do SaveInMed, desenvolvido com NestJS e Fastify.
## 🎯 Propósito
O Backoffice é a interface de administração e gestão do SaveInMed, fornecendo ferramentas para:
- Gerenciamento de usuários e autenticação
- Controle de inventário e estoque
- Administração de empresas cadastradas
- Processamento de webhooks de pagamento
- Relatórios e analytics
## 🚀 Tecnologias
- **NestJS 10** - Framework backend progressivo para Node.js
- **Fastify 4** - Web framework de alta performance
- **Prisma 5** - ORM moderno para TypeScript
- **PostgreSQL** - Banco de dados relacional
- **JWT** - Autenticação via JSON Web Tokens
- **Bcrypt** - Hash seguro de senhas
- **Swagger** - Documentação automática da API
## 📋 Funcionalidades
### Autenticação e Autorização
- Login com JWT (access + refresh tokens)
- Proteção de rotas com guards
- Estratégias de autenticação Passport
- Refresh token rotation
### Gestão de Usuários
- CRUD completo de usuários
- Perfis e permissões
- Validação de dados com class-validator
### Inventário
- Controle de produtos e estoque
- Registro de compras
- Movimentação de produtos
- Relatórios de inventário
### Webhooks
- Processamento de notificações do Mercado Pago
- Atualização automática de status de pedidos
- Logs de eventos
## 🏗️ Arquitetura
```
backoffice/
├── prisma/
│ └── schema.prisma # Schema do banco de dados
├── src/
│ ├── auth/ # Módulo de autenticação
│ │ ├── guards/ # Guards JWT e Refresh Token
│ │ ├── strategies/ # Estratégias Passport
│ │ └── dto/ # DTOs de login
│ ├── users/ # Módulo de usuários
│ │ ├── users.controller.ts
│ │ ├── users.service.ts
│ │ └── dto/
│ ├── inventory/ # Módulo de inventário
│ │ ├── inventory.controller.ts
│ │ ├── inventory.service.ts
│ │ └── dto/
│ ├── webhooks/ # Módulo de webhooks
│ │ ├── webhooks.controller.ts
│ │ └── webhooks.module.ts
│ ├── common/ # Recursos compartilhados
│ │ └── guards/
│ ├── prisma/ # Módulo Prisma
│ │ ├── prisma.module.ts
│ │ └── prisma.service.ts
│ ├── app.module.ts # Módulo raiz
│ └── main.ts # Entry point
├── Dockerfile
├── nest-cli.json
├── package.json
└── README.md
```
## 🔧 Configuração
### Variáveis de Ambiente
Crie um arquivo `.env` na raiz do projeto:
```bash
# Database
DATABASE_URL="postgresql://user:password@localhost:5432/saveinmed?schema=public"
# JWT
JWT_SECRET="your-secret-key-here"
JWT_REFRESH_SECRET="your-refresh-secret-key-here"
JWT_EXPIRES_IN="15m"
JWT_REFRESH_EXPIRES_IN="7d"
# Server
PORT=3000
NODE_ENV=development
```
### Pré-requisitos
- Node.js 20+
- pnpm 8+ (gerenciador de pacotes)
- PostgreSQL 14+
## 🏃 Execução Local
```bash
# Instalar dependências
pnpm install
# Gerar Prisma Client
pnpm prisma:generate
# Executar migrations
pnpm prisma migrate dev
# Modo desenvolvimento
pnpm start:dev
# Modo debug
pnpm start:debug
# API estará disponível em http://localhost:3000
# Swagger UI em http://localhost:3000/api
```
## 🏗️ Build e Produção
```bash
# Build
pnpm build
# Executar em produção
pnpm start
# Ou com PM2
pm2 start dist/main.js --name saveinmed-backoffice
```
## 🐳 Docker
```bash
# Build da imagem
docker build -t saveinmed-backoffice:latest .
# Executar container
docker run -p 3000:3000 \
-e DATABASE_URL="postgresql://..." \
-e JWT_SECRET="..." \
saveinmed-backoffice:latest
```
## 📚 Documentação da API
A documentação completa da API está disponível via Swagger UI:
```
http://localhost:3000/api
```
### Principais Endpoints
#### Autenticação
- `POST /auth/login` - Login de usuário
- `POST /auth/refresh` - Renovar access token
- `GET /auth/me` - Obter usuário autenticado
#### Usuários
- `GET /users` - Listar usuários
- `POST /users` - Criar usuário
- `GET /users/:id` - Obter usuário por ID
- `PATCH /users/:id` - Atualizar usuário
- `DELETE /users/:id` - Deletar usuário
#### Inventário
- `GET /inventory` - Listar itens do inventário
- `POST /inventory/purchase` - Registrar compra
- `GET /inventory/:id` - Obter item por ID
#### Webhooks
- `POST /webhooks/mercadopago` - Webhook do Mercado Pago
## 🗄️ Prisma
### Migrations
```bash
# Criar nova migration
pnpm prisma migrate dev --name nome_da_migration
# Aplicar migrations em produção
pnpm prisma migrate deploy
# Resetar banco de dados (desenvolvimento)
pnpm prisma migrate reset
```
### Prisma Studio
```bash
# Abrir interface visual do banco de dados
pnpm prisma studio
```
## 🧪 Testes
```bash
# Testes unitários
pnpm test
# Testes e2e
pnpm test:e2e
# Coverage
pnpm test:cov
```
## 🔒 Segurança
- Senhas hasheadas com bcrypt (salt rounds: 10)
- JWT com expiração curta (15 minutos)
- Refresh tokens com rotação automática
- Validação de entrada com class-validator
- Guards para proteção de rotas
- CORS configurado adequadamente
## 🔗 Integração com Outros Componentes
- **Backend (Go API)**: Compartilha o mesmo banco de dados PostgreSQL
- **SaveInMed Frontend**: Consome esta API para operações administrativas
- **Mercado Pago**: Recebe webhooks de notificação de pagamento
## 📝 Licença
MIT

View file

@ -1,5 +0,0 @@
node_modules
.dist
dist
.env*
*.tsbuildinfo

51
marketplace/.gitignore vendored Normal file
View file

@ -0,0 +1,51 @@
# Dependencies
node_modules/
.pnp
.pnp.js
# Build output
dist/
.dist/
dist-ssr/
build/
*.local
# Environment variables
.env
.env*
.env.local
.env.development.local
.env.test.local
.env.production.local
# Logs
logs/
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Testing
coverage/
# Vite
.vite/
# TypeScript
*.tsbuildinfo
# Editor directories and files
.vscode/
.idea/
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.swp
*.swo
# OS
.DS_Store
Thumbs.db

297
marketplace/README.md Normal file
View file

@ -0,0 +1,297 @@
# SaveInMed Marketplace Frontend
Interface do usuário do marketplace B2B farmacêutico SaveInMed, desenvolvida com React e Vite.
## 🎯 Propósito
Este é o frontend do marketplace SaveInMed, onde farmácias e distribuidoras podem:
- Navegar e pesquisar produtos farmacêuticos
- Adicionar produtos ao carrinho
- Realizar pedidos e checkout
- Gerenciar perfil e histórico de compras
- Acompanhar status de pedidos
- Processar pagamentos via Mercado Pago
## 🚀 Tecnologias
- **React 18** - Biblioteca UI
- **TypeScript** - Tipagem estática
- **Vite 5** - Build tool e dev server ultra-rápido
- **React Router DOM 6** - Roteamento
- **TailwindCSS 3** - Framework CSS utility-first
- **Zustand 4** - Gerenciamento de estado
- **Axios** - Cliente HTTP
- **Mercado Pago SDK React** - Integração de pagamentos
- **React Window** - Virtualização de listas para performance
## 📋 Funcionalidades
### Catálogo de Produtos
- Listagem de produtos com virtualização
- Busca e filtros avançados
- Detalhes de produtos
- Informações de lote e validade
### Carrinho de Compras
- Adicionar/remover produtos
- Atualizar quantidades
- Persistência local com Zustand
- Cálculo automático de totais
### Checkout e Pagamentos
- Fluxo de checkout simplificado
- Integração com Mercado Pago
- Múltiplas formas de pagamento
- Confirmação de pedido
### Autenticação
- Login de usuários
- Rotas protegidas
- Contexto de autenticação
- Persistência de sessão
### Dashboard
- Visão geral de pedidos
- Histórico de compras
- Estatísticas de uso
### Perfil
- Gerenciamento de dados pessoais
- Endereços de entrega
- Preferências
## 🏗️ Arquitetura
```
marketplace/
├── src/
│ ├── components/
│ │ └── ProtectedRoute.tsx # Componente de rota protegida
│ ├── context/
│ │ └── AuthContext.tsx # Contexto de autenticação
│ ├── hooks/
│ │ └── usePersistentFilters.ts # Hook para filtros persistentes
│ ├── layouts/
│ │ └── Shell.tsx # Layout principal
│ ├── pages/
│ │ ├── Cart.tsx # Página do carrinho
│ │ ├── Checkout.tsx # Página de checkout
│ │ ├── Dashboard.tsx # Dashboard do usuário
│ │ ├── Login.tsx # Página de login
│ │ └── Profile.tsx # Página de perfil
│ ├── services/
│ │ └── apiClient.ts # Cliente API configurado
│ ├── stores/
│ │ └── cartStore.ts # Store Zustand do carrinho
│ ├── types/
│ │ └── product.ts # Tipos TypeScript
│ ├── App.tsx # Componente raiz
│ ├── main.tsx # Entry point
│ └── index.css # Estilos globais
├── index.html
├── vite.config.ts
├── tailwind.config.ts
├── tsconfig.json
└── README.md
```
## 🔧 Configuração
### Variáveis de Ambiente
Crie um arquivo `.env` na raiz do projeto:
```bash
# API Backend
VITE_API_URL=http://localhost:8080
# Mercado Pago
VITE_MERCADOPAGO_PUBLIC_KEY=your-public-key-here
# Ambiente
VITE_ENV=development
```
### Pré-requisitos
- Node.js 20+
- npm ou yarn
## 🏃 Execução Local
```bash
# Instalar dependências
npm install
# Modo desenvolvimento
npm run dev
# Aplicação estará disponível em http://localhost:5173
```
## 🏗️ Build e Produção
```bash
# Build para produção
npm run build
# Preview do build
npm run preview
# Arquivos de produção estarão em ./dist
```
## 🎨 Estilização
O projeto utiliza TailwindCSS para estilização. Principais recursos:
- **Utility-first**: Classes utilitárias para estilização rápida
- **Responsivo**: Design mobile-first
- **Dark mode**: Suporte a tema escuro (se implementado)
- **Customização**: Configuração em `tailwind.config.ts`
### Exemplo de Componente
```tsx
export function ProductCard({ product }: { product: Product }) {
return (
<div className="bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow">
<h3 className="text-lg font-semibold text-gray-900">{product.name}</h3>
<p className="text-gray-600 mt-2">{product.description}</p>
<div className="mt-4 flex justify-between items-center">
<span className="text-xl font-bold text-green-600">
R$ {product.price.toFixed(2)}
</span>
<button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
Adicionar
</button>
</div>
</div>
);
}
```
## 🔐 Autenticação
O sistema de autenticação utiliza Context API:
```tsx
import { useAuth } from './context/AuthContext';
function MyComponent() {
const { user, login, logout } = useAuth();
return (
<div>
{user ? (
<button onClick={logout}>Sair</button>
) : (
<button onClick={() => login(email, password)}>Entrar</button>
)}
</div>
);
}
```
## 🛒 Gerenciamento de Estado (Zustand)
O carrinho de compras é gerenciado com Zustand:
```tsx
import { useCartStore } from './stores/cartStore';
function ProductPage() {
const addItem = useCartStore(state => state.addItem);
return (
<button onClick={() => addItem(product)}>
Adicionar ao Carrinho
</button>
);
}
```
## 🧪 Testes
```bash
# Executar testes (quando configurados)
npm test
# Coverage
npm run test:coverage
```
## 📱 Responsividade
O marketplace é totalmente responsivo, com breakpoints:
- **Mobile**: < 640px
- **Tablet**: 640px - 1024px
- **Desktop**: > 1024px
## ⚡ Performance
Otimizações implementadas:
- **Virtualização de listas**: React Window para listas longas
- **Code splitting**: Lazy loading de rotas
- **Vite**: Build ultra-rápido
- **Zustand**: State management leve e performático
- **Memoização**: React.memo e useMemo onde apropriado
## 🔗 Integração com APIs
### Backend Go API
```typescript
import apiClient from './services/apiClient';
// Buscar produtos
const products = await apiClient.get('/api/v1/products');
// Criar pedido
const order = await apiClient.post('/api/v1/orders', orderData);
```
### Mercado Pago
```tsx
import { initMercadoPago, Wallet } from '@mercadopago/sdk-react';
initMercadoPago(import.meta.env.VITE_MERCADOPAGO_PUBLIC_KEY);
function CheckoutButton({ preferenceId }: { preferenceId: string }) {
return <Wallet initialization={{ preferenceId }} />;
}
```
## 🚀 Deploy
### Vercel
```bash
npm install -g vercel
vercel
```
### Netlify
```bash
npm run build
# Fazer upload da pasta dist/
```
### Docker
```bash
# Build
docker build -t saveinmed-marketplace:latest .
# Run
docker run -p 80:80 saveinmed-marketplace:latest
```
## 🔗 Integração com Outros Componentes
- **Backend (Go API)**: Consome endpoints de produtos, pedidos e pagamentos
- **Backoffice (NestJS)**: Consome endpoints administrativos
- **SaveInMed BFF**: Pode usar como proxy para múltiplas APIs
## 📝 Licença
MIT

View file

@ -1,7 +1,66 @@
# Byte-compiled / optimized / DLL files
__pycache__/ __pycache__/
*.py[cod]
*$py.class
*.so
# Distribution / packaging
.Python
build/
develop-eggs/
dist/
downloads/
eggs/
.eggs/
lib/
lib64/
parts/
sdist/
var/
wheels/
*.egg-info/
.installed.cfg
*.egg
# Virtual environments
.venv/ .venv/
*.pyc venv/
.pytest_cache/ env/
.mypy_cache/ ENV/
.DS_Store env.bak/
venv.bak/
# Environment variables
.env .env
.env.local
.env.*.local
# Testing
.pytest_cache/
.coverage
htmlcov/
.tox/
.nox/
# Logs
*.log
logs/
# IDE
.vscode/
.idea/
*.swp
*.swo
.pytype/
# OS
.DS_Store
Thumbs.db
# MyPy
.mypy_cache/
.dmypy.json
dmypy.json
# Pyre
.pyre/

View file

@ -1,7 +1,8 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies # Dependencies
/node_modules /node_modules
node_modules/
/.pnp /.pnp
.pnp.* .pnp.*
.yarn/* .yarn/*
@ -10,33 +11,55 @@
!.yarn/releases !.yarn/releases
!.yarn/versions !.yarn/versions
# testing # Testing
/coverage /coverage
coverage/
# next.js # Next.js
/.next/ /.next/
/out/ /out/
.next/
next-env.d.ts
# production # Production
/build /build
build/
# misc # Environment variables
.DS_Store .env
*.pem .env*
.env*.local
.env.development.local
.env.test.local
.env.production.local
!*.example
# debug # Logs
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
.pnpm-debug.log* .pnpm-debug.log*
pnpm-debug.log*
*.log
logs/
# env files (can opt-in for committing if needed) # Vercel
.env*
!*.example
# vercel
.vercel .vercel
# typescript # TypeScript
*.tsbuildinfo *.tsbuildinfo
next-env.d.ts
# IDE
.vscode/
.idea/
*.swp
*.swo
# OS
.DS_Store
*.pem
Thumbs.db
# Temporary files
*.tmp
.cache/

View file

@ -0,0 +1,372 @@
# SaveInMed Frontend
Frontend principal da plataforma SaveInMed, desenvolvido com Next.js 15 e React 19.
## 🎯 Propósito
Este é o frontend principal e mais completo do SaveInMed, oferecendo:
- Interface completa para farmácias e distribuidoras
- Gestão de catálogo de produtos
- Sistema de pedidos e pagamentos
- Dashboard administrativo
- Integração com Appwrite para backend
- Checkout com Mercado Pago
- Sistema de notificações em tempo real
## 🚀 Tecnologias
- **Next.js 15.3** - Framework React com SSR e SSG
- **React 19** - Biblioteca UI mais recente
- **TypeScript 5** - Tipagem estática
- **TailwindCSS 4** - Framework CSS utility-first (última versão)
- **Appwrite 18** - Backend as a Service
- **Axios** - Cliente HTTP
- **Mercado Pago SDK React** - Integração de pagamentos
- **Chart.js** - Gráficos e visualizações
- **Lucide React** - Ícones modernos
- **React Hot Toast** - Notificações toast
- **Nodemailer** - Envio de emails
## 📋 Funcionalidades
### Autenticação e Autorização
- Login e registro com Appwrite
- Autenticação via email
- Proteção de rotas
- Sessões persistentes
- Recuperação de senha
### Gestão de Produtos
- Catálogo completo de produtos
- Busca e filtros avançados
- Categorias e subcategorias
- Informações de laboratórios
- Controle de lote e validade
- Upload de imagens
### Pedidos e Vendas
- Carrinho de compras
- Checkout integrado
- Processamento de pagamentos
- Acompanhamento de pedidos
- Histórico de compras
- Notas fiscais
### Dashboard
- Visão geral de vendas
- Gráficos e métricas
- Relatórios personalizados
- Analytics em tempo real
### Gestão de Empresas
- Cadastro de empresas
- Dados da Receita Federal (integração)
- Endereços e contatos
- Configurações de frete
- Geocodificação automática
### Notificações
- Toast notifications
- Emails transacionais
- Alertas de estoque
- Confirmações de pedido
## 🏗️ Arquitetura
```
saveinmed-frontend/
├── src/
│ ├── app/ # App Router (Next.js 15)
│ │ ├── (auth)/ # Grupo de rotas de autenticação
│ │ ├── (dashboard)/ # Grupo de rotas do dashboard
│ │ ├── api/ # API Routes
│ │ ├── layout.tsx # Layout raiz
│ │ └── page.tsx # Página inicial
│ ├── components/ # Componentes reutilizáveis
│ │ ├── ui/ # Componentes de UI base
│ │ ├── forms/ # Formulários
│ │ └── charts/ # Gráficos
│ ├── lib/ # Bibliotecas e utilitários
│ │ ├── appwrite.ts # Cliente Appwrite
│ │ ├── api.ts # Cliente API
│ │ └── utils.ts # Funções utilitárias
│ ├── hooks/ # Custom hooks
│ ├── types/ # Tipos TypeScript
│ ├── styles/ # Estilos globais
│ └── config/ # Configurações
├── public/ # Arquivos estáticos
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
└── README.md
```
## 🔧 Configuração
### Variáveis de Ambiente
Crie um arquivo `.env.local` na raiz do projeto:
```bash
# Appwrite
NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
NEXT_PUBLIC_APPWRITE_PROJECT_ID=your-project-id
NEXT_PUBLIC_APPWRITE_DATABASE_ID=your-database-id
# Collections IDs
NEXT_PUBLIC_APPWRITE_COLLECTION_PRODUTOS_CATALOGO_ID=produtos-catalogo
NEXT_PUBLIC_APPWRITE_COLLECTION_LABORATORIOS_ID=laboratorios
NEXT_PUBLIC_APPWRITE_COLLECTION_CATEGORIAS_ID=categorias
NEXT_PUBLIC_APPWRITE_COLLECTION_SUBCATEGORIAS_ID=subcategorias
NEXT_PUBLIC_APPWRITE_COLLECTION_CARRINHOS_ID=carrinhos
NEXT_PUBLIC_APPWRITE_COLLECTION_PEDIDOS_ID=pedidos
NEXT_PUBLIC_APPWRITE_COLLECTION_USUARIOS_ID=usuarios
NEXT_PUBLIC_APPWRITE_COLLECTION_EMPRESAS_ID=empresas
NEXT_PUBLIC_APPWRITE_COLLECTION_EMPRESAS_DADOS_ID=empresas-dados
NEXT_PUBLIC_APPWRITE_COLLECTION_ENDERECOS_ID=enderecos
# Mercado Pago
NEXT_PUBLIC_MERCADOPAGO_PUBLIC_KEY=your-public-key
MERCADOPAGO_ACCESS_TOKEN=your-access-token
# Email (Nodemailer)
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your-email@gmail.com
EMAIL_PASSWORD=your-app-password
# Mapbox (para geocodificação)
MAPBOX_ACCESS_TOKEN=your-mapbox-token
# App
NEXT_PUBLIC_APP_URL=http://localhost:3000
```
### Pré-requisitos
- Node.js 20+
- npm, yarn ou pnpm
- Conta Appwrite configurada
- Conta Mercado Pago (para pagamentos)
## 🏃 Execução Local
```bash
# Instalar dependências
npm install
# Modo desenvolvimento com Turbopack
npm run dev
# Aplicação estará disponível em http://localhost:3000
```
## 🏗️ Build e Produção
```bash
# Build para produção
npm run build
# Executar build de produção
npm start
# Lint
npm run lint
```
## 🎨 Estilização com TailwindCSS 4
O projeto utiliza a versão mais recente do TailwindCSS com PostCSS:
```css
/* src/app/globals.css */
@import "tailwindcss";
@theme {
--color-primary: #3b82f6;
--color-secondary: #8b5cf6;
}
```
## 📱 Responsividade
Design totalmente responsivo com breakpoints customizados:
- **Mobile**: < 640px
- **Tablet**: 640px - 1024px
- **Desktop**: > 1024px
- **Wide**: > 1536px
## 🔐 Autenticação com Appwrite
```typescript
import { account } from '@/lib/appwrite';
// Login
const session = await account.createEmailPasswordSession(email, password);
// Registro
const user = await account.create('unique()', email, password, name);
// Logout
await account.deleteSession('current');
// Obter usuário atual
const user = await account.get();
```
## 💾 Banco de Dados (Appwrite)
```typescript
import { databases } from '@/lib/appwrite';
// Listar documentos
const products = await databases.listDocuments(
databaseId,
collectionId,
[Query.limit(25)]
);
// Criar documento
const product = await databases.createDocument(
databaseId,
collectionId,
'unique()',
data
);
// Atualizar documento
await databases.updateDocument(databaseId, collectionId, documentId, data);
// Deletar documento
await databases.deleteDocument(databaseId, collectionId, documentId);
```
## 💳 Integração Mercado Pago
```typescript
import { initMercadoPago, Payment } from '@mercadopago/sdk-react';
initMercadoPago(process.env.NEXT_PUBLIC_MERCADOPAGO_PUBLIC_KEY!);
function CheckoutPage() {
return (
<Payment
initialization={{ amount: 100, preferenceId: 'xxx' }}
onSubmit={handlePayment}
/>
);
}
```
## 📊 Gráficos com Chart.js
```typescript
import { Line } from 'react-chartjs-2';
function SalesChart({ data }: { data: number[] }) {
return (
<Line
data={{
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Vendas',
data: data,
borderColor: 'rgb(75, 192, 192)',
}]
}}
/>
);
}
```
## 🧪 Testes
```bash
# Testes unitários (quando configurados)
npm test
# E2E tests (quando configurados)
npm run test:e2e
```
## ⚡ Performance
Otimizações implementadas:
- **Next.js 15**: App Router com React Server Components
- **Turbopack**: Dev server ultra-rápido
- **Image Optimization**: next/image para otimização automática
- **Font Optimization**: next/font para carregamento eficiente
- **Code Splitting**: Automático por rota
- **ISR**: Incremental Static Regeneration
- **Edge Runtime**: Para rotas que precisam de baixa latência
## 🚀 Deploy
### Vercel (Recomendado)
```bash
# Instalar Vercel CLI
npm i -g vercel
# Deploy
vercel
# Deploy para produção
vercel --prod
```
### Docker
```bash
# Build
docker build -t saveinmed-frontend:latest .
# Run
docker run -p 3000:3000 saveinmed-frontend:latest
```
### Outras Plataformas
- **Netlify**: Suporte completo para Next.js
- **AWS Amplify**: Deploy automático
- **Railway**: Deploy simplificado
## 📧 Envio de Emails
```typescript
import { sendEmail } from '@/lib/email';
await sendEmail({
to: 'customer@example.com',
subject: 'Pedido Confirmado',
html: '<h1>Seu pedido foi confirmado!</h1>',
});
```
## 🗺️ Geocodificação
```typescript
import { geocodeAddress } from '@/lib/mapbox';
const coordinates = await geocodeAddress('Rua Example, 123, São Paulo, SP');
// { latitude: -23.5505, longitude: -46.6333 }
```
## 🔗 Integração com Outros Componentes
- **Appwrite**: Backend principal para autenticação e dados
- **Backend (Go API)**: Operações de alta performance
- **Backoffice (NestJS)**: Funcionalidades administrativas
- **SaveInMed BFF**: Proxy e agregação de dados
- **Mercado Pago**: Processamento de pagamentos
## 📝 Documentação Adicional
Veja os arquivos de documentação na raiz do projeto:
- `CONFIGURACAO_COLLECTIONS_APPWRITE.md`
- `IMPLEMENTACAO_MERCADOPAGO_CHECKOUT.md`
- `MELHORIAS_GESTAO_CATALOGO_PRODUTOS.md`
- E outros...
## 📝 Licença
MIT

View file

@ -1,24 +1,416 @@
# Fresh project # SaveInMed Website
Your new Fresh project is ready to go. You can follow the Fresh "Getting Site institucional do SaveInMed, desenvolvido com Fresh (Deno framework).
Started" guide here: https://fresh.deno.dev/docs/getting-started
### Usage ## 🎯 Propósito
Make sure to install Deno: Este é o site institucional e de marketing do SaveInMed, responsável por:
https://docs.deno.com/runtime/getting_started/installation - Apresentar a plataforma para novos usuários
- Landing pages de produtos e serviços
- Captura de leads
- Informações sobre a empresa
- Blog e conteúdo educacional
- SEO otimizado para aquisição orgânica
Then start the project in development mode: ## 🚀 Tecnologias
- **Fresh v2** - Framework web moderno para Deno
- **Deno 2** - Runtime JavaScript/TypeScript seguro
- **Preact** - Biblioteca UI leve (3KB)
- **Tailwind CSS** - Framework CSS utility-first
- **Islands Architecture** - Hidratação parcial para performance máxima
## 📋 Funcionalidades
### Landing Pages
- Página inicial institucional
- Páginas de produtos
- Casos de uso
- Preços e planos
### Captura de Leads
- Formulários de contato
- Newsletter signup
- Demonstração agendada
- Download de materiais
### Conteúdo
- Blog posts
- Artigos educacionais
- FAQ
- Documentação pública
### SEO
- Meta tags otimizadas
- Open Graph
- Schema.org markup
- Sitemap XML
- robots.txt
## 🏗️ Arquitetura (Fresh Islands)
``` ```
website/
├── routes/ # Rotas baseadas em arquivo
│ ├── index.tsx # Página inicial
│ ├── about.tsx # Sobre nós
│ ├── contact.tsx # Contato
│ ├── blog/
│ │ ├── index.tsx # Lista de posts
│ │ └── [slug].tsx # Post individual
│ └── api/ # API routes
│ └── newsletter.ts # Endpoint de newsletter
├── islands/ # Componentes interativos (client-side)
│ ├── FlowTicker.tsx # Ticker animado
│ ├── LeadForm.tsx # Formulário de captura
│ └── ContactForm.tsx # Formulário de contato
├── components/ # Componentes estáticos (SSR)
│ ├── Header.tsx
│ ├── Footer.tsx
│ └── Hero.tsx
├── static/ # Arquivos estáticos
│ ├── styles.css
│ ├── logo.svg
│ └── images/
├── fresh.config.ts # Configuração do Fresh
├── deno.json # Configuração do Deno
└── README.md
```
## 🔧 Configuração
### Variáveis de Ambiente
Crie um arquivo `.env` na raiz do projeto:
```bash
# API Backend
API_URL=https://api.saveinmed.com
# Email (para formulários)
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=noreply@saveinmed.com
SMTP_PASSWORD=your-password
# Analytics
GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
# Ambiente
DENO_ENV=development
```
### Pré-requisitos
- Deno 2.0 ou superior
## 🏃 Execução Local
```bash
# Executar em modo desenvolvimento
deno task dev deno task dev
# Site estará disponível em http://localhost:8000
``` ```
This will watch the project directory and restart as necessary. ## 🏗️ Build e Produção
```bash
# Build para produção
deno task build
### Clone and deploy # Executar build de produção
deno task start
Deploy your own version of this example with a couple of clicks # Preview
deno task preview
```
[![Deploy on Deno](https://deno.com/button)](https://app.deno.com/new?clone=https://github.com/denoland/examples&path=with-fresh) ## 🎨 Islands Architecture
Fresh utiliza a arquitetura de "islands" para hidratação parcial:
### Componentes Estáticos (SSR)
Renderizados no servidor, sem JavaScript no cliente:
```tsx
// components/Hero.tsx
export function Hero() {
return (
<section class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
<h1 class="text-5xl font-bold">SaveInMed</h1>
<p class="text-xl mt-4">Marketplace B2B Farmacêutico</p>
</section>
);
}
```
### Islands (Interativos)
Componentes que precisam de JavaScript no cliente:
```tsx
// islands/LeadForm.tsx
import { useState } from "preact/hooks";
export default function LeadForm() {
const [email, setEmail] = useState("");
const handleSubmit = async (e: Event) => {
e.preventDefault();
await fetch("/api/newsletter", {
method: "POST",
body: JSON.stringify({ email }),
});
};
return (
<form onSubmit={handleSubmit}>
<input
type="email"
value={email}
onInput={(e) => setEmail(e.currentTarget.value)}
placeholder="Seu email"
/>
<button type="submit">Inscrever</button>
</form>
);
}
```
## 🛣️ Roteamento
Fresh usa roteamento baseado em arquivos:
```
routes/
├── index.tsx → /
├── about.tsx → /about
├── contact.tsx → /contact
├── blog/
│ ├── index.tsx → /blog
│ └── [slug].tsx → /blog/:slug
└── api/
└── newsletter.ts → /api/newsletter
```
## 📡 API Routes
```typescript
// routes/api/newsletter.ts
import { Handlers } from "$fresh/server.ts";
export const handler: Handlers = {
async POST(req) {
const { email } = await req.json();
// Salvar email no banco de dados
await saveToNewsletter(email);
return new Response(JSON.stringify({ success: true }), {
headers: { "Content-Type": "application/json" },
});
},
};
```
## 🎨 Estilização
O projeto usa Tailwind CSS com configuração customizada:
```typescript
// tailwind.config.ts
export default {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#8b5cf6',
},
},
},
};
```
## 🔍 SEO
### Meta Tags
```tsx
export default function BlogPost({ data }) {
return (
<>
<Head>
<title>{data.title} | SaveInMed Blog</title>
<meta name="description" content={data.excerpt} />
<meta property="og:title" content={data.title} />
<meta property="og:description" content={data.excerpt} />
<meta property="og:image" content={data.image} />
</Head>
<article>{/* ... */}</article>
</>
);
}
```
### Sitemap
```typescript
// routes/sitemap.xml.ts
export const handler: Handlers = {
GET() {
const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://saveinmed.com/</loc>
<priority>1.0</priority>
</url>
</urlset>`;
return new Response(sitemap, {
headers: { "Content-Type": "application/xml" },
});
},
};
```
## ⚡ Performance
Fresh é otimizado para performance máxima:
- **Zero JavaScript por padrão**: Apenas islands têm JS
- **Edge rendering**: Deploy em edge para latência mínima
- **Streaming SSR**: Renderização progressiva
- **Automatic code splitting**: Por rota e island
- **Preact**: Apenas 3KB de runtime
### Lighthouse Score Esperado
- Performance: 95-100
- Accessibility: 95-100
- Best Practices: 95-100
- SEO: 95-100
## 🚀 Deploy
### Deno Deploy (Recomendado)
```bash
# Instalar deployctl
deno install -Arf https://deno.land/x/deploy/deployctl.ts
# Deploy
deployctl deploy --project=saveinmed-website
```
### Docker
```bash
# Build
docker build -t saveinmed-website:latest .
# Run
docker run -p 8000:8000 saveinmed-website:latest
```
### Outras Plataformas
- **Cloudflare Pages**: Suporte para Deno
- **Netlify**: Via Deno runtime
- **Vercel**: Via Deno runtime
## 📧 Formulários de Contato
```tsx
// islands/ContactForm.tsx
export default function ContactForm() {
const handleSubmit = async (e: Event) => {
e.preventDefault();
const formData = new FormData(e.target as HTMLFormElement);
await fetch("/api/contact", {
method: "POST",
body: JSON.stringify(Object.fromEntries(formData)),
});
alert("Mensagem enviada!");
};
return (
<form onSubmit={handleSubmit}>
<input name="name" placeholder="Nome" required />
<input name="email" type="email" placeholder="Email" required />
<textarea name="message" placeholder="Mensagem" required />
<button type="submit">Enviar</button>
</form>
);
}
```
## 🧪 Testes
```bash
# Executar testes
deno test
# Com coverage
deno test --coverage=coverage
# Gerar relatório de coverage
deno coverage coverage --lcov > coverage.lcov
```
## 📊 Analytics
Integração com Google Analytics:
```tsx
// components/Analytics.tsx
export function Analytics() {
return (
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
/>
);
}
```
## 🔗 Integração com Outros Componentes
- **Backend APIs**: Links para signup e login
- **SaveInMed Frontend**: Redirecionamento após captura de lead
- **Blog**: Pode ser hospedado separadamente ou integrado
## 📝 Conteúdo
### Estrutura de Blog Post
```typescript
interface BlogPost {
slug: string;
title: string;
excerpt: string;
content: string;
author: string;
publishedAt: Date;
tags: string[];
image: string;
}
```
## 🌐 Internacionalização (i18n)
```typescript
// lib/i18n.ts
const translations = {
pt: {
hero: {
title: "Marketplace B2B Farmacêutico",
cta: "Começar Agora",
},
},
en: {
hero: {
title: "B2B Pharmaceutical Marketplace",
cta: "Get Started",
},
},
};
```
## 📝 Licença
MIT