Construindo este site com ajuda do Claude Code

Decidi ser 100% transparente sobre como este site foi criado, desde a primeira linha de código até o deploy automatizado que roda agora. E a verdade é: o Claude Code foi fundamental em cada etapa.

Como começar: Instalando o Claude Code

Antes de mergulhar no desenvolvimento, vou explicar como você pode replicar esse processo.

Instalação do Claude Code

O Claude Code é uma CLI oficial da Anthropic que funciona diretamente no terminal. Para instalar:

# Via npm (recomendado)
npm install -g @anthropic-ai/claude-code

# Ou via pip
pip install claude-code

Configuração inicial:

# Configurar API key
claude-code auth

# Verificar instalação
claude-code --version

Documentação completa

Toda a documentação oficial está em: https://docs.anthropic.com/en/docs/claude-code

Seções mais úteis:
- Overview: Introdução e conceitos
- CLI Usage: Comandos e flags principais
- Memory: Sistema de memória do Claude.md
- Settings: Configurações e personalização
- Tutorials: Workflows comuns e exemplos práticos

Workflow híbrido: ChatGPT + Claude Code

Uma estratégia poderosa que uso é combinar ChatGPT e Claude Code:

1. ChatGPT para brainstorming e prompts:

ChatGPT: "Preciso criar um sistema de blog em Django. 
Me ajude a estruturar um prompt detalhado para o Claude Code 
com todos os requisitos técnicos."

2. Claude Code para implementação:
Pego o prompt refinado do ChatGPT e uso no Claude Code para:
- Gerar código Django limpo
- Implementar funcionalidades específicas
- Resolver problemas técnicos em tempo real

Exemplo de prompt gerado no ChatGPT:

"Crie um sistema de blog Django com: (1) Model BlogPost com slug automático, tags e SEO, (2) Views com paginação, (3) Templates responsivos com TailwindCSS, (4) Admin configurado, (5) Template tags para Markdown. Use boas práticas Django e estrutura modular."

Vantagens dessa abordagem:
- ChatGPT excelente para planejamento e estruturação de ideias
- Claude Code superior para implementação e código de qualidade
- Prompts mais detalhados e estruturados

O início: Arquitetura profissional

Minha primeira decisão foi usar Django com uma estrutura profissional desde o início. Queria algo escalável, não apenas um template estático. O Claude me ajudou a definir uma arquitetura modular e bem organizada:

# Estrutura inicial do projeto
portfolio/
├── config/                 # Configurações centralizadas
│   ├── settings/
│   │   ├── base.py        # Settings comuns
│   │   ├── dev.py         # Desenvolvimento
│   │   └── prod.py        # Produção
│   ├── urls.py            # URLs principais
│   └── wsgi.py            # WSGI para deploy
└── apps/                   # Apps modulares
    ├── core/              # Funcionalidades básicas
    ├── blog/              # Sistema de blog
    ├── calculator/        # Calculadora CLT vs PJ
    └── users/             # Usuários (futuro)

Definindo a identidade autêntica

O momento mais interessante foi quando percebi que não queria um "portfólio" tradicional. Usei este prompt com o Claude:

"Não quero usar a palavra 'portfólio' em lugar nenhum. Meu objetivo é mostrar o que faço, minhas habilidades e o que desenvolvo, mas de maneira mais autêntica, direta e profissional."

Resultado: Transformamos de "Bem-vindo ao meu Portfólio" para "Desenvolvedor de Soluções Web" e criamos a identidade lpcoutinho.dev no header. Muito mais profissional e autêntico.

A calculadora CLT vs PJ: Do conceito ao deploy

Este foi o projeto mais complexo e revelador. A inspiração veio da excelente calculadora da Nagringa, que tem design impecável e funcionalidades bem pensadas.

Funcionalidades implementadas:

• Cálculos precisos baseados na legislação brasileira (INSS, IRRF, FGTS)
• Interface em tempo real com JavaScript para UX fluida
• Sincronização inteligente entre formulários CLT e PJ
• Sistema de URL compartilhável para salvar e compartilhar cálculos
• Local storage para histórico de comparações
• Tooltips explicativos para cada campo
• Design responsivo com TailwindCSS

Desafios técnicos enfrentados:

1. Sincronização de salários: Inicialmente copiava a cada caractere digitado (1, 10, 100, 1000...).
Solução: Implementar eventos focus/blur para sincronizar apenas no primeiro preenchimento.

2. Precisão financeira: Usar Decimal em vez de float para evitar erros de arredondamento.

3. UX em tempo real: Debounce no JavaScript para calcular automaticamente sem sobregerar o servidor.

4. Renderização Markdown: Inicialmente o blog não renderizava ## e ` corretamente.
Solução: Template tags customizados com biblioteca markdown.

O Build Log: Sistema completo de blog

Criar esta seção (que chamei de "Build Log" em vez de blog) foi uma jornada própria:

Backend Django:

• Model BlogPost com slug automático, tags, SEO e timestamps
• Views com paginação e filtros
• Admin configurado para criação fácil de conteúdo
• Template tags para renderização de Markdown

Frontend moderno:

