feat: catalogo de herois Marvel e DC com express e bootstrap

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.md

@@ -0,0 +1,57 @@
+# DBE-S02 - Catálogo de Heróis (Marvel e DC)
+
+Aplicação web desenvolvida para a disciplina de **Desenvolvimento Back-End (DBE)** - Semana 02. O projeto demonstra a criação de um servidor com **Node.js** e **Express**, rotas dinâmicas com parâmetros de requisição (`req.params`) e interface estilizada com **Bootstrap 5**.
+
+---
+
+## 🛠️ Tecnologias Utilizadas
+
+- **Node.js**: Ambiente de execução JavaScript no servidor.
+- **Express.js**: Framework minimalista para criação de rotas e APIs.
+- **Bootstrap 5 (CDN)**: Framework CSS para estilização moderna e responsiva.
+- **HTML5 / Template Literals**: Renderização dinâmica de layouts e páginas.
+
+---
+
+## 📌 Rotas e Funcionalidades
+
+| Método | Rota | Descrição |
+|---|---|---|
+| `GET` | `/` | Página inicial com cards de navegação e heróis em destaque. |
+| `GET` | `/marvel` | Lista de personagens do Universo Marvel Comics com links diretos. |
+| `GET` | `/dc` | Lista de personagens do Universo DC Comics com links diretos. |
+| `GET` | `/personagem/:empresa/:nome` | Rota dinâmica com parâmetros obrigatórios que exibe a ficha do herói com tema personalizado (vermelho para Marvel, azul para DC). |
+
+### Exemplos de URLs Dinâmicas:
+- `http://localhost:3030/personagem/marvel/Thor`
+- `http://localhost:3030/personagem/marvel/Homem-Aranha`
+- `http://localhost:3030/personagem/dc/Batman`
+- `http://localhost:3030/personagem/dc/Superman`
+
+---
+
+## 🚀 Como Executar o Projeto Localmente
+
+1. **Clone o repositório:**
+   ```bash
+   git clone https://gitea.tsiad.com.br/anderson/DBE-S02.git
+   cd DBE-S02
+   ```
+
+2. **Instale as dependências:**
+   ```bash
+   npm install
+   ```
+
+3. **Inicie o servidor:**
+   - Modo padrão:
+     ```bash
+     npm start
+     ```
+   - Modo de desenvolvimento (watch mode):
+     ```bash
+     npm run dev
+     ```
+
+4. **Acesse no navegador:**
+   [http://localhost:3030](http://localhost:3030)

index.js

@@ -0,0 +1,177 @@
+const express = require('express');
+
+const app = express();
+const PORT = process.env.PORT || 3030;
+
+// Função geradora de layout com o CDN do Bootstrap 5
+function layout(titulo, conteudo) {
+  return `
+    <!DOCTYPE html>
+    <html lang="pt-BR">
+    <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>${titulo}</title>
+      <!-- Bootstrap 5 CSS via CDN -->
+      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    </head>
+    <body class="bg-light">
+      <nav class="navbar navbar-dark bg-dark mb-4">
+        <div class="container">
+          <a class="navbar-brand fw-bold" href="/">Catálogo de Heróis</a>
+          <div>
+            <a class="btn btn-outline-danger btn-sm me-2" href="/marvel">Marvel</a>
+            <a class="btn btn-outline-primary btn-sm" href="/dc">DC Comics</a>
+          </div>
+        </div>
+      </nav>
+
+      <main class="container">
+        ${conteudo}
+      </main>
+    </body>
+    </html>
+  `;
+}
+
+// 1. Página inicial – Rota /
+app.get('/', (req, res) => {
+  const conteudo = 
+`    <div class="p-4 mb-4 bg-white rounded-3 shadow-sm border">
+      <h1 class="display-6 fw-bold">Catálogo de Heróis</h1>
+      <p class="lead text-muted">Bem-vindo ao catálogo interativo dos universos Marvel e DC.</p>
+    </div>
+
+    <div class="row g-4 mb-4">
+      <div class="col-md-6">
+        <div class="card h-100 border-danger shadow-sm">
+          <div class="card-body">
+            <h5 class="card-title text-danger fw-bold">Universo Marvel</h5>
+            <p class="card-text text-secondary">Acesse os personagens, quadrinhos e sagas da Casa das Ideias.</p>
+            <a href="/marvel" class="btn btn-danger">Explorar Marvel</a>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-6">
+        <div class="card h-100 border-primary shadow-sm">
+          <div class="card-body">
+            <h5 class="card-title text-primary fw-bold">Universo DC</h5>
+            <p class="card-text text-secondary">Descubra os heróis e protetores lendários da Liga da Justiça.</p>
+            <a href="/dc" class="btn btn-primary">Explorar DC</a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <hr class="my-4">
+
+    <h3 class="h4 mb-3">Personagens em Destaque</h3>
+    <div class="list-group shadow-sm">
+      <a href="/personagem/marvel/Thor" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+        Thor
+        <span class="badge bg-danger rounded-pill">Marvel</span>
+      </a>
+      <a href="/personagem/marvel/Homem-Aranha" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+        Homem-Aranha
+        <span class="badge bg-danger rounded-pill">Marvel</span>
+      </a>
+      <a href="/personagem/dc/Batman" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+        Batman
+        <span class="badge bg-primary rounded-pill">DC</span>
+      </a>
+      <a href="/personagem/dc/Superman" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+        Superman
+        <span class="badge bg-primary rounded-pill">DC</span>
+      </a>
+    </div>
+  `;
+
+  res.send(layout('Catálogo de Heróis', conteudo));
+});
+
+// 2. Rotas das empresas – Rota /marvel
+app.get('/marvel', (req, res) => {
+  const conteudo = 
+`    <div class="card border-danger shadow-sm mb-4">
+      <div class="card-header bg-danger text-white fw-bold">
+        Marvel Comics
+      </div>
+      <div class="card-body">
+        <p class="card-text">
+          A Marvel Comics é famosa por criar personagens humanos, com dilemas reais e poderes extraordinários, atuando nos Vingadores, X-Men e no cosmos.
+        </p>
+
+        <h5 class="mt-4 mb-3">Personagens Disponíveis:</h5>
+        <div class="list-group mb-4">
+          <a href="/personagem/marvel/Thor" class="list-group-item list-group-item-action">Thor</a>
+          <a href="/personagem/marvel/Homem-Aranha" class="list-group-item list-group-item-action">Homem-Aranha</a>
+        </div>
+
+        <a href="/" class="btn btn-outline-secondary">← Voltar para a Página Inicial</a>
+      </div>
+    </div>
+  `;
+
+  res.send(layout('Marvel Comics', conteudo));
+});
+
+// 2. Rotas das empresas – Rota /dc
+app.get('/dc', (req, res) => {
+  const conteudo = 
+`    <div class="card border-primary shadow-sm mb-4">
+      <div class="card-header bg-primary text-white fw-bold">
+        DC Comics
+      </div>
+      <div class="card-body">
+        <p class="card-text">
+          A DC Comics abriga alguns dos maiores ícones míticos dos quadrinhos, como a Liga da Justiça e protetores de cidades clássicas como Gotham e Metrópolis.
+        </p>
+
+        <h5 class="mt-4 mb-3">Personagens Disponíveis:</h5>
+        <div class="list-group mb-4">
+          <a href="/personagem/dc/Batman" class="list-group-item list-group-item-action">Batman</a>
+          <a href="/personagem/dc/Superman" class="list-group-item list-group-item-action">Superman</a>
+        </div>
+
+        <a href="/" class="btn btn-outline-secondary">← Voltar para a Página Inicial</a>
+      </div>
+    </div>
+  `;
+
+  res.send(layout('DC Comics', conteudo));
+});
+
+// 3. Rota com parâmetros obrigatórios – /personagem/:empresa/:nome
+app.get('/personagem/:empresa/:nome', (req, res) => {
+  const { empresa, nome } = req.params;
+  const isMarvel = empresa.toLowerCase() === 'marvel';
+  const corTema = isMarvel ? 'danger' : 'primary';
+
+  const conteudo = 
+`    <div class="card border-${corTema} shadow-sm">
+      <div class="card-header bg-${corTema} text-white fw-bold">
+        Ficha do Personagem
+      </div>
+      <div class="card-body">
+        <h2 class="card-title fw-bold">${nome}</h2>
+        <p class="card-text">
+          Editora / Universo: 
+          <span class="badge bg-${corTema} text-uppercase fs-6">${empresa}</span>
+        </p>
+
+        <div class="mt-4 pt-3 border-top">
+          <a href="/${empresa.toLowerCase()}" class="btn btn-outline-${corTema} me-2">
+            ← Ver todos da ${empresa.toUpperCase()}
+          </a>
+          <a href="/" class="btn btn-outline-secondary">Página Inicial</a>
+        </div>
+      </div>
+    </div>
+  `;
+
+  res.send(layout(`${nome} - Detalhes`, conteudo));
+});
+
+app.listen(PORT, () => {
+  console.log(`Servidor rodando em http://localhost:${PORT}`);
+});

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "dbe-s02",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js",
+    "dev": "node --watch index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitea.tsiad.com.br/anderson/DBE-S02.git"
+  },
+  "keywords": [],
+  "type": "commonjs",
+  "dependencies": {
+    "express": "^5.3.0"
+  }
+}