Pawsibility

About

Pawsibility is a pet finder app that allows you to search adoptable pets by zipcode. You can also filter by animal type and distance, as well as add pets to a favorites list. I was inspired to do this because I recently went through this looking for my new puppy, Millie.

To make the app, I used JavaScript, CSS, React, and Redux. I also utilized Postman and of course, the Petfinder API. I decided to revamp this project because I wanted to do so much more with it last time, and I loved the idea of being familiar with the API.

Challenges

With the API set up already, the biggest obstacle I faced was passing state. I found it pretty easy to get lost with the multiple states I was working with. File structure was also an issue. I had decided to make the hamburger component seperately and I think this is what prevented me from hiding the menu on click in mobile. Aside from state, styling is always by biggest challenge. I'm quite proud of what I was able to produce here in vanilla CSS, and I'm glad I decided to stretch myself in this way.

Getting Started

In order to run this app, you will need:

• React
• Vite
• Redux
• React Router Dom
• React Select
• React Toastify
• Font Awesome
• Pet Finder API Key

1. Navigate to the Petfinder API and click the “Get An API Key” button
2. Create an account
3. Once account is created, you can click “For Developers”
4. Fill out the details of your project and what context you’ll be using the API for (personal, business, school, etc.) and click “Request a Key”
5. The API key will display on the next page along with a “secret.” This is used to request private information, which I won’t go into as this project is focused on the frontend. You will need this secret to set up Postman for the bearer token.
6. If you haven’t already, install Postman.
7. Create a new request to match this screen shot (type in your own client ID (API Key) and secret:
   


8. Click send and you should see an access token appear in the terminal (Note: This token expires every hour)

CSS

The app was built completely with custom CSS. I used Canva to create a theme and logo. I used Google Fonts for the text styles.

Thank you!