WidGET A PET

Find a pet to adopt!

Comment

Inspiration

I saw that Widget was a cat, and thought about cats that needed a home.

What it does

This website allows people to find pets that are in shelters so that they can adopt them. Users can filter between cats, dogs, or view all the pets at once.

How I built it

I was going to use the PetFinder API, but it would take too long to get approved for an API Key, so I looked for a dataset of pets from Kaggle and found a csv file. I used a different csv file for the pet names since the original one didn't have names for the pets. I used JavaScript and JSON to filter through the data and display each pet as a separate box on the site. In the CSS file, I used flexbox so that the rows resize depending on the window width.

Challenges I ran into

The PetFinder API didn't work, so I used Kaggle csv files that I had to convert to JSON. The original file didn't have names for the pets, so I found another csv file of names and parsed it simultaneously alongside the first csv to ensure that all the pets have the same name when the data is sorted. I originally struggled to parse through the names side-by-side of the original data. The data was also really huge, especially the name file that had upward of 54,500 names, so I opened that csv in Excel and deleted a bunch of rows so that there was only 9,000ish names left. The dataset was still really big, so my site was lagging when I tried to scroll. My Chrome tab would crash whenever I tried to resize the window, so I opened the website in Edge instead. The name csv file also had a lot of "filthy data" that was contaminated with extra quotation marks, so I had to manually parse through over 5000 lines of JSON in VSCode using error messages in the developer tools on the live site to find the filthy data and clean it.

Accomplishments that I'm proud of/ What I learned

I learned that Kaggle does not guarantee nice data. On a separate note, it's been months since I've used JavaScript, so I got a refresher on a lot of syntax. I somehow remembered how to do things like reading in JSON files, but I forgot basic things like if-statements and for-loops.

What's next for WidGET A PET

I would like to use an API like the PetFinder one in order to have up-to-date real data on the site. I would also want images on the site so that users don't have to rely on brief descriptions of the pets, such as "white" because that's not helpful. In general, I want more information about the pets available. It would be helpful for people to know how far away a pet is from them, so that they could potentially visit the pet in-person.

Built With

Share this project:

Updates