Frameworks Frontend - Trabalho Final - Loja Virtual

Objetivo

Desenvolver uma aplicação de e-commerce utilizando Vue.js 3, com foco na Option API. O projeto envolve a criação de uma interface de usuário para exibir produtos consumidos de uma API externa e gerenciar um carrinho de compras através de uma API Fake.

Requisitos

1. Vue.js 3 (Option API): Utilizar Vue.js 3 com Option API para estruturar o frontend da aplicação.
2. Consumo de API Externa: Utilizar a API Platzi Fake API para obter dados dos produtos.
3. Interface da Página Inicial:
• Listar 16 produtos. (Exibir nome, preço, categoria, imagem do produto e um botão "Adicionar no Carrinho" para cada produto._
• Lista 05 categorias (Exibir nome e imagem)
4. Menu de Categorias:
• Criar um menu que liste todas as categorias disponíveis.
• Filtrar produtos na página inicial baseado na categoria selecionada.
5. Carrinho de Compras:
• Implementar funcionalidade para adicionar produtos ao carrinho de compras.
• Criar uma API Fake com json-server para gerenciar o carrinho.
• Exibir produtos no carrinho e calcular o valor total.

Dicas para a Realização

• Estruturação do Projeto:
• Comece estruturando os componentes Vue.js (ex.: Navbar, ProductList, Cart).
• Utilize a Option API para definir propriedades, métodos e computed properties.
• Integração com API Externa:
• Utilize o Axios ou Fetch API para realizar requisições HTTP à Platzi Fake API.
• Pratique o tratamento de dados e a atualização do estado da aplicação com base nas respostas da API.
• Criação do Menu de Categorias:
• Implemente um componente para o menu que permita a seleção de categorias.
• Use métodos Vue.js para filtrar e exibir produtos conforme a categoria escolhida.
• Gerenciamento do Carrinho de Compras:
• Ao clicar em "Adicionar no Carrinho", atualize o estado com os detalhes do produto.
• Configure o json-server para simular uma API que gerencia o carrinho de compras.
• Estilização:
• Aplique estilos CSS para melhorar a experiência do usuário.
• Utilizar este layout: https://replit.com/@370100961/Ecommerce ou https://github.com/370100961/vueshop
• Bônus: https://demo-easydroprelogios.commercesuite.com.br/luxury-watch/tag-heuer

Entrega

• O projeto deve ser entregue até as 22hs
• Submeta o código-fonte no Github (ou Replit)
• Trabalho em grupo com no máximo 3 colegas.
• Envio: https://forms.office.com/r/6XxFFJRhxW

Avaliação

• Será avaliado a correta implementação dos requisitos, qualidade do código, organização e funcionalidade da aplicação.

Código de Aula passada:

https://github.com/370100961/socio-campeao