Desafio: 5 Prompts para Recriar o Notion

Repositório oficial do Desafio Codecon: será que é possível recriar o Notion usando apenas 5 prompts de IA?

Sobre o Desafio

Inspirado no vídeo "Dev Especialista vs Vibecoder", este repositório documenta o desafio onde desenvolvedores tentaram recriar funcionalidades do Notion usando apenas 5 prompts para IAs generativas.

O objetivo? Recriar o Notion - uma das aplicações mais usadas por devs e criadores de conteúdo - com recursos limitados e muito estratégia.

O Que é o Notion?

O Notion é um app de produtividade que reúne várias ferramentas num só lugar:

• Anotações
• Listas de tarefas
• Bancos de dados
• Calendários

A grande sacada é sua flexibilidade: você pode montar páginas do jeito que quiser, com blocos de conteúdo, criando desde um sistema de gerenciamento de projetos até uma base de conhecimento personalizada.

Regras do Desafio

Limitações

• ✅ Máximo de 5 prompts para a IA
• ✅ Usar qualquer IA generativa (Claude, ChatGPT, Gemini, etc.)
• ✅ Qualquer stack de desenvolvimento
• ✅ Foco em funcionalidades core do Notion

Participe Você Também!

Acha que consegue fazer melhor? Mostre suas habilidades de prompt engineering!

Como Contribuir

1. Fork este repositório
2. Crie uma pasta com seu nome/username
3. Planeje sua estratégia de prompts
4. Desenvolva sua versão do Notion
5. Documente seu processo no README
6. Abra um Pull Request

Template de Documentação

Seu README deve incluir:

• IA Utilizada: Qual ferramenta você escolheu?
• Stack: Tecnologias do projeto
• Estratégia: Como planejou seus 5 prompts?
• Os 5 Prompts: Liste cada prompt usado
• Resultado: Screenshots ou demo
• Aprendizados: O que funcionou? O que mudaria?

📁 Estrutura do Repositório

/
├── seu-nome-aqui/
│   ├── src/
│   │   ├── index.html
│   │   ├── style.css
│   │   ├── script.js
│   │   └── ...
│   ├── prompts.md          # 👈 Seus 5 prompts aqui!
│   ├── estrategia.md       # 👈 Seu planejamento
│   ├── package.json
│   └── README.md
├── dev-especialista/       # Exemplo do especialista
├── vibecoder/              # Exemplo do vibecoder
└── README.md

Funcionalidades Sugeridas

Para guiar sua estratégia de prompts, considere implementar:

Essenciais

• Editor de texto com formatação básica
• Criação e exclusão de páginas
• Navegação entre páginas
• Persistência de dados (localStorage ou banco)

Intermediárias

• Blocos de conteúdo diferentes (texto, lista, código)
• Hierarquia de páginas
• Atalhos de teclado

Avançadas

• Banco de dados com visualizações
• Design responsivo
• Modo escuro

Dicas de Prompt Engineering

Estruturando Prompts Eficientes

1. Seja específico: Detalhe exatamente o que precisa
2. Contextualize: Explique o objetivo final
3. Itere: Cada prompt deve construir sobre o anterior
4. Peça estrutura: Solicite organização de código e comentários

Exemplo de Estratégia

Prompt 1: Estrutura base e layout
Prompt 2: Sistema de páginas e navegação
Prompt 3: Editor de conteúdo
Prompt 4: Persistência de dados
Prompt 5: Refinamentos e features extras

🤝 Apoie a Codecon

Gostou do desafio? Apoie a criação de mais conteúdos como este!

Codecon PRO - Apenas R$ 15/mês

• 🎫 Crachá especial na Codecon Summit
• 💬 Acesso ao grupo secreto no WhatsApp/Discord
• 🎬 Acompanhe os bastidores dos eventos
• 📧 Newsletter semanal exclusiva
• 🎨 Tema da Codecon para VSCode

Assine agora em codecon.dev/pro

📱 Siga a Codecon

• Instagram - @codecondev
• YouTube - Vídeos toda semana
• Site Oficial - Todos os eventos

📜 Licença

Este projeto está sob licença MIT. Sinta-se livre para explorar, aprender e compartilhar!

---

Feito com 🤖 e muito prompt engineering pela comunidade Codecon

#PromptEngineering #IA #Notion #Codecon #DesafioCodecon