Site de palpites dos jogos da Copa do Mundo Catar 2022 desenvolvido durante o evento da Codar.me chamado FullStack Challenge. Esse evento contou com 5 aulas, com duração de aproximadamente 2 horas cada.
- Overview
- Autor
Ao criar uma conta com o nome, usuário, email e senha, o usuário pode começar a enviar seus palpites para os jogos da Copa do Mundo 2022 do Catar. É possível também visualizar os palpites de outros usuários na tela de perfil.
- Para rodar o projeto localmente basta fazer o clone deste repositório em sua máquina local:
git clone https://github.com/HenriqueFelixDev/na-trave-frontend.git
ou fazer o download (caso não tenha o git instalado em seu computador) e descompactar o arquivo baixado.
- Após ter o projeto em sua máquina entre no diretório/pasta do projeto e instale as dependências:
npm install
- Por fim, inicie a aplicação:
npm run dev
Obs: É preciso fazer o clone ou download do projeto do backend e iniciá-lo antes de rodar o frontend. As instruções desse processo estão no repositório do backend
Como forma de desafio, foram adicionadas funcionalidades extras na aplicação que não foram implementadas durante o FullStack Challenge:
Ao tentar acessar os jogos de um dia que não haverá partidas, uma tela com uma ilustração é exibida informando que não há partidas nesse dia.
Uma animação de loading foi adicionada nas páginas de Leaderboard e de Palpites/Perfil enquando os dados são consultados no backend
Após o usuário digitar o seu palpite, o card exibe um feedback do status do envio do palpite:
- Uma animação de loading com o texto "enviando o palpite" enquanto o palpite está sendo enviado para o backend
- Um ícone "check" e um texto "Palpite salvo" quando ocorre o sucesso na requisição
- Um ícone "remove" (um X) com um texto "Erro ao salvar o palpite" quando ocorrer um erro na requisição
Nas requisições realizadas nas páginas Hunches e Leaderboard, quando um erro ocorre na requisição, uma caixa vermelha com a mensagem do erro é exibida.
Quando o resultado da partida é atualizado no backend, não é mais possível editar o palpite daquela partida no frontend. Além disso, o estilo do card muda de acordo com o resultado da partida e o palpite do usuário:
- Caso o usuário tenha errado o palpite ou não tenha feito palpite para aquela partida, o card fica vermelho e a mensagem "Errou" fica no topo dele.
- Caso o usuário tenha acertado o palpite o card fica verde e a mensagem "Acertou" fica no topo dele.
Há uma tela com a classificação do bolão de acordo com o número de palpites certos. Cada vez que o resultado de uma partida é alterado, os palpites daquela partida de cada usuário é atualizado (o atributo won é atualizado). Para mais detalhes acesse o repositório na-trave-api. Os três primeiros usuários ficam com um estilo diferente dos outro:
- O primeiro colocado fica com a borda esquerda da cor dourada
- O segundo colocado fica com a borda esquerda da cor prateada.
- O terceiro colocado fica com a borda esquerda da cor marrom.
Para cada usuário é exibido o número de palpites certos, o percentual de acerto (pontos / palpites) e um link para acessar o perfil do usuário.
Apenas os 10 primeiros colocados são exibidos e caso o usuário não esteja entre os 10, ele é exibido no final da classificação, com uma linha dividindo-o dos outros.
Tanto a tela de palpites quanto a de classificação possuem um fluxo semelhante:
- Uma requisição http é feita
- Enquanto a requisição é processada um loading é exibido
- Caso seja realizada com sucesso exibe os dados
- Caso ocorra um erro exibe um alerta
Para abstrair essa lógica foi criado um hook que retorna um array com 4 itens:
- Uma variável com os dados consultados (state, quando executa com sucesso)
- Uma variável booleana isLoading, informando se a requisição está sendo processada ou não
- Uma variável error com a mensagem de erro retornada ou undefined por padrão
- Uma função fetch que recebe como parâmetro a promise (requisição) que vai ser executada
Para a autenticação do usuário foi utilizado Context API, que mantém os dados do usuário logado. Na inicialização da aplicação, ela verifica se os dados do usuário estão salvos no localStorage e, caso estejam, desserializa esses dados e atualiza o usuário do Context. Ao fazer login ou criar uma conta o usuário também é atualizado no Context e a aplicação redireciona para o dashboard.
Obs: Apenas as funcionalidades extras do frontend foram listadas. Para ver as funcionalidades extras do backend acesse o repositório na-trave-api
Para o desenvolvimento do frontend da aplicação foram utilizadas as seguintes tecnologias:
Ferramenta utilizada para a construção da aplicação com múltiplas funcionalidades, dentre elas:
- Gerar um template inicial para o desenvolvimento
- Criar um servidor de desenvolvimento com Hot Module Replacement
- Possui um comando de build que gera um bundle otimizado para a produção
Biblioteca javascript para a criação de páginas da web interativas. É responsável pela manipulação do DOM, fazendo isso de forma performática, pois atualiza apenas as partes necessárias. Utiliza uma extensão de sintaxe da linguagem JavaScript chamada JSX, semelhante ao HTML, que permite construir as telas como elas devem parecer (embora o uso do JSX não seja obrigatório no React).
Framework CSS que trabalha com o conceito de classes utilitárias, que são classes pré-existentes que representam uma propriedade do CSS (ex: flex, justify-center, etc). É possível personalizar totalmente um elemento HTML apenas utilizando as classes do Tailwind, utilizar breakpoints (sm, md, etc) e alterar o elemento de acordo com um estado (focus, disabled, etc).
Biblioteca para a manipulação de formulários. O Formik simplifica a manipulação dos formulários pois permite adicionar validação aos campos do formulário, manipular os valores de cada campo sem a necessidade da utilização de Controlled Components e controlar o envio (submit) dos dados.
Biblioteca para validação de dados. É altamente customizável, permitindo adicionar uma mensagem de erro personalizada para cada validação, além de possuir várias funções para validação de dados como email, required, min, max, url, etc, que em conjunto com o Formik torna muito simples a validação de um formulário.
Repositório do Tailed no Github
Um dos grandes problemas do Tailwind é o fato de que se houver muitas classes em um mesmo elemento, o HTML acaba ficando ilegível. O Tailed permite criar elementos com uma sintaxe semelhante ao Styled Components, simplificando a escrita das classes do Tailwind nos elementos. Exemplo:
const post = tailed('article')`
flex
flex-col
space-y-4
`
Repositório do StyledBy no Github
O StyledBy adiciona mais poder ao Tailed, pois permite modificar a estilização dos elementos criados com o Tailed com base em props. No exemplo abaixo o estilo é alterado de acordo com a prop type, em que se for error o texto é exibido em vermelho e se for success, é exibido em verde:
const post = tailed('article')`
${styledBy('type', {
'error': 'text-red-500',
'success': 'text-green-500',
})}
`
O deploy da aplicação foi feito na Vercel, que conta com um plano gratuito, integração com o GitHub (CI/CD), certificado SSL gratuito entre diversos outros recursos. Após a configuração do projeto, todo push realizado no GitHub gera um novo deploy na Vercel. Além disso, por meio das Preview Branchs, é possível publicar diferentes versões da aplicação baseadas em diferentes branchs do GitHub.
- Website - https://henriquefelix.dev.br
- Linkedin - @henrique-felix-dev
- FrontendMentor - @henriquefelixdev