Petfinder API /

INFO 343 independent project

JavaScript, React, CSS & HTML

Autumn 2016. The goal of the project was to use an API of my choosing to create some sort of interactive website (Find Your Purrfect Match) that used React. I chose to use the Pet Finder API so I created a website that allows users to search for adopatable cats in the area of their choosing. They can search by breed, size, age, location, and various other factors. I also coded a comparison feature that allows users to compare two different cats together so they can quickly see the differences between the two cats that they are looking at. I broke the components of the website up by using React and coded the interactive features with Javascript. I then styled and constructed the website by using CSS and HTML.

Screenshots // Live website

Home

The front page of 'Find Your Purrfect Match.'

See Full Screenshot

Search

Shows the search options a user has for finding a cat to adopt. They are required to search by breed and zip code, but the other advanced options are optional.

See Full Screenshot

Search Results

Once a user searches, they are displayed the 25 most recent cats up for adoption. They can see the stats about each cat and a user can also chose to compare two cats.

See Full Screenshot

Cat Details

By clicking on the details option under each cat, a dialog box appears to tell you a brief description about each cat.

See Full Screenshot

Comparison

Once a user choses two cats to compare from the search results, they can click on the 'comparison' tab to view the differences and similarities between the traits among the two cats.

See Full Screenshot