• Templates responsivos com TailwindCSS
• Syntax highlighting para blocos de código
• Cards clicáveis - toda a prévia é um link para o post
• Typography otimizada para leitura técnica

# Exemplo do model BlogPost
class BlogPost(models.Model):
    title = models.CharField(max_length=200)
    slug = models.SlugField(unique=True, blank=True)
    content = models.TextField()  # Markdown
    excerpt = models.TextField(max_length=300)
    tags = models.CharField(max_length=200)
    published = models.BooleanField(default=True)

    def reading_time(self):
        return max(1, round(len(self.content.split()) / 250))

Deploy automatizado: Do código à produção

A parte mais empolgante foi criar um workflow de CI/CD completo. Aqui está o que construímos:

1. Containerização com Docker

FROM python:3.12.3-slim
# Configuração otimizada para produção
# WhiteNoise para arquivos estáticos
# Gunicorn como WSGI server
# Health checks integrados

2. GitHub Actions para deploy automático

name: Deploy to Production
on:
  push:
    branches: [main]

# Deploy via SSH para VPS
# Build da imagem Docker
# Update do Docker Swarm
# Cleanup de imagens antigas

3. Docker Swarm com Traefik

• SSL automático via Let's Encrypt
• Load balancing e proxy reverso
• Health checks e restart automático
• Volumes persistentes para dados

4. Problemas de produção resolvidos

Erro de permissões no container:

mkdir: cannot create directory '/app/data': Permission denied

Solução: Ajustar Dockerfile para criar diretórios antes da troca de usuário.

Problemas de volumes:
Inicialmente o volume mount sobrescrevia o código da imagem.
Solução: Volumes separados para dados, static, media e logs.

Tecnologias e ferramentas

Backend:

• Django 5.2.2 com apps modulares
• SQLite para simplicidade (migração para PostgreSQL planejada)
• WhiteNoise para servir arquivos estáticos
• Gunicorn como WSGI server

Frontend:

• TailwindCSS para design system consistente
• JavaScript vanilla para interatividade
• Markdown com syntax highlighting

DevOps:

• Docker para containerização
• GitHub Actions para CI/CD
• Docker Swarm para orquestração
• Traefik para proxy reverso e SSL

Processo de desenvolvimento colaborativo

O que mais me impressionou foi a colaboração iterativa com o Claude. Não é "deixar a IA fazer tudo" - é ter um parceiro técnico experiente.

Exemplos de colaboração:

Eu: "A sincronização está copiando caractere por caractere"
Claude: Identificou o problema e sugeriu focus/blur events

Eu: "Campos devem começar vazios, não com zero"
Claude: Modificou inicialização para aplicar apenas defaults específicos

Eu: "Erro de banco no Portainer: Permission denied"
Claude: Analisou logs e corrigiu permissões do Docker

Este próprio post

Este post que você está lendo agora é um exemplo perfeito do processo. Começou simples, mas evoluí para incluir:

• ✅ Todo o processo técnico até agora
• ✅ Desafios reais e soluções implementadas
• ✅ Código examples e configurações
• ✅ Preview cards completamente clicáveis
• ✅ Workflow de CI/CD documentado

Meta-momento: Estou usando o Claude para escrever sobre como uso o Claude! 🤯

Aprendizados fundamentais

1. IA como pair programming

O Claude funciona como um tech lead experiente que:
- Conhece boas práticas de arquitetura
- Identifica problemas rapidamente
- Sugere soluções baseadas em padrões consolidados
- Explica o "porquê" das decisões técnicas

2. Velocidade vs. qualidade

Mito: IA gera código ruim rapidamente
Realidade: IA gera código limpo que segue padrões, acelerando desenvolvimento

3. Foco no que importa

Em vez de passar horas pesquisando "como implementar X", posso focar em:
- Arquitetura e decisões de design
- Lógica de negócio específica
- Experiência do usuário
- Resolução de problemas reais

Próximos passos documentados

Técnico:

• [ ] Migração para PostgreSQL
• [ ] Sistema de cache com Redis
• [ ] Monitoramento com Prometheus
• [ ] Backup automatizado
• [ ] Dark mode toggle

Funcionalidades:

• [ ] Mais calculadoras/ferramentas
• [ ] Seção de automações N8N
• [ ] Sistema de comentários
• [ ] Analytics de performance
• [ ] API REST para integrações

Conclusão transparente

Usar IA no desenvolvimento não é substituir o desenvolvedor. É ter um multiplicador de força que:

• ✅ Acelera implementação sem comprometer qualidade
• ✅ Sugere melhores práticas que eu posso não conhecer
• ✅ Identifica problemas antes que se tornem bugs
• ✅ Documenta código e decisões automaticamente

O resultado: Código limpo, funcional, que eu entendo completamente e posso manter/evoluir.

Este site rodando em produção é a prova de que essa abordagem funciona. Do desenvolvimento local ao deploy automatizado, tudo construído com transparência total.

Este build log continuará documentando cada evolução do projeto. Código fonte será disponibilizado em breve no GitHub - continue acompanhando para ver os próximos experimentos! 🚀