igords-goncalves / meu-time Goto Github PK

Descrição

Criar a tela de login conforme proposto em protótipo.

Features

Planejamento - https://www.notion.so/igords-goncalves/Teste-T-cnico-29cd24c54337419bb4a2caaaec551997

Tasks

• Criar rotas de navegação.
• Criar layout da página.
• Criar componentes do layout da página home
• Criar cards de países
• Trabalhar com as requisições por sections da página
• Realizar requisição de países e renderizá-los os países 4 a 4 em cada card.
• A requisição vai acontecer sem eventos assim que o login for feito.

Protótipo

• Definir uma estrutura base para o componente de layout

• Desenhar comunicação do componente layout com componente #16
• Refatorar passando children como props para melhor estrutura

Descrição

Criação do projeto inicial, criação do repositório no github e configuração do projeto.

Features

yarn create vite . --template typescript

Tasks

• Criar projeto com vite + yarn.
• Utilização do TypeScript.
• Criação de novas branchs.
• Configuração do projeto com linters e padronizadores.
• Instalação de pacotes e dependências.

Descrição
Refatorar projeto de acordo com estudos prévios.

Features
Planejamento - https://www.notion.so/igords-goncalves/Teste-T-cnico-29cd24c54337419bb4a2caaaec551997

Tasks

• Criar componentes containers
• Criar componentes especializados
• Remover lógica criando custom hooks
• Remover lógica criando funções reutilizáveis

• A mensagem de validação deve ser genérica e tratada no front-end com base no erro retornado pelo back-end
• #36

Descrição

De acordo com a documentação apenas requisições do tipo GET são permitidas para a aplicação.

Features

API KEY: 5b1629f3c8607e0ac038d0d2b5761026

API: https://v3.football.api-sports.io/

Tasks

• Criar conta de acesso para obter chave

Descrição

Criar a tela de login conforme proposto em protótipo.

Features

Planejamento - https://www.notion.so/igords-goncalves/Teste-T-cnico-29cd24c54337419bb4a2caaaec551997

Tasks

• Criar componentes genéricos/comuns para página de login
• #25
• #18
• #19
• #20
• #21
• #22
• #23
• #24
• #26

Links e referências

Protótipo

Descrição

Criar componente de navegação com react router dom .

Features

Planejamento - https://www.notion.so/igords-goncalves/Teste-T-cnico-29cd24c54337419bb4a2caaaec551997

Tasks

• Criar componente principal em routes
• Criar router de navegação em App.js
• Criar endpoints de navegação

Descrição
Configurar todo o ambiente de desenvolvimento criando os boilerplates, arquivos de configuração e componentes chave.

Features

Tasks

• Iniciar projeto React/Next/Vite
• #15
• #16
• Criar .env file para armazenar URLs da API
• Configurar scripts do husky
• Configurar commitlint
• Configurar commitzen para commits
• Criar arquivos de configuração de testes (Cypress)
• Criar arquivo de pull request template
• Criar arquivos de pipeline
• Configurar linters e formatadores

Descrição

Criar um protótipo no figma seguindo os critérios de aceite e de acordo com o mockup proposto

Features

Tela 1 - https://www.figma.com/file/Yb9IBH56g7T1hdIyZ3BMNO/Desafios---Codel%C3%A2ndia?type=design&node-id=152536-1288&t=3gsW4R6C69PyKUCN-0

Tela 2 - https://www.figma.com/file/Yb9IBH56g7T1hdIyZ3BMNO/Desafios---Codel%C3%A2ndia?type=design&node-id=115719-1222&t=jSBacS47hg8IPoj5-0

Planejamento - https://www.notion.so/igords-goncalves/Teste-T-cnico-29cd24c54337419bb4a2caaaec551997

Obs. Recriar protótipo com boas práticas de desenvolvimento UI, utilizar template base de desenvolvimento.

Tasks

• #31
• Construção de style guide
• #32
• #33
• #34

Descrição

Criar casos de testes e documentação no isominia.

Features

Planejamento - https://www.notion.so/igords-goncalves/Teste-T-cnico-29cd24c54337419bb4a2caaaec551997

Tasks

• Agrupar endpoints relacionados juntos
• Estudar o retorno das requisições
• Exportar schema em JSON file e salvar no repositório
• Migrar do Insominia para Postman

Descrição

Nosso cliente José Gustavo, apaixonado por futebol e tecnologia, encontrou uma API
pública, chamada API-Football, com informações sobre ligas e copas ao redor do
mundo. A partir dela, ele deseja construir uma aplicação web para visualizar esses
dados, denominada Meu Time.
Para acessar a aplicação, o usuário deverá criar uma conta na API-Football antes.
Assim, ele receberá uma key de autenticação para usar na tela de login da Meu Time,
ao invés de usuário e senha. Por baixo dos panos, sua aplicação utilizará a key
informada pelo usuário para realizar as requisições à API.

Atenção: cada conta gratuita possui um limite de 100 requisições por dia.

Após realizar o login e escolher um país, ele deseja selecionar uma de suas ligas, para
então selecionar um dos times participantes.

Critérios de aceite / Regras de negócios / Requisitos

• Deve ser possível realizar login com a API key de autenticação da API-Football;
• Não serão exigidos usuário e senha para realizar o login, e sim a API key;
• Não deve ser possível realizar login com uma API key inválida;
• Não deve ser possível consultar os dados de um time sem realizar login;
• Deve ser possível selecionar um país;
• Só deve ser possível selecionar uma liga pertencente ao país selecionado;
• Deve ser possível selecionar uma temporada;
• Só deve ser possível selecionar um time pertencente à liga selecionada;
• Não deve ser possível selecionar uma liga sem ter selecionado um país anteriormente;
• Não deve ser possível selecionar um time sem ter selecionado uma liga anteriormente;

Referente ao time selecionado, deve ser possível visualizar:

• A lista de jogadores contendo nome, idade, nacionalidade.

API-Football - Documentation

• A formação mais utilizada na temporada

API-Football - Documentation

"lineups": [
{
"formation": "4-2-3-1",
"played": 32
},
{
"formation": "3-4-1-2",
"played": 4
},
{
"formation": "3-4-2-1",
"played": 1
},
{
"formation": "4-3-1-2",
"played": 1
}
],

• Uma tabela de resultados Com informações do endpoint teams statistics, contendo:
  • Total de jogos
  • Total de vitórias
  • Total de derrotas
  • Total de empates
• Um gráfico de quantidade de gols marcados por tempo de jogo

O endpoint teams statistics fornece as informações no formato abaixo:

"minute": {
"0-15": {
"total": 4,
"percentage": "6.06%"
},
"16-30": {
"total": 17,
"percentage": "25.76%"
},
"31-45": {
"total": 11,
"percentage": "16.67%"
},
...
} selected.

Descrição

Criar tela de login minimalista objetiva e com proposta de validação do formulário. É importante que as informações de como o usuário adquiri sua chave de acesso estejam presente em tela, assim como os links de redirencionamento para a criação dessa chave.

Features

Figma

Tasks

• Criar wareframe
• Criar componentes
• Criar design

Descrição

A refatoração da tela de login envolve toda parte de refatoração dos componentes e criação de novos componentes.

Tasks

• Refatorar componente <Login>
• Aplicar nova interface

Link para desenvolvimento com apoio do figma: https://www.figma.com/design/PU3NnwunPYZnISVavbboqJ/Meu-time?node-id=2614-426&m=dev