Ways to Expand on this Project

If you want to improve this app and have some more practice with React, here are some ideas for you!

Take the Intermediate React Course

Take the Intermediate course! You'll learn great things like Tailwind, how to write tests for React, TypeScript, how to use React with Node.js, code splitting, and a whole slew of other things.

Paginate the Results

Our home page doesn't paginate doesn't results. With some nice buttons, you could paginate through the various results so a user isn't stuck looking at the top ten results. http://pets-v2.dev-apis.com/pets?animal=dog&page=1 will give you the second page of dogs (pages for this API start at 0).

Use a Real API

Use the Petfinder API! In previous versions of this course we did actually use the Petfinder API but it was occasionally unreliable so I made the fake API you're using to make sure you could always work through the code okay.

They even have a JavaScript library! You'll have to sign up for API credentials (secret and key) on their website, install the library, and then use the library everywhere we were using fetch(<url>) you need to change it to pf.animal.search() or whatever calls. This API returns different shpae of data. Last time I checked it looks like this:

{
  "id": 44895949,
  "organization_id": "NOTREAL",
  "url": "https://www.url.to.the.animal/",
  "type": "Rabbit",
  "species": "Rabbit",
  "breeds": {
    "primary": "Mini Rex",
    "secondary": null,
    "mixed": true,
    "unknown": false
  },
  "colors": {
    "primary": "Brown / Chocolate",
    "secondary": "Tan",
    "tertiary": null
  },
  "age": "Adult",
  "gender": "Female",
  "size": "Small",
  "coat": "Short",
  "attributes": {
    "spayed_neutered": true,
    "house_trained": false,
    "declawed": null,
    "special_needs": false,
    "shots_current": false
  },
  "environment": {
    "children": null,
    "dogs": null,
    "cats": null
  },
  "tags": [],
  "name": "Betty",
  "description": "Hi my name is Betty and I am 1 year old.",
  "photos": [
    {
      "small": "https://dl5zpyw5k3jeb.cloudfront.net/photos/pets/44895949/1/?bust=1559843027&width=100",
      "medium": "https://dl5zpyw5k3jeb.cloudfront.net/photos/pets/44895949/1/?bust=1559843027&width=300",
      "large": "https://dl5zpyw5k3jeb.cloudfront.net/photos/pets/44895949/1/?bust=1559843027&width=600",
      "full": "https://dl5zpyw5k3jeb.cloudfront.net/photos/pets/44895949/1/?bust=1559843027"
    }
  ],
  "status": "adoptable",
  "published_at": "2019-06-06T17:44:29+0000",
  "contact": {
    "email": "fake@example.com",
    "phone": "(555) 555-5555",
    "address": {
      "address1": "Not Real SPCA",
      "address2": "Fake Place",
      "city": "Fake City",
      "state": "FS",
      "postcode": "00000",
      "country": "US"
    }
  },
  "_links": {
    "self": {
      "href": "/v2/animals/44895949"
    },
    "type": {
      "href": "/v2/types/rabbit"
    },
    "organization": {
      "href": "/v2/organizations/NOTREAL"
    }
  }
}

Once you've done all this, your code will actually be populated with real animals!!

Deploy your Code

You should deploy your code to the cloud and tweet it at me! Great options for places for you to deploy include:

Azure Static Web Apps (I'm biased, I work here)
Google Firebase
AWS Amplify
Netlify
Vercel

Use the Theme Selector in More Places

We could do better than just using the theme selector just on buttons. Make a dark mode! Make a party mode! Add animiations! This would be great when paired with the Tailwind section from Intermediate React.

Right now we don't have a great navigation story for our little pet finding app. Add a navigation bar at the top so users can easily navigate our site.

Play with other tools

I showed you how to use Parcel but consider trying one of the newer build systems like Vite, Snowpack, ESBuild, or any of the others. You could also use one of the popular mainstays like Webpack or Rollup.

Let me know

Please! Let's share all the great apps we make here so we can provide inspirations for others and get some high fives on the cool work we do.

If you have a cool project you're particularly proud of, open a PR on this repo so that we all can see it! Community repo.

← Conclusion of Complete Intro to React Welcome →

End of Intro – Ways to Expand on this Project

Complete Intro to React v6 Videos ▶️