🐾 Fetch-Pups

Visit live site: https://skydodle.github.io/fetch-pups/

Table of Contents

• Overview
• Getting Started
• Installation
• Features
• Tests

Overview

fetch-pups is a web application to help dog lovers search through a database of sheltered dogs to find the perfect match for adoption.

Tech Stack

• React
• Typescript
• Tailwind CSS & MUI Components
• Github Pages

Packages

• react-router-dom
• axios
• react-responsive-carousel
• react-confetti

Getting Started

Demo site login & usage

The demo live site is hosted on Github Pages here.

1. To get started at login page just enter any name you'd like and any made-up email (It can be made up as long as input is in correct email format).
2. Once you log in you can start searching thru the database.
   • The default filters are with breeds American Staffordshire Terrier & Yorkshire Terrier. You can delete those default breeds from the filter to view all breeds, or add new breeds to the filter.
   • The default sort is by breed alphabetically ascending, click on Sort button to switch to descending.
3. You can add dogs that you liked to favorites. Your personalized favorites can be access in the search tool bar aobve the search results.
4. Once you have 1 or more favorites, click on the Match button and a dog match will be generated from your favorited list.

Development Prerequisites

Important

This repository is mainly for showcasing my frontend project on the live site. The API that I used to get data is a private API that may have usage limits and is not for public development. Therefore, the API url is encrypted in my local env file and do not exist in this repository. If you are really interested in building an app with it, DM me on LinkedIn.

What things you need to install the software and how to install them:

• A good IDE/ code editor such as Visual Studio Code
• Have Git installed on your device globally

Installation

1. Clone the repo & install with npm

   git clone https://github.com/Skydodle/fetch-pups.git
   cd fetch-pups
   npm install

2. Start the development server

   npm start

Features

List of main features:

• Search by zip code 🔍 : takes up to 100 zip codes and show all dogs that match the zip codes.
• Search by filters 🔍 : breed, age range (set minimum & maximum).
• Favorites list 💟 : you can save each dog you like to your personal favorites list, this list is also persisted with your device so that you can continue to access & modify it on your next login.
• Match Generator 🐕 : one perfect match dog will be generated from your favorites list.

Tests

To run tests:

npm test