m0nae / petlook

:dog: Browse through adoptable pets and find your next furry friend.

🐶 PetLook 🐱

✨ Live demo ✨

PetLook is a website built with React that allows users to search for and retrieve pet data using the PetFinder API.

📷 Screenshots

Home page

Choose species page

Choose location page

Search page

404 Not Found page

💻 Tech Used

• React

• React Router

• Context API

  Why Context?

  The Context API seemed very fitting. This project isn't complex enough, in my opinion, to need *global* state management.

  Since searching makes up a solid 90% of the entire functionality of the website, I took the states having to do with the search functionality and threw it into a Context.

  Also, because I have quite a few pieces of state relating to searching, I decided to use the useReducer hook instead of multiple useState hooks. At first I did use multiple useStates, but things quickly got messy as the app grew.

• Geolocation API

• PetFinder API

• Axios

• React Testing Library/Jest

🧠 Future Features

• Tweak the GeoLocation functionality
• Add functionality to the search filters, where users can narrow their list of returned pets by criteria such as whether or not they're housebroken, if they get along with other pets/kids, etc
• Add end-to-end tests with Cypress

🏠 Local Setup

Clone the repo, install all dependencies, and start the server:

clone http:this
cd client
npm install
npm start

# The project will load on localhost:3000