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.

Overview

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.

Issues
  • Catalogue Of Pets Feature-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.

    opened by Davidosky007 0
  • Peer to Peer Code Review on 15, July 2021 #Team Yavins

    Peer to Peer Code Review on 15, July 2021 #Team Yavins

    • Nice hard work for passing all the tests
    • Working well to understand how to create RESt API by following the TDD methodology!
    opened by yocosaka 0
  • Peer to Peer code review 9th July 2020 #Team Yavins

    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
    opened by yocosaka 0
Owner
David Bassey
Full-Stack Developer who also loves pastry making. stacks: Ruby / Svelte/ Rails / JavaScript / React / Node / Express / Redux. Looking for new opportunities!
David Bassey
React carousel image gallery component with thumbnail support 🖼

React Carousel Image Gallery Live Demo (try it on mobile for swipe support) linxtion.com/demo/react-image-gallery React image gallery is a React compo

Xiao Lin 2.9k Sep 20, 2021
: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

Christian 605 Sep 7, 2021
React Comparison Slider is a fully customizable component for building bespoke, keyboard-accessible "before & after" sliders for the web.

React Comparison Slider is a fully customizable component for building bespoke, keyboard-accessible "before & after" sliders for the web. You bring the content and the visuals, and it'll handle the heavy lifting.

Matt Rothenberg 27 Sep 1, 2021
Webcam component for React.

Webcam component for React.

Moz Morris 1.1k Sep 18, 2021
🌄 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)

Baron Ha. 84 Sep 22, 2021
A minimal lightbox package for react ⚛

✨ React LightBox Pack A Lightweight NPM LightBox Package built with simplicity in mind. Since it's built from Scratch it doesn't need any additional d

Mohan Kumar 4 Aug 26, 2021
React for Upload Image Gallery. Drag & Drop, Sortable, Customize.

React Upload Gallery A simple library that lets you create an image gallery, change the order of images, select the highlighted image, and customize i

Minan 40 Aug 26, 2021
React lightbox component

React Image Lightbox A flexible lightbox component for displaying images in a React project. DEMO Features Keyboard shortcuts (with rate limiting) Ima

Frontend Collective 1.1k Sep 12, 2021
Render images as interactive particles

react-particle-image Render images as interactive particles Install npm install --save react-particle-image Links Demo (source) Docs Simple Usage code

Austin Malerba 333 Sep 16, 2021
🌄 A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS

React Images ⚠️ Warning! Don't use this in a new project. This package hasn't been properly maintained in a long time and there are much better option

Joss Mackison 2.3k Sep 16, 2021
react library for generating avatar

react library for generating avatar

Chill Lab 519 Sep 15, 2021
React Photo Gallery

React Photo Gallery Responsive, accessible, composable, and customizable image gallery component Maintains the original aspect ratio of your photos Cr

Sandra Gonzales 1.6k Sep 10, 2021
simple image slider component for react

simple image slider component for react

kimcoder 58 Sep 16, 2021
A component to reveal images on user interaction, written with TypeScript + React.

A component to reveal images on user interaction, written with TypeScript + React.

Nik 67 Aug 20, 2021
lightGallery - A customizable, modular, responsive, lightbox gallery plugin

lightGallery - A customizable, modular, responsive, lightbox gallery plugin

Sachin N 4.7k Sep 15, 2021
An app for uploading images developed in the eighth React Track challenge in Ignite

Front end application ?? An app for uploading images developed in the eighth React Track challenge in Ignite delivered by Rocketseat ?? Technologies u

Matheus da Cruz 5 Jul 29, 2021
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

Shota Tamura 209 Sep 21, 2021
A React component for viewing large images up close 🔍

react-intense This component is a port of Intense Image Viewer for use with React. Demo. Usage Simply replace your <img> element with a <ReactIntense>

Bryce Dorn 158 Jun 21, 2021
Vue library for generating nice user avatar. (Inspired by react-nice-avatar)

holiday-avatar Vue library for generating nice user avatar. (Inspired by react-nice-avatar)

炽翎 31 Sep 11, 2021