List, login, create and vote games!
Demo • Tecnologias • Features • Login • Decisões • Autor
Demo (veja em tela cheia)
- Angular
- Redux (NGRX)
- RXJS
- TypeScript
- HTML
- CSS (SCSS)
-
Paginação
-
Rotas
-
Gerenciamento de Estado por
NGRX
(instale a extensão para navegador) -
Login e Autenticação por JWT (informação de login abaixo)
-
Carousel vanilla
A API fornecida para o projeto (que foi um teste técnico) não oferece possibilidade de novo cadastro, em vez disso o email e a senha para login (necessário para exclusão e adição de novos jogos) estão listados abaixo:
Email:
master@tindin.com.br
Senha:
123
-
Nada de
Bootstrap
,Material Design
,Font Awesome
ouTailwind
Foi utilizado em todo o projeto CSS puro, como SCSS como pré-processador. Por que não usar bibliotecas CSS os famosos "frameworks"? Usar CSS puro em todas as ocasiões me permite organizar melhor meu html, de forma que se você olhar o
DevTools
pelo navegador não vai ver uma coleção indistinta de classes estranhas juntas, serão nomes semânticos comopagination
,card
,add-game
,display
,slider
.O código fica mais limpo, fácil de entender e de dar manutenção. Graças aos componentes não existe repetição de código. E diminuí e muito o peso das centenas de classes de css que eu não iria utilizar.
Algumas animações somente possíveis com CSS foram adicionadas. Se eu tivesse utilizado qualquer biblioteca dessas meu trabalho teria ficado mais do mesmo, sem muito apelo visual. É claro que para usar todo o poder do CSS sem criar um pattern caótico é necessário domínio e foi esse foi um dos motivos de eu ter escolhido usar CSS puro, num contexto de um projeto talvez seja preferível por outros fatores utilizar alguma biblioteca do gênero, mas isso não será um problema. Porque quem domina o CSS irá dominar qualquer framework seja ele
Bootstrap
,Material Design
,Font Awesome
ouTailwind
. -
Não há responsividade (Leia)
Por se tratar de um teste técnico não houve prazo para adição de responsividade. Esse projeto foi focado no consumo da API fornecida.
Mas
, um Projeto responsivo até 280px, com paginação, ordenação alfabética e numérica, campo de pesquisa avançado, uso maior do NGRX, tradução e troca de temas claro e escuro já foi feito e você pode conferir ele agora.Link do site hospedado na Vercel: pokedex-thalyssonleite.vercel.app
Link do repositório Github: github.com/ThalyssonLeite/pokedex
Eu o desafio a quebrar o layout no projeto acima (feito 100% com SCSS puro).
-
Uso de gerenciamento de estado
O gerenciamento de estado me ajudou em diversas situações no debug e numa aplicação maior faria toda a diferença. Durante o desenvolvimento do projeto foi de vital importância a compreensão visual do estado da aplicação. Usando a extensão do Redux (instale a extensão para navegador) ficou claro o que estava acontecendo e que gargalos de perfomance poderiam ser diminuídos e como fazer isso.
Ter uma estrutura bem definida, uma única fonte, de onde todos os componentes podem beber, cria um código mais previsível e organizado.
-
__icons.scss
e__images.scss
paternO que é melhor?
Isso:
ou isso:
Ambos produzem o exato mesmo resultado com o segundo exemplo não tendo linhas ilegíveis de códgigo, sem imports, e com uma classe descritiva:
globe-fill-icon
. As classesdropdown__icon
ewhite-filter
setam as dimensões do ícone e a cor respectivamente. Mas o que faz a classeglobe-fill-icon
? Ela carrega a referência do SVG importado como background, umautility class
criada a mão que pode ser usada globalmente na aplicação. Se este ícone mudar de import no futuro (por exemplo se houver uma reorganização de pastas), ele será alterado em apenas 1 lugar e todos os lugares onde ele é chamado refletirão o resultado. O que não iria acontecer, por exemplo, se importássemos a referência do arquivo dentro de umaimg
tag, nesse caso se o import mudasse, TODOS os lugares onde aquela imagem fosse chamada não iriam mais funcionar e teriam de ser refatoradas.Nas classes com esse pattern usamos o sufixo
icon
para ícones eimage
para imagens. A coleção desses ícones está dentro de um único arquivo SCSS que vai ser importado dentro dostyles.scss
, a partir daí essas classes ficarão distribuídas globalmente na aplicação.Esse é um exemplo de como uma classe é criada dentro do arquivo
__icons.scss
:Depois os arquivos partials
__icons.scss
e__images.scss
serão importados dentro destyles.scss
onde ficarão disponíveis globalmente:
Made with 🧡 and madness by Thalysson 🥛(click here if you are not brazilian)