/Rick-and-Morty-cards

Projeto de criação de simple cards utilizando a API do Rick and Morty

Primary LanguageTypeScript

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.

Link repo APK

Desktop

Home

image

ListCards

image

Responsive

Loading

Conclusão

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

Good coding!