This is a React based project that simulates a pet adoption site, where the user can explore a list of pets that are available for adoption.
If they are interested in adopting one of the available pets, they can fill out the adoption form with their information and submit their request.
The pets' pictures are fetched from The Cat API and The Dog API using the TanStack Query library, and their names from the cat-names library. Their age is a randomly generated number between 1 and 20 (so don't be surprised if you see some 12 year old kittens/puppies lol).
Users can also make a new request to refresh the displayed pets, mark pets as favorites, filter by species, and sort by age.
The data is then stored in localStorage to prevent unnecessary future API requests.
This project is currently optimized for mobile devices. The design and layout prioritize a smooth user experience on smaller screens, ensuring that users can easily navigate, view, and interact with all features on smartphones and tablets.
For the best experience, try using the app on a mobile device.
To run this app, make sure you have Node.js installed on your computer and then follow the following instructions.
-
Clone the repository or download the zip file.
-
Install the dependencies in the project's root directory by running
npm install. -
Run
npm run devto start the app in your browser.
In the src directory, run the command npm run coverage to check the test coverage. It's still in progress... 😅
💬 If you have any suggestions or feedbacks, I would be happy to receive them through LinkedIn!
Este é um projeto desenvolvido com React que simula um site de adoção de pets, no qual o usuário pode explorar uma lista de pets que estão disponíveis para adoção.
Caso o usuário tenha interesse em adotar um dos pets disponíveis, é possível preencher um formulário de adoção com suas informações e enviar sua solicitação.
As imagens dos pets são obtidas da The Cat API e da The Dog API usando a lib TanStack Query, e seus nomes vêm da biblioteca cat-names. As idades são um número gerado aleatoriamente entre 1 e 20 (então não se surpreenda se vir alguns filhotes de 12 anos kkkk).
Também é possível fazer uma nova requisição e atualizar os pets exibidos, além de marcá-los como favoritos e filtrá-los por espécie e ordená-los por idade.
Os dados são então armazenados no localStorage, para evitar requisições futuras desnecessárias.
Este projeto foi desenvolvido com foco em dispositivos móveis. O design e o layout foram pensados para proporcionar uma experiência de usuário fluida em telas menores, garantindo que os usuários possam navegar, visualizar e interagir facilmente com todas as funcionalidades em smartphones e tablets.
Para a melhor experiência, experimente usar o app em um dispositivo móvel.
Para instalar esta aplicação, certifique-se de ter o Node.js instalado no seu computador e então siga as instruções a seguir.
-
Abra o terminal e navegue até o diretório do projeto.
-
Instale as dependências rodando o comando
npm install. -
Rode o comando
npm run devpara inicializar o app no seu navegador.
No diretório src, rode o comando npm run coverage para verificar a cobertura de testes. Ela ainda está em progresso... 😅
💬 Se tiver alguma sugestão ou feedback, eu ficaria feliz em recebê-los pelo meu LinkedIn!
