Bem vindo(a) ao Desafio Inspiring! Ficamos felizes em te ver por aqui e queremos te desejar boa sorte!
Leia as instruções com calma e não deixe de evidenciar o seu progresso, mesmo que não consiga concluir totalmente algum item.
Happy Coding! 🧑💻
- Conta no Github
- Ter uma versão do Node.js instalada, nos itens do desafio utilizamos a versão 14.15.5 (LTS)
- Faça um fork deste repositório, ou clone caso prefira deixá-lo privado
- Siga as instruções de cada item e faça commits do seu progresso no repositório na sua conta do Github
Quando concluir o desafio, envie o link do seu repositório aberto para [email protected] e [email protected] ou convide @gabrieltoneti e @rodolfobarbeiro como editores do seu repositório privado.
- Qualidade de todo código escrito (lógica, limpeza, formatação, dentre outros)
- Padrões de mercado (conceitos, bibliotecas, código, etc)
- Resultado das alterações (a implementação feita deve levar ao resultado esperado)
Você entrou para o squad que irá desenvolver um produto para consulta de ofertas de jogos. Os designers já prepararam estes protótipos no Figma da primeira versão do portal:
Os recursos, cores, fontes podem ser encontrados neste projeto no Figma.
Em paralelo, um dev já começou o desenvolvimento em vanilla javascript, que pode ser executado da seguinte forma:
cd desafio/game-tracker
npm i
./node_modules/http-server/bin/http-server .
O site estará acessível em http://localhost:8080
Agora o seu desafio é dar continuidade ao trabalho e tirar o protótipo do papel. Você pode fazer o desenvolvimento no projeto já existente, ou se preferir pode criar um novo projeto utilizando frameworks, libs de componente, libs utility-first ou o que julgar mais apropriado para o desafio que tem pela frente.
OBS: Caso crie o seu projeto, não esqueça de deixar as instruções de como rodar localmente.
-
Utilize os dados do objeto
ofertas
do arquivodesafio/game-tracker/script.js
para criar os conteúdos presentes na tela.- O objeto não possui a porcentagem de desconto em cada oferta. Faça o cálculo necessário para obter a porcentagem nas ofertas, que deve aparecer no layout proposto.
-
O projeto rodando deve ser o mais fiél possível aos protótipos
-
O site deve ser responsivo e mudar a sua visualização de mobile para desktop quando a largura da tela for superior a 768px
- Implemente o filtro de jogo, que deverá exibir somente os jogos que correspodem com o texto digitado conforme o exemplo abaixo:
- Implemente a ordenação de jogos, que deverá alterar a ordem em que são exibidos, conforme exemplo abaixo:
Os filtros a serem implementados são:
- Porcentagem de desconto (do maior para o menor, deve ser aplicada por padrão)
- Maior preço (desconto)
- Menor preço (desconto)
- Título (ordem alfabética)
Até o momento as ofertas usadas eram mockadas. Vamos deixar as coisas mais dinâmicas por aqui.
-
Implemente o uso de uma API para consultar as ofertas de jogos. No momento em que este desafio foi proposto achamos melhor o uso da API CheapShark. Como proposta inicial sugerimos realizar uma requisição GET do seguinte endpoint:
https://www.cheapshark.com/api/1.0/deals?pageNumber=0&pageSize=12&storeID=1&onSale=1&AAA=1
Sendo os seguintes parâmetros de URL:
pageNumber
: número da página atualpageSize
: quantidade de ofertas trazidas por páginastoreID
: ID da loja na qual está sendo consultada as ofertas (Steam, Epic Games, GOG, etc)onSale
: consultar apenas jogos em promoçãoAAA
: consultar apenas jogos cuja venda no preço normal é maior que 29 dólares
OBS: É importante manter o
storeID=1
na requisição, pelo motivo que será descrito abaixo. -
Altere as imagens do banner, utilizando a seguinte URL de base:
'https://cdn.akamai.steamstatic.com/steam/apps/' + steamAppID + '/header.jpg'
Sendo
steamAppID
o ID do jogo no Steam, que é retornado no objeto JSON da consulta acima.OBS: Existem imagens cuja URL não irá funcionar por se tratar de um bundle. Seria bom tratar em caso de erro.
O projeto também possui um site admin desenvolvido em Angular 11 e Material que servirá para cadastrar novas ofertas de jogos.
Este projeto foi iniciado por um membro do time, porém ele acabou saindo de férias e ficou para você finalizar e corrigir o que ele deixou.
Para executar o projeto, siga estes passos:
cd desafio/adm
npm i
ng serve
O site estará acessível em http://localhost:4200
O projeto consiste em 2 páginas, uma com a lista de jogos cadastrados e outra para realizar o cadastro/atualização do jogo.
- Identifique e corrija os diversos problemas que o projeto apresenta.
A tela desafio/adm/src/app/pages/nossas-ofertas
lista todas as ofertas de jogos.
- Faça com que nela seja possível acessar as informações de uma oferta, abrindo a tela
desafio/adm/src/app/pages/cadastro-ofertas
no modo edição de oferta, com as informações preenchidas em seus devidos campos. - Inclua um botão "Criar Oferta" na tela
desafio/adm/src/app/pages/nossas-ofertas
, onde achar melhor, para abrir a teladesafio/adm/src/app/pages/cadastro-ofertas
no modo criação de oferta.
A tela desafio/adm/src/app/pages/cadastro-ofertas
permite a criação/edição de uma oferta.
-
Adicione as seguintes validações nos campos dos formulários:
-
Id
- Somente números
- Único
- Obrigatório
-
Título do Jogo
- Obrigatório
-
Preço
- Obrigatório
- Deve ser maior que 0 (zero)
-
Preço com Desconto
- Obrigatório
- Deve ser maior que 0 (zero)
- Deve ser menor que o preço
-
Loja
- Obrigatório
-
-
Permita a criação/edição de uma oferta apenas se todos os campos do formulário estiverem válidos.
OBS: É importante dar um retorno ao usuário, informando que deu certo ou não sua operação.
-
Ao finalizar a operação, redirecione o usuário à tela de Nossas Ofertas, que deve possuir as informações mais atualizadas.