Game API Viewer 🎮

Sobre

Projeto feito com ReactJS + Tailwind CSS + React Router que pega a API RAWG (uma API com dados sobre jogos) e mostra em uma tabela. Nesta tabela pode-se fazer muitas ações, como: filtrar por gênero e plataformas dos jogos, ordenar por coluna, pesquisar e muito mais.

Tecnologias

Aqui estão as tecnologias usadas neste projeto.

• react 18.2.0
• react-router-dom 6.3.0
• tailwindcss 3.1.8
• react-icons 4.4.0

Serviços utilizados

• Git e Github
• Vite 3.0.7

Como utilizar

(OBS) Este projeto foi feito utilizando o yarn como administrador de pacotes.

• Clone o projeto para sua máquina.
• Digite "yarn" sem as aspas no terminal do seu editor estando na pasta clonada (este processo instalará as dependencias necessárias).
• Digite "yarn dev" sem as aspas no terminal para rodar a aplicação.

Imagens do Projeto

1 - Tela de boas-vindas.

2 - Tela principal.

3 - Filtrar os dados da tabela usando a barra de pesquisa.

4 - É possível filtrar os dados da tabela por gêneros e plataformas suportadas.

5 - É possível ordenar os dados clicando no nome da coluna.

6 - Expandindo os dados de cada célula (ou do card ao lado) quando o mouse passa por cima.

7 - Em caso de overflow de dados um componente de paginação surgirá.

Este website também é totalmente responsivo, ou seja, se adapta a diversos tamanhos de dispositivos.

Segue abaixo as imagens do website em um dispositivo móvel.

Autor

• David Alves Soares

Por favor, siga me no GitHub para acompanhar meus futuros projetos.

Obrigado por ter vindo até aqui, desejo tudo de bom para você!