C4 Model - Apresentação Interativa

Apresentação interativa sobre o C4 Model (Context, Container, Component, Code) para visualização de arquitetura de software.

📋 Sobre o Projeto

Este projeto contém uma apresentação interativa com 17 slides cobrindo todos os aspectos do C4 Model, criado por Simon Brown. A apresentação inclui:

• Introdução e história do C4 Model
• Os 4 níveis de abstração (Context, Container, Component, Code)
• Exemplos práticos com diagramas
• Boas práticas e ferramentas recomendadas
• Integração com Domain-Driven Design
• Casos de uso reais e exercícios práticos

🚀 Como Rodar

Pré-requisitos

• Node.js (versão 18 ou superior)
• npm ou yarn

Instalação

1. Instale as dependências:

npm install

Desenvolvimento

Para rodar o servidor de desenvolvimento:

npm run dev

A apresentação será aberta automaticamente no navegador em http://localhost:3000

Build para Produção

Para criar uma build otimizada:

npm run build

Os arquivos compilados estarão na pasta dist/

Preview da Build

Para visualizar a build de produção localmente:

npm run preview

🛠️ Tecnologias Utilizadas

• React 18 - Biblioteca para construção da interface
• TypeScript - Tipagem estática
• Vite - Build tool e dev server ultra-rápido
• Tailwind CSS - Framework CSS utilitário
• Lucide React - Ícones modernos

📁 Estrutura do Projeto

C4Model/
├── src/
│   ├── Presentation.tsx    # Componente principal da apresentação
│   ├── main.tsx            # Ponto de entrada da aplicação
│   └── index.css           # Estilos globais e configuração Tailwind
├── index.html              # Template HTML
├── package.json            # Dependências e scripts
├── vite.config.ts          # Configuração do Vite
├── tailwind.config.js      # Configuração do Tailwind CSS
├── tsconfig.json           # Configuração do TypeScript
└── README.md              # Este arquivo

🎨 Navegação

• Use os botões Anterior e Próximo para navegar entre os slides
• Clique nos indicadores circulares na parte inferior para ir diretamente a um slide específico
• Cada slide é otimizado para leitura e inclui exemplos visuais

📚 Conteúdo

A apresentação cobre:

1. Introdução - O que é o C4 Model e sua motivação
2. Fundamentos - Os 4 níveis e conceitos de abstração
3. Diagramas Detalhados - Context, Container, Component e Code
4. Boas Práticas - Nomenclatura, estilos visuais e manutenção
5. Ferramentas - Structurizr, C4-PlantUML e Mermaid
6. DDD Integration - Como integrar com Domain-Driven Design
7. Casos de Uso - Exemplos reais (Banking, Microservices, Serverless)
8. Exercícios Práticos - Desafios para praticar
9. Recursos - Livros, artigos, vídeos e repositórios

📖 Documentação Adicional

Consulte o arquivo C4 Model - Arquitetura de Software Visual.md para a documentação completa em formato Markdown com referências e conteúdo expandido.

🤝 Contribuindo

Sugestões e melhorias são bem-vindas! Sinta-se à vontade para abrir issues ou pull requests.

📄 Licença

Este é um projeto educacional sobre o C4 Model criado por Simon Brown.

🔗 Links Úteis

• C4 Model - Site Oficial
• Structurizr
• C4-PlantUML
• Mermaid JS