This React Capstone project is a browsable catalogue of pets using React and Redux that enables users to filter and access details of a specific item.

Last update: Nov 16, 2021

Catalogue Of Pets

This React Capstone project is a browsable catalogue of pets using React and Redux that enables users to filter and access details of a specific item.

Search Page

screenshot

Details Page

screenshot

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. it has three functionality.

  • Page with a list of pets that could be filtered by animal type
  • Page for displaying lists of a particular animal type
  • Page for displaying deatails of a particular pet

Built With

  • React
  • PetFinder API
  • Redux
  • Hooks
  • Router
  • Css
  • NodeJS

Live Demo

Live Demo Link

Prerequisites

  • NodeJS
  • React

Getting Started

To get a local copy up and running follow these simple example steps.

  • Git clone repository https://github.com/Davidosky007/catalogue-of-pet.git
  • Cd to the project directory cd catalogue-of-pet
  • Install dependencies npm install
  • On the terminal run npm start to open up live server
  • To run test Type npm run test in the terminal

๐Ÿ‘ค David Bassey

๐Ÿค Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a โญ๏ธ if you like this project!

Acknowledgments

๐Ÿ“ License

This project is MIT licensed.

GitHub

https://github.com/Davidosky007/catalogue-of-pet
You might also like...

:eyes: A React component that adds pan and zoom features to SVG

react-svg-pan-zoom react-svg-pan-zoom is a React component that adds pan and zoom features to the SVG images. It helps to display big SVG images in a

Jun 21, 2022

๐Ÿ™ A configurable and flexible React component wrapper around PhotoSwipe.

๐Ÿ™ React component wrapper around PhotoSwipe

Jun 12, 2022

React library to support easy zoom, pan, pinch on various html dom elements like images and divs

react-zoom-pan-pinch Super fast and light react npm package for zooming, panning and pinching html elements in easy way Demo Docs Features ๐Ÿš€ Fast and

Jun 13, 2022

A collection of responsive, image magnifying React components for mouse and touch.

A collection of responsive, image magnifying React components for mouse and touch. Useful for product images in ecommerce sites, image galleries, stock photos, etc.

Jun 23, 2022

Minimalistic image gallery for react. Responsive with all important features and smooth animations.

Minimalistic image gallery for react. Responsive with all important features and smooth animations.

imager Minimalistic image gallery for REACT. Responsive with all important features and smooth animations. DEMO Desktop Phone Slow internet connection

Jun 12, 2022

Avatar Uploader: A React component to upload and crop avatars

Avatar Uploader A React component to upload and crop avatars. Challenge This cha

May 25, 2022

A lightweight react wrapper for creating fluid galleries as seen on Flickr and Google Images

A lightweight react wrapper for creating fluid galleries as seen on Flickr and Google Images

A lightweight react wrapper for creating fluid galleries as seen on Flickr and Google Images, based on Pixabay/JavaScript-flexImages

Apr 7, 2022

A simple slideshow component built with react that supports slide, fade and zoom effects

React-Slideshow A simple slideshow component built with react that supports slide, fade and zoom effects. For full documentation click here Installati

Jun 10, 2022

React component to compare two images with a slider

React component to compare two images with a slider

React Compare Image Simple React component to compare two images using slider. NOTE: Vue.js Version is also available! Demo & Sample codes Demo & Samp

May 22, 2022
Comments
  • 1. Catalogue Of Pets Feature-1

    Catalogue Of Pets Feature-1 In this project

    • PetFinder API was used
    • Data coming from the backend API was displayed as a list of items and filter functionality was implemented
    • Made sure that users can display details pages for each item from the backend API data
    • React testing library was used for testing
    • Heroku was used for deployment
    • Two types of pages were added (for filtered items by some parameters, and for item details)

    dear reviewer here is a link to my video presentation.

    Reviewed by Davidosky007 at 2021-07-06 15:01
  • 2. Peer to Peer code review 9th July 2020 #Team Yavins

    • Understand why you use applyMiddleware of Redux and how it works well
    • Customized well with an interesting concept of pets
    • Explained well how action, reducer work in React & Redux
    • You can use .env file to hide your secret keys for access APIs
    Reviewed by yocosaka at 2021-07-09 08:03
React 360 Product Viewer - Let your users view your product or 3D renders
React 360 Product Viewer - Let your users view your product or 3D renders

React 360 Product Viewer Let your users view your product or 3D renders using mouse/touch or set it to autoplay! See it in action in storybook ยท Repor

Jun 20, 2022
Beautifully crafted unique avatar placeholder for your next react project
Beautifully crafted unique avatar placeholder for your next react project

Avvvatars Beautifully crafted unique avatar placeholder for your next react project Lightweight and customizable โค๏ธ demo.mp4 Live Demo ?? | Website ??

Jun 4, 2022
Find and record your favourite photo spots. Built using React using Google API.
Find and record your favourite photo spots. Built using React using Google API.

Photo Locations Photo Locations is a personal project. When travelling with family or friends, you often don't have enough time to extensively researc

Mar 8, 2022
Core medical image viewer components built using React

Core medical image viewer components built using React

May 25, 2022
๐ŸŒ„ Image editor using native modules for iOS and Android. Inherit from 2 available libraries, Brightroom (iOS) and PhotoEditor (Android)
๐ŸŒ„ Image editor using native modules for iOS and Android. Inherit from 2 available libraries, Brightroom (iOS) and PhotoEditor (Android)

?? Image editor using native modules for iOS and Android. Inherit from 2 available libraries, Brightroom (iOS) and PhotoEditor (Android)

Jun 16, 2022
Recreate one image using the tiles from another image.
Recreate one image using the tiles from another image.

Mosaic Recreate one image using the tiles from another image. https://mosaic.constraint.systems About the algorithm The image proccessing works like t

Mar 30, 2022
React hooks for generating Barcode for your next React apps.
React hooks for generating Barcode for your next React apps.

react-barcodes React hooks for generating Barcodes. Live demo ?? Features Compatible with both JavaScript and TypeScript Generate as SVG, Canvas and I

Jun 13, 2022
React-image-viewer - An image viewer example for react.js

React Image Viewer Demo Installation npm i react-image-viewer-dv Usage import {

Jun 14, 2022
React Photo Album - a responsive photo gallery component for React
React Photo Album - a responsive photo gallery component for React

React Photo Album React Photo Album is a responsive photo gallery component for React. React Photo Album supports rows, columns, and masonry layouts.

Jun 16, 2022
React Image and Background Image Preloader and Fade in. Load those images in smooth!

React Image and Background Image Fade Fade in images AND background images easily in React ?? ! Demo and Docs are live! react-image-and-background-ima

May 24, 2022