https://github.com/murodjon000/pets

This project was built as a React & Redux Capstone project at Microverse. It is based on the idea of a "Catalogue of Recipes" which is a single-page application with React and Redux.
https://github.com/murodjon000/pets

js react redux

Last synced: about 1 month ago
JSON representation

This project was built as a React & Redux Capstone project at Microverse. It is based on the idea of a "Catalogue of Recipes" which is a single-page application with React and Redux.

• Host: GitHub
• URL: https://github.com/murodjon000/pets
• Owner: Murodjon000
• Created: 2021-04-30T10:09:00.000Z (over 3 years ago)
• Default Branch: development
• Last Pushed: 2021-05-06T13:38:51.000Z (over 3 years ago)
• Last Synced: 2024-10-06T17:48:22.901Z (about 1 month ago)
• Topics: js, react, redux
• Language: JavaScript
• Homepage: https://pets-finder.netlify.app/
• Size: 2.19 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Pets Catalogue

### Search page

![Photo](./readme.png)

### Details page

![Photo](./readme-1.png)

# About the project

This project was built as a React & Redux Capstone project at Microverse. It is based on the idea of a "Catalogue of Recipes" which is a single-page application with React and Redux.

It shows a browsable list of pets that users can filter and access to the details of each pet. Every page, the main page, and pages for each item have a unique route within the Single Page Application, SPA.

I deployed this app to Netlify, so it’s accessible online. The data is retrieved from the PetFinder API. With this API, this app fetches the list data of pets based on the user’s selections. And the retrieved data is stored in the Redux store.

Also with this app, you can see pets and through their details, if you want you can adopt one of them.

This web app has 2 types of pages:

- On the first page you can filter the pet's data with given parameters. You can filter pets with their species, size and gender.

- Second page is the details page which is responsible for the details of pets that you want to see.

## Live Demo

- [Live](https://pets-finder.netlify.app/)

## Introduction Videos

- [Video-1](https://www.loom.com/share/79a7ba8fe01747c98cc104d82dfd8ca7)

- [Video-2](https://www.loom.com/share/a160ad1198e342138cbefb2075cd49f5)

- [Video-3](https://www.loom.com/share/9f9a38632f934aefa4f1a4d35565d54d)

- [React-V-DOM](https://www.loom.com/share/8bc4ed25549a40e49a391adc6dd5a300)

## Built with

- JavaScript

- React

- JSX

- SCSS

- Node

- Redux

- API

## Getting Started

- Clone the repo `[email protected]:Murodjon000/Pets.git`

- cd `into` the project

- Run `git pull origin app`

- Run `yarn install` or `npm install` to install dependencies

- On the terminal run `npm run start` open up the live server

- To run tests write `npm run test` on the terminal

## Author

👤 **Murodjon Tursunpulatov**

- Github: [@murodjon000](https://github.com/murodjon000)

- Twitter: [@MurodjonTursun5](https://twitter.com/MurodjonTursun5)

- Linkedin: [@Murodjon Tursunpulatov](https://www.linkedin.com/in/murodjon-tursunpulatov-5189481b3/)

## 🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check the [issues page](issues/).

## Show your support

Give a ⭐️ if you like this project!

## 📝 License

MIT License