https://github.com/simonapiz/adopt-a-pet

A pet adoption website with React Router v6
https://github.com/simonapiz/adopt-a-pet

codecademy-solutions front-end-development react-router reactjs web-application

Last synced: about 9 hours ago
JSON representation

A pet adoption website with React Router v6

• Host: GitHub
• URL: https://github.com/simonapiz/adopt-a-pet
• Owner: SimonaPiz
• License: mit
• Created: 2023-05-03T12:02:50.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-06-05T15:03:31.000Z (over 1 year ago)
• Last Synced: 2024-12-20T12:38:04.592Z (about 2 months ago)
• Topics: codecademy-solutions, front-end-development, react-router, reactjs, web-application
• Language: JavaScript
• Homepage: https://adopt-a-pet_simonapiz.surge.sh/
• Size: 3.47 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Adopt a Pet - Web App

> A React app to practice React Router v6

Here is a working live demo [https://adopt-a-pet_simonapiz.surge.sh/](https://adopt-a-pet_simonapiz.surge.sh/)



## Table of contents

* [About this project](#about-this-project)

* [Objective](#objective)

* [Technologies](#technologies)

* [Setup](#setup)

## About this project

In this project, I practice using React Router to add client-side routing to a React Application. 

I building a pet adoption website that allows users to view all the animals of a particular species and view the profiles of specific animals.

- Currently, the app renders a `HomePage`component that fetches and displays all adoptable pets.

    - **src/pages/home/index.js**

- We have also built a `PetDetailsPage` to display the details for a particular pet.

    - **src/pages/detail/index.js**

> Use this database for mock data [Urgent Need for Pet Adoption - Find Dogs & Cats & More | Petfinder](https://www.petfinder.com/)

## Objective

The objective is to **add client-side routing to the application** using React Router so that:

- The `HomePage`component responds to the browser’s current URL by displaying only pets of the species the user wishes to view.

- The `PetDetailsPage`page displays when the browser’s current URL includes a specific pet’s `id`

    - It displays data for the correct pet based on the `id`in the URL parameters’ values.

- When the user searches for a pet in the search bar, they are redirected to the `SearchPage`, which uses the query parameter called `name`to filter pets by name.

- When a user clicks a pet whose details are not available, they are redirected to a `PetNotFoundPage`

- From the `PetNotFound`page, users can click “**Go Home**” button that will take them to the root path page.

## Technologies

- React 18

- React Router 6

- uses Mock Service Worker (MSW) to replicate the functionality of an external API.

## Setup

To run this project, install it locally using npm:

```

$ cd ../[directory]

$ npm install

$ npm start

```

## License

MIT

## Acknowledgements

This project comes from the [Codecademy's Front-End Engineer](https://join.codecademy.com/learn/paths/front-end-engineer-career-path-b/) course.