Skip to content

Yasmin358/trybe-project-frontend-online-store

Repository files navigation

Online Store

Loja Online de compras que usa a API do Mercado Livre

Static Badge

FuncionalidadesFuturas AtualizaçõesDemostraçãoTecnologias e HabilidadesAcesso ao projetoCreditos

🔨 Funcionalidades

- Buscar produtos por termos e categorias a partir da API do Mercado Livre;
- Adicionar e remover produtos do carrinho de compras em diferentes quantidades;
- Visualizar detalhes e avaliações prévias de um produto, bem como criar novas avaliações.
- Simular a finalização da compra dos itens selecionados.

Futuras Atualizações

• Terminar pagina de Checkout - Requisito 12
• Exibir o carrinho de compras na tela principal - Requisito Bonûs

🔭 Demostração

Online Store Demo

💻 Tecnologias e Habilidades usadas no Projeto

  • HTML
  • CSS
  • JavaScript
  • React-16
  • Api do Mercado Livre
  • Trello

📁 Acesso ao projeto

Remotamente

Clique no link a seguir para abrir o projeto no navegador:
https://trybe-project-frontend-online-store-4cue5tk1n-yasmin358.vercel.app/

Clique no link a seguir para acessar os arquivos do projeto:
https://github.com/Yasmin358/trybe-project-frontend-online-store

Localmente

# Clone este repositório
$ git@github.com:Yasmin358/trybe-project-frontend-online-store.git

# Acesse a pasta do projeto no terminal/cmd
$ cd trybe-project-frontend-online-store

# Instale as dependencias (node 18.x)
$ npm install

# Rode o projeto 
$ npm start

# Ou abra no seu editor de texto favorito. 

✍️ Creditos

O Projeto Online Store foi desenvolvido em grupo no curso Desenvolvimento Fullstack da TRYBE, no modulo de Frontend.
Membros: Yasmin Amorin , Leonardo C Araújo, Harumi Maeda, Leandro Coelho, Thiago Viana

Requisitos do projeto:

Obrigatórios
1. Implemente o módulo de acesso à api do Mercado Livre ✔️
2. Crie uma página de listagem de produtos vazia ✔️
3. Crie a página do carrinho de compras ✔️
4. Liste as categorias de produtos disponíveis via API na página principal ✔️
5. Liste os produtos buscados por termos, com os dados resumidos, associados a esses termos ✔️
6. Selecione uma categoria e mostre somente os produtos daquela categoria ✔️
7. Redirecione para uma tela com a exibição detalhada ao clicar na exibição resumida de um produto ✔️
8. Adicione produtos ao carrinho a partir da tela de listagem de produtos ✔️
9. Adicione um produto ao carrinho a partir de sua tela de exibição detalhada ✔️
10. Visualize a lista de produtos adicionados ao carrinho em sua página e permita a manipulação da sua quantidade ✔️
11. Avalie e comente acerca de um produto em sua tela de exibição detalhada ✔️
12. Finalize a compra vendo um resumo dela, preenchendo os seus dados e escolhendo a forma de pagamento ✔️
Bonûs
13. Mostre junto ao ícone do carrinho a quantidade de produtos dentro dele, em todas as telas em que ele aparece. ✔️
14. Limite a quantidade de produtos adicionados ao carrinho pela quantidade disponível em estoque ✔️
15. Mostre quais produtos tem o frete grátis ✔️