📚 Artefatos do NotebookLM

Um template/boilerplate elegante e moderno para organizar e exibir todos os materiais e artefatos gerados pelo Google NotebookLM.

🎯 Este é um template base - Use este projeto como ponto de partida para criar seus próprios projetos NotebookLM. Veja a seção 🚀 Criando um Novo Projeto abaixo.

✨ Características

• 🎨 Interface Moderna: Design dark mode elegante com animações suaves
• 📦 Gerenciamento Dinâmico: Catálogo centralizado em JSON
• 🎯 Múltiplos Formatos: Suporte para documentos, vídeos, áudios e imagens
• 📄 Visualização Markdown: Renderização formatada de documentos Markdown com estilos personalizados
• 🚀 Fácil de Usar: Script interativo para adicionar materiais
• 📱 Totalmente Responsivo: Funciona perfeitamente em todos os dispositivos
• ⚡ Performance: Construído com Next.js 14 e otimizações modernas
• 🎭 Animações: Transições suaves com Framer Motion

🚀 Criando um Novo Projeto

Este template foi projetado para ser usado como base para criar novos projetos NotebookLM. Siga os guias abaixo para adaptar este template ao seu projeto:

⚡ Início Rápido (10 minutos)

Para uma adaptação rápida, consulte o guia de início rápido:

• 📄 QUICK_START_ADAPTACAO.md - Guia rápido de 10 minutos

📘 Guia Completo de Adaptação

Para instruções detalhadas passo a passo:

• 📘 GUIA_ADAPTACAO_TEMPLATE.md - Guia completo de adaptação

🎯 Passos Essenciais

1. Clone este repositório como base do seu projeto
2. Personalize títulos, descrições e cores
3. Adicione seus materiais do NotebookLM
4. Configure PWA e metadados
5. Faça deploy na Vercel ou outra plataforma

---

🛠️ Desenvolvimento do Template

Se você quiser contribuir ou entender como o template funciona:

Pré-requisitos

• Node.js 18+ ou superior
• npm, yarn ou pnpm

Instalação

1. Clone este repositório

   git clone https://github.com/araguaci/notebooklm-showcase.git
   cd notebooklm-showcase

2. Instale as dependências

   npm install
   # ou
   yarn install
   # ou
   pnpm install

3. Execute o projeto em desenvolvimento

   npm run dev
   # ou
   yarn dev
   # ou
   pnpm dev

4. Acesse no navegador

   Abra http://localhost:3000 para ver o resultado.

📥 Como Adicionar Materiais

Método 1: Script Interativo (Recomendado)

npm run add-material

O script irá perguntar todas as informações necessárias e adicionar automaticamente ao catálogo.

Método 2: Editar Manualmente

1. Baixe os artefatos do NotebookLM e mova para a pasta ./public/
2. Edite o arquivo public/materials.json:

{
  "materials": [
    {
      "id": "identificador-unico",
      "title": "Título do Material",
      "description": "Descrição detalhada",
      "type": "document|video|audio|image",
      "file": "nome-do-arquivo.extensao",
      "category": "documentos|videos|audios|imagens",
      "notebookUrl": "https://notebooklm.google.com/notebook/SEU-ID",
      "tags": ["Tag1", "Tag2"]
    }
  ]
}

📖 Documentação Completa

Para Criar Novos Projetos

• ⚡ QUICK_START_ADAPTACAO.md - Guia rápido de adaptação (10 min)
• 📘 GUIA_ADAPTACAO_TEMPLATE.md - Guia completo de adaptação

Para Adicionar Materiais

• 📘 GUIA_ADICIONAR_MATERIAIS.md - Guia completo passo a passo
• 📋 README_MATERIAIS.md - Visão geral do sistema

🌟 Exemplos de Uso

Veja este boilerplate em ação em projetos reais:

⚔️ Sun Tzu: A Arte da Guerra na Modernidade e Teoria

Demo: swot-chi.vercel.app

Aplicação do template para explorar os princípios estratégicos de Sun Tzu e sua relevância no contexto moderno.

🛰️ SWOT: Da Estratégia Empresarial ao Monitoramento Oceânico Global

Repositório: notebooklm-SWOT
Demo: swot-chi.vercel.app

