🛒 Projeto Frontend Store

Frontend de uma loja online, com essa aplicação o usuário pode:

• Buscar produtos por termos e categorias a partir da API do Mercado Livre;
• Interagir com os produtos buscados de modo a adicioná-los e removê-los de um carrinho de compras em diferentes quantidades;
• Visualizar detalhes e avaliações prévias de um produto, bem como criar novas avaliações;
• E por fim, finalizar a compra (simulada) dos itens selecionados.

📄 Sobre

Foi utilizado a API do Mercado Livre para realizar a busca de itens da loja, com os seguintes endpoints:

Para listar as categorias disponíveis

• Endpoint: https://api.mercadolibre.com/sites/MLB/categories

Para buscar por itens por termo

• Parâmetro de busca $QUERY (este parâmetro deve ser substituído pelo valor do campo de busca)
• Endpoint: https://api.mercadolibre.com/sites/MLB/search?q=$QUERY

Para buscar itens por categoria

• Parâmetro de busca $CATEGORY_ID (este parâmetro deve ser substituído pelo ID da categoria selecionada)
• Endpoint: https://api.mercadolibre.com/sites/MLB/search?category=$CATEGORY_ID

Para buscar itens de uma categoria por termo

• Parâmetro de busca $QUERY (este parâmetro deve ser substituído pelo valor do campo de busca)
• Parâmetro de busca $CATEGORY_ID (este parâmetro deve ser substituído pelo ID da categoria selecionada)
• Endpoint: https://api.mercadolibre.com/sites/MLB/search?category=$CATEGORY_ID&q=$QUERY

Para buscar detalhes de um item especifico

• Parâmetro de busca $PRODUCT_ID (este parâmetro deve ser substituído pelo valor do campo de busca)
• Endpoint: https://api.mercadolibre.com/items/$PRODUCT_ID

Se você quiser aprender mais sobre a API do Mercado Livre, veja a documentação.

📋 Execute o projeto em sua máquina

Clone o repositório:

git clone [email protected]:jpoliveiramateus/frontend-store.git

🔧 Instalação

Uma série de exemplos passo-a-passo que informam o que você deve executar para ter um ambiente de desenvolvimento em execução.

Entre na pasta e instale todas as dependências:

cd frontend-store/
npm install

Ao terminar execute a aplicação e acesse sua porta local:

npm start

http://localhost:3000/

🧪 Executando os testes

⚙️ Execute o seguinte comando no terminal, e pressione a tecla 'a' para executar todos os testes.

npm test

🔎 Rotas

• Home: listagem de produtos. *http://localhost:3000/
• Product Details: detalhes do produto e avaliações. *http://localhost:3000/product/MLB1968210028
• Cart: listagem de produtos adicionados ao carrinho e calculo do total. *http://localhost:3000/cart
• Checkout: revise seus produtos e conclua sua compra inserindo seus dados. *http://localhost:3000/checkout

🤹 Algumas funções implementadas:

• Média de avaliações na página de detalhes.

🛠 Ferramentas & Metodologias Utilizadas

• HTML5;
• CSS3;
• JavaScript ES6;
• React;
• Redux;
• Redux Thunk;
• Redux Persist;
• Jest e React Testing Library;
• Mobile First;
• React Icons (Biblioteca de ícones);
• React Bootstrap;
• Bootstrap;
• MUI;
• Conventional Commits.

🧑🏻‍💻 Status - em desenvolvimento

Próximos pontos de melhoria:

• Barra de pesquisa no mobile;
• Seletor dropdown para ordenar a lista de produto por maior e menor preço;
• Animação no carrinho para quando um produto for adicionado;
• Página (NotFound) ao acessar rota inválida.

---

⌨️ desenvolvido por João Pedro Oliveira 😄