Projeto Final — SerieLog

Disciplina: Programação Web 2

Contexto

A SerieLog é uma plataforma pessoal de registro de séries. O usuário pode manter seu próprio catálogo: adicionar séries que assistiu, editar a nota após terminar, marcar como assistida e remover do catálogo.

O backend (JSON Server) já está pronto e será entregue pelo professor. A equipe precisa apenas desenvolver o front-end em Vue 3.

Requisitos Obrigatórios

O projeto deverá implementar os requisitos descritos abaixo.

1. Listagem de Séries

A tela principal da aplicação deverá exibir as séries cadastradas na API, carregadas automaticamente ao abrir a página. Cada série deverá apresentar pelo menos título, gênero, nota e status de assistida.

2. Filtro

A listagem deverá permitir filtrar as séries por gênero ou por status (assistida / não assistida). O filtro deverá funcionar sem recarregar a página, atualizando a lista dinamicamente à medida que o usuário seleciona os critérios.

3. Cadastro

A aplicação deverá possuir um formulário para adicionar novas séries ao catálogo. O formulário deverá conter os campos necessários para preencher os dados de uma série. Após o cadastro, a nova série deverá aparecer na listagem sem que o usuário precise recarregar a página.

4. Remoção

Cada série exibida na listagem deverá ter a opção de ser removida do catálogo. A remoção deverá ser refletida imediatamente na interface, sem recarregar a página.

5. Navegação

A aplicação deverá utilizar Vue Router para separar as telas em rotas distintas. As rotas obrigatórias são a tela de listagem (/) e a tela de cadastro (/series/nova). A navegação entre as telas deverá ocorrer sem recarregar a página.

6. Componentização

O front-end deverá ser dividido em componentes Vue com responsabilidades claras. Os dados necessários para exibição deverão ser recebidos pelos componentes via props. Ações do usuário que impactam o estado da aplicação, como a remoção de uma série, deverão ser comunicadas do componente filho para o pai via emits.

Requisitos Não Funcionais

A interface deverá ser funcional e navegável. Serão considerados aspectos como organização dos arquivos, padronização de nomes, indentação do código e separação adequada de responsabilidades entre os componentes.

Requisito Opcional (Desafio)

A implementação de funcionalidades extras poderá aumentar a nota final do projeto até o limite máximo de 10 pontos.

• Edição de série: permitir editar os dados de uma série já cadastrada por meio de um formulário acessível em uma rota própria (/series/:id). O formulário deverá ser pré-populado com os dados existentes e a atualização deverá ser enviada para a API.

Rotas sugeridas (Vue Router)

Componentes sugeridos

Apresentação

• Formato: demo ao vivo com o professor (dupla por dupla)
• Defesa: professor faz perguntas individuais a cada integrante sobre o código entregue
• Fator de defesa: a resposta às perguntas influencia a nota individual — quem não souber explicar o próprio código tem a nota reduzida

Entrega

• Projeto Vue compactado (sem node_modules/)
• Questionário individual no Moodle

Critérios de Avaliação

Total: 10 pontos

Desafio opcional (bônus até +1 pt): edição de série na rota /series/:id, com formulário pré-populado com os dados existentes e atualização via PUT.

Fator de Defesa Técnica

A nota final do projeto será multiplicada individualmente pelo fator abaixo, de acordo com o desempenho de cada integrante durante a apresentação. Integrantes da mesma dupla podem receber fatores diferentes.

Exemplo de cálculo

Projeto avaliado com nota 8,0:

Projetos com funcionalidades implementadas mas sem demonstração mínima de compreensão técnica poderão ter redução significativa na nota final.

Apêndice — Configurando o Backend (JSON Server)

Por que precisamos de um backend?

A SerieLog consome dados de uma API REST. Para que o front-end funcione — listando, cadastrando e removendo séries — é necessário que um servidor esteja rodando localmente na sua máquina respondendo às requisições.

Neste projeto, utilizamos o JSON Server: uma ferramenta que transforma um arquivo .json comum em uma API REST funcional com suporte a GET, POST, PUT, PATCH e DELETE. Não é necessário escrever nenhum código de backend — basta um arquivo de dados e um comando no terminal.

O backend do projeto já está configurado e pronto. Você só precisa seguir os passos abaixo para rodá-lo na sua máquina.

Pré-requisitos

• Node.js instalado (nodejs.org)
• Terminal (PowerShell, Git Bash ou similar)

Passo a passo

1. Crie a pasta do backend

Crie uma pasta chamada serielog-api fora da pasta do seu projeto Vue:

📁 serielog/
  📁 serielog-api/     ← backend aqui
  📁 serielog-front/   ← seu projeto Vue aqui

2. Crie o arquivo db.json

Dentro de serielog-api/, crie o arquivo db.json com o conteúdo abaixo. Esse arquivo é o “banco de dados” da aplicação — o JSON Server o usa para armazenar e responder os dados.

{
  "series": [
    {
      "id": 1,
      "titulo": "Breaking Bad",
      "genero": "Crime / Drama",
      "nota": 9.5,
      "ano": 2008,
      "assistida": true
    },
    {
      "id": 2,
      "titulo": "Succession",
      "genero": "Drama",
      "nota": 8.9,
      "ano": 2018,
      "assistida": true
    },
    {
      "id": 3,
      "titulo": "Severance",
      "genero": "Ficção Científica",
      "nota": 8.7,
      "ano": 2022,
      "assistida": false
    },
    {
      "id": 4,
      "titulo": "The Wire",
      "genero": "Crime / Drama",
      "nota": 9.3,
      "ano": 2002,
      "assistida": true
    },
    {
      "id": 5,
      "titulo": "Fleabag",
      "genero": "Comédia",
      "nota": 8.7,
      "ano": 2016,
      "assistida": false
    },
    {
      "id": 6,
      "titulo": "Chernobyl",
      "genero": "Drama / História",
      "nota": 9.4,
      "ano": 2019,
      "assistida": true
    }
  ]
}

3. Instale o JSON Server

No terminal, navegue até a pasta serielog-api/ e execute:

npm init -y
npm install json-server

Isso cria o arquivo package.json e instala o JSON Server como dependência local.

4. Inicie o servidor

npx json-server db.json

Se tudo estiver correto, você verá uma mensagem parecida com esta:

JSON Server started on PORT :3000
Press CTRL-C to stop

O backend estará disponível em http://localhost:3000.

Endpoints disponíveis

Formato de uma série

{
  "id": 1,
  "titulo": "Breaking Bad",
  "genero": "Crime / Drama",
  "nota": 9.5,
  "ano": 2008,
  "assistida": true
}

Observações

• O JSON Server precisa ficar rodando enquanto você trabalha no front-end. Não feche o terminal.
• Alterações feitas pela API (POST, DELETE) são salvas automaticamente no db.json.
• Se quiser resetar os dados ao estado inicial, basta substituir o conteúdo do db.json pelo conteúdo original acima.