Rick-and-Morty-cards

Olá pessoal, gostaria de mostrar para vocês um pouco do que utilizei neste projeto onde dei uma brincada com a API do Rick and Morty.

Neste documento vou falar sobre, como rodar o projeto e pontuar algumas das minhas decisões sobre o projeto que julgo válidas.

Introdução

Desenvolvendo este projeto foquei nos seguintes pontos que julgo cruciais para todo projeto:

• Ter um versionamento bem documentado, com commits claros e explicativos.
• Desenvolver um código legível, organizado e de fácil manutenção seguindo boas práticas e padrões de código limpo.
• Buscando ter uma UI responsiva e uma UX fluída, acessível para todos os dispositivos.
• Criar um projeto escalável, bem componentizado e com uma boa estrutura de arquivos.

Principais ferramentas utilizadas

• React.js
• Typescript
• Axios
• React Router Dom
• Styled components
• Lottie Animations

Arquitetura

• Sobre arquitetura de pastas, o projeto segue uma estrutura básica, onde:
  • cards: arquivo de cards, onde é feita a criação dos cards da aplicação.
  • components: arquivos de componentes reutilizáveis.
  • animation: todas as animações do projeto.
  • size: arquivo de quebra de responsivodade.
  • pages: páginas da aplicação.
  • routes: todas as rotas
  • services: consumo da API.
  • shared: todos as pastas compartilhadas da aplicação.
  • themes: arquivos de tema.
  • Interface: arquivo que contém todas as interfaces.

Rodando o projeto

yarn

Para instalar as dependências do projeto.

yarn start

Para rodar o projeto em modo de desenvolvimento.

yarn build

Para fazer o build do projeto para produção.

Desenvolvimento

Desenvolvi o projeto como uma brincadeira para poder utilizar a API do Rick and Morty, para a homepage utilizei uma animação em JSON do Lottie, o consumo da API utilizei o AXIOS, para estilização utilizei o Styled components e procurei utilizar o maximo possivel o Typescript porém ainda fiz utilização de alguns any.

Link page

Projeto foi hospedado no Netlify sem nenhuma modificação apenas com a configuração padrão.

https://resonant-sherbet-ed40a2.netlify.app

Link repo APK

https://github.com/danielbortoleti/rick-and-morty-app/tree/main

Desktop

Home

ListCards

Responsive

Loading

Conclusão

Gostaria de agradecer a você que leu até aqui! Espero que goste do projeto :)

Good coding!