Pet Search

A website to search available pets for adaption within a given zip code. Users can enter a zipcode or share their location with the browser to locate their zipcode.

Website was made with React and ASP.NET Web Api. React application hosted at Netlify and ASP.NET Web API hosted at Microsoft Azure.

Pet Search ASP.NET Application GitHub Repository

Live Demo

Note: Pet list or zipcode retrieval may take around 10 seconds during a cold start when the server is reactivated after 10 minutes of inactivity. I'm considering upgrading the server to 'always on' on Microsoft Azure in the future.

React Application Live Demo

ASP.NET Swagger UI

Preview

Technology Stack

Frontend Application

• React with TypeScript and Vite
• Tested with ViTest/Jest and React Testing Library
• React Router
• Material UI
• Netlify Deployment

Backend Application

• C# and ASP.NET Web API
• Tested with Xunit
• Microsoft Azure Web App Deployment
• MySQL
• OpenApi/Swagger
• PetFinder API
• MapBox Geolocation API

Local Development Set Up

Required Dependencies

• Node.js

Running the Production Build

1. Clone this repository:

git clone https://github.com/AmielCyber/pet-search-react

2. After cloning this repository, go to the repository directory:

cd pet-search-react

ASP.NET Setup

Instructions can be found in the repository for the ASP.NET application: https://github.com/AmielCyber/PetSearch

Running in Development

Setup React

1. Go to the frontend application or the React project:

cd pet-search-react

2. Install npm dependencies:

npm install

3. Test the application:

npm run test

4. Build the application:

npm run build

Configure React

1. Go to the React application directory:

cd /pet-search-react

2. Change the port inside the file: .env.development to the port that your ASP.NET application is using or your server of your choice.

Run the React Application

npm run dev