/projeto-frontend-online-store

Foi um projeto realizado em grupo, precisamos fazer uma loja online alimentada pela API do mercado livre. No app é possível filtrar os produtos por categoria, pesquisar na barra de pesquisa, adicionar, remover e alterar a quantidade do produto no carrinho e em seguida finalizar a compra em uma página de checkout.

Primary LanguageJavaScript

logo

🏪

Este foi o nosso primeiro trabalho em grupo do módulo de front-end! Foi um trabalho em que colocamos as metodologias ágeis em prática, utilizando a ferramenta Trello para organizar os requisitos. Nos organizamos em pair programming e fizemos o trabalho inteiro em duplas ou em trios. Abrimos uma branch por requisito em seguida abríamos um pull request e aguardávamos code review de outros membros para aprovar e dar um merge na nossa branch principal.

Mas do que se trata a front-end online store?

Precisamos desenvolver uma loja online alimentada pela API do mercado livre. Onde seria possível para o cliente filtrar os produtos por categoria, pesquisar na barra de pesquisa, adicionar, remover e alterar a quantidade do produto no carrinho e em seguida finalizar a compra em uma página de checkout.

frontend-online-store.webm

Endpoints da API

  • Para listar as categorias disponíveis: https://api.mercadolibre.com/sites/MLB/categories
  • Para buscar itens por termo: https://api.mercadolibre.com/sites/MLB/search?q=${valor-da-busca}
  • Para buscar itens por categoria: https://api.mercadolibre.com/sites/MLB/search?category=${id-da-categoria}
  • Para buscar itens de uma categoria por termo: https://api.mercadolibre.com/sites/MLB/search?category=${id-da-categoria}&q=${valor-da-busca}
  • Para buscar detalhes de um item específico: https://api.mercadolibre.com/items/${id-do-produto}

    Estilização

    Em grupo nós não fizemos nenhuma estilização. Mas para aprendermos melhor CSS foi sugerido para que cada membro do grupo criasse uma branch com o seu nome e desenvolvesse o CSS da maneira como quisesse. Eu resolvi pegar a paleta de cores do site do Mercado Livre e fiz uma estilização baseada no site do Mercado Livre, já que utilizamos uma API do mesmo.

    Tecnologias usadas

    Front-end:

    Desenvolvido usando: React, CSS3, HTML5, ES6

    Instalando Dependências

    Frontend

    cd src/
npm install

    Executando aplicação

    • Para rodar o front-end:

        cd src/ && npm start

    Executando Testes

    • Para rodar todos os testes:

        npm test

    🔗 Links

    portfolio linkedin