Skip to content

ThalyssonLeite/rotten-joysticks

Repository files navigation

Rotten Joysticks

List, login, create and vote games!

Experimente a aplicação no ar

See the application online

DemoTecnologiasFeaturesLoginDecisõesAutor


demonstration

(Espere o gif carregar)

Tecnologias

  • Angular
  • Redux (NGRX)
  • RXJS
  • TypeScript
  • HTML
  • CSS (SCSS)

Features


Login

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


Decisões

  • Nada de Bootstrap, Material Design, Font Awesome ou Tailwind

    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 como pagination, 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 ou Tailwind.

  • 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 patern

    O 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 classes dropdown__icon e white-filter setam as dimensões do ícone e a cor respectivamente. Mas o que faz a classe globe-fill-icon? Ela carrega a referência do SVG importado como background, uma utility 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 uma img 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 e image para imagens. A coleção desses ícones está dentro de um único arquivo SCSS que vai ser importado dentro do styles.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 de styles.scss onde ficarão disponíveis globalmente:


Autor

Made with 🧡 and madness by Thalysson 🥛(click here if you are not brazilian)

About

List, login, create and vote games!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published