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 1 month 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 (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-05T15:03:31.000Z (about 3 years ago)
- Last Synced: 2025-04-07T00:48:29.050Z (about 1 year 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: 1
- 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.