Exemplo prático de implementação deste boilerplate, demonstrando como organizar e exibir materiais do NotebookLM sobre análise SWOT, desde aplicações empresariais até monitoramento oceânico global.

Principais modificações implementadas:

• Personalização do tema e cores para o contexto SWOT
• Organização de materiais por categorias específicas
• Integração com conteúdo real do NotebookLM
• Deploy em produção na Vercel

Para uma análise detalhada das modificações feitas neste exemplo, consulte ANALISE_MODIFICACOES_SWOT.md.

🌍 Análise PESTEL: Aplicações no Mercado Moderno

Demo: pestel-chi.vercel.app

Implementação focada na análise PESTEL, explorando os seis fatores macroambientais (Político, Econômico, Social, Tecnológico, Ambiental e Legal) e suas aplicações no mercado brasileiro e global.

📋 5W2H: Do Planejamento à Execução

Demo: 5w2h-chi.vercel.app

Guia prático sobre a metodologia 5W2H, demonstrando como transformar ideias em ações concretas com ferramentas estruturadas de gestão e planejamento estratégico.

🎯 Tipos de Material Suportados

Tipo	Extensões	Descrição
document	PDF, MD, TXT, DOCX	Documentos e textos
video	MP4, WebM	Vídeos explicativos
audio	M4A, MP3, WAV	Resumos em áudio
image	PNG, JPG, SVG	Infográficos, mapas mentais

📄 Nota: Arquivos Markdown (.md) são automaticamente detectados e exibidos com visualização formatada, incluindo suporte para tabelas, código, listas e outros elementos do GitHub Flavored Markdown.

📁 Estrutura do Projeto

notebooklm-showcase/
├── app/
│   ├── layout.tsx          # Layout principal (personalizar metadados)
│   ├── page.tsx            # Página principal (personalizar conteúdo)
│   └── globals.css          # Estilos globais
├── public/
│   ├── materials.json      # Catálogo de materiais (adicionar seus materiais)
│   └── [seus-arquivos]     # Seus materiais aqui
├── scripts/
│   └── adicionar-material.js  # Script auxiliar
├── QUICK_START_ADAPTACAO.md    # Guia rápido de adaptação
├── GUIA_ADAPTACAO_TEMPLATE.md  # Guia completo de adaptação
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── README.md

📝 Nota: Arquivos marcados com comentários são os principais pontos de personalização ao criar um novo projeto.

🛠️ Scripts Disponíveis

# Desenvolvimento
npm run dev

# Build para produção
npm run build

# Iniciar servidor de produção
npm start

# Linter
npm run lint

# Adicionar novo material
npm run add-material

🎨 Personalização

💡 Dica: Se você está criando um novo projeto a partir deste template, consulte os Guias de Adaptação acima para instruções detalhadas.

Alterar Cores e Tema

Edite o arquivo app/page.tsx para personalizar:

• Cores do gradiente
• Background
• Estilos dos cards

Alterar Metadados

Edite app/layout.tsx para alterar título e descrição.

Checklist de Personalização

Ao adaptar este template para um novo projeto, você precisará modificar:

• ✅ Títulos e descrições em app/layout.tsx
• ✅ Hero section em app/page.tsx
• ✅ Cores e gradientes
• ✅ Arquivo materials.json com seus materiais
• ✅ Configuração PWA (manifest.json)
• ✅ Metadados Open Graph e Twitter Cards
• ✅ Ícones e favicons

Veja os Guias de Adaptação para instruções detalhadas.

📦 Deploy

Vercel (Recomendado)

Outras Plataformas

Este projeto pode ser deployado em qualquer plataforma que suporte Next.js:

• Netlify
• Railway
• AWS Amplify
• Cloudflare Pages

🤝 Contribuindo

Contribuições são bem-vindas! Por favor:

1. Faça um Fork do projeto
2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

Veja CONTRIBUTING.md para mais detalhes.

📝 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

🙏 Agradecimentos

• Google NotebookLM - Por criar uma ferramenta incrível
• Next.js - Framework React
• Tailwind CSS - Framework CSS
• Framer Motion - Biblioteca de animações
• Lucide Icons - Ícones

📞 Suporte

• 🐛 Reportar Bug
• 💡 Sugerir Feature
• 📧 Email: artesdosul@proton.me

⭐ Se este projeto foi útil, considere dar uma estrela

---

Feito com ❤️ para a comunidade