/projeto-desestresse

Projeto criado para aliviar um pouco do estresse do dia a dia, com foto de cachorros e piadas!

Primary LanguageJavaScript

Desestresse 🧘🏾🧘🏾

Projeto criado para aliviar um pouco do estresse do dia a dia, com foto de cachorros e piadas!

Esse projeto conta com a utilização de duas API's uma de piadas e a outra é a que retorna as imagens de cachorros.

API's utilizadas

1 -> https://dog.ceo/dog-api/breeds-list API de imagens de dog's

2 -> https://v2.jokeapi.dev/ API de piadas (en)

Olá pessoal, gostaria de mostrar para vocês um pouco do que utilizei neste projeto onde dei uma brincada com a API de imagens de dog's e JokeAPI.

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
  • Axios
  • React Router Dom
  • Styled components

Arquitetura

  • Sobre arquitetura de pastas, o projeto segue uma estrutura básica, onde:
    • components: arquivos de componentes reutilizáveis.
    • screens: páginas da aplicação.
    • routes: todas as rotas
    • styles: arquivo de tema global.
    • mocks: arquivo que contém todos os dados mockados da alicação.

Rodando o projeto

npm i

Para instalar as dependências do projeto.


npm start

Para rodar o projeto em modo de desenvolvimento.


npm build

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

Desenvolvimento

Desenvolvi o projeto como uma brincadeira para poder utilizar as API'S do API de imagens de dog's e JokeAPI, o consumo da API utilizei o AXIOS e para estilização utilizei o Styled components.

Home

image image

Pouco estressado

image

Estressado

image

Muito estressado

image

Conclusão

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

Good coding!