Some of the Pets do not have images and and viewing their page bugs it out

Was trying to run the app in development mode so I could make changes. Then this compile error came up after doing yarn start
It can't be dismissed at the bottom it says so I can't make yarn ignore/dismiss this.

Wondering what kind of backend should be implemented?

Purpose of it would be for users to sign up, login and share stories or favorite pets

Thinking of using Supabase, Express or Nest.

Any suggestions or ideas would be appreciated

Some Pets have multiple breeds and it creates a new line extending the height of the card.

Migrate to Bootstrap 5 docs

    "react-bootstrap": "^1.6.0",
    "bootstrap": "^4.5.3",
    "bootswatch": "^4.5.2",

these need updating

There might be some breaking changes and may need to update the code

Optimize the Resource page for best practices. Some of the code has <br> tags or uses <b> tags. Feel free to update the css and Resources.js

    <br />
        <br />
        <b>
          Pawternity Hub wants to help you stay safe and help you find a friend
          that can keep you company during the pandemic
          <br /> Check out the links below for more information about adoption
          during Covid-19
        </b>
        <br />

In PetType.js, mouse hover over would transition to another image of the pet and then after returns to the original pet img.

Might also need to check if pet has more than one or none

There are some files that contain inline style.
Would be better to organize it in css files.
The css file could be in the same folder where it is used unless there's a better suggestion.
May have to override the css from bootstrap

<Card style={{ width: "100%", paddingTop: 10 }}>

There isn't a title for each picture.

Add an onhover effect over each image which shows the text for the type of pet
add onhover effect color over it something like this below. Feel free to experiment and variety of colors

In the contributors page, some of them have a white background blending it in.

Add a black border around it or variety of colors

Home page seems lacking. Maybe add featured pets of the week or random pets.

Open to other features and feedback.

Feel free to remove the image and css if necessary

Add a 404 page when a user tries to enter a page that does not exist

and add an image of pets or something

put a button that helps users redirect to the home page, button redirect to /about , and button for /pets

The site could use some more improvements so feel free to open a PR for anything that you think is an improvement or any issues that come up.
The goal is to make the website to have access to information on the pets to adopt.

The site could be accessed here: http://pawternityhub.tech/

update pet state to const [pet, setPet] = useState({});

instead of ternary operator return pet ? ... : .. line 37
use if
if pet is empty return the <Spinner />
if not return the petInfo <div className="petInfo">...

due to the migration to using bootstrap 5, there were variable changes

in the about page, the github button needs fixing and would need to be change to use var(--bs-primary) in the css

make sure the zipcode is valid
and display an error when the zip code is invalid
US zipcode for now 5 digits

Currently loads a blank before grabbin a data.

Was thinking of adding a spinner or loading before the data is fetched

Anyone want to create a new logo for the site?

Replace PawHub in the Navigation bar with the logo

Add the logo to the site

Info for adopting pets

Info about covid

Helpful links and styling the page if u can

card box height is uneven

Create an About page and put a link in the nav bar
Just put in lorem ipsum filler text and a filler image.

replace with image ie youtube image for youtube link

I am not really familiar with testing.

If someone is up to implement it, go ahead

Revamping the home page

Two sections
section1 New background images of pets could be from free stock photo
Title and Adopt a buddy today could placed where you think looks best

section 2
would have the featured pet cards
implement a transition fade in
button to get another featured pets cards with another transition

If we divide navbar with "logo" to left and menu to right I believe that is a good improvement.

Create a page for user login and user register page could include email, username, password.

If possible, add validation checks.

For the navigation bar, implement a drop down from react-bootstrap, and then add links to login and register. The title could be Profile

Planning to implement supabase to handle the data.

Clicking on a different pet type doesnt take u to the page and the link changes to http://localhost:3000/pets/pets/horse

Add some organizations or places to donate in charities.json

Feel free to create a pull request since there could be a lot of organizations or places

If anyone wants to implementing some tests. I am not too familiar with it

Currently displays one page of pets

using this link https://api.petfinder.com/v2/animals?type=${type}&location=${zipCode}&limit=10&page=1, in PetType.js

implement a next and previous button in PetType.js to view the next page of pets

first paragraph has nested <p> in Resources.js

separate them

Feel free to modify or update the paragraphs

Maybe a more elegant placeholder image?

Featured Pets of the Day/Week either in a Card or Gallery

Clicking on the image takes u to the pet and hovering shows more images

Feel free to remove the animation in home.css

Any more ideas are welcome

Maybe store it in localstorage or something so there won't be in constant requests in App.js?

Unless someone has a better solution

 const [token, setToken] = useState("");
  useEffect(() => {
    axios
      .post(
        "https://api.petfinder.com/v2/oauth2/token",
        `grant_type=client_credentials&client_id=${process.env.REACT_APP_PETFINDER_KEY}`
      )
      .then((response) => {
        setToken(response.data.access_token);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

Update readme so beginners or newcomers clone project, set up a working environment, tips for new contributors, navigating through the project, links to bootstrap and react-bootstrap, mention each page has their own folder and anything you can think of

If there are any ideas you could think of, could make an issue or pr

create a new page that has a list of sites of donating to pet adoption places

May want to look at the docs to see how it is structured

docs

If you know any more charities, feel free to add them to charities.json. RIght now it is three.

Also taking suggestions to improve the site or add new features to the donate page

Some pet names get too long and extend the card height.
Maybe set a max number of characters for the pet name.
Open to suggestions.

also uneven

Add <NavDropdown.Divider /> in the dropdown in the NavigationBar to separate All Pets

zip code filter takes up two lines

and then have links to dog, cat, bird, horse, rabbit

Could have a Contributors section in the About Page and then have a link to this repo.