Pet Search Angular

A website to search available pets for adaption within a given zip code. Users can enter a zipcode or have their browser locate them.

Website was made with Angular v18 and ASP.NET Web Api v8. Angular application hosted at Vercel 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.

Angular Application Live Demo

ASP.NET Swagger UI

Preview

Technology Stack

Frontend Application

• Angular
• Tested with jasmine
• Angular Material
• Vercel 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
• Angular CLI

Running the Production Build

1. Clone this repository:

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

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

cd pet-search-angular

ASP.NET Setup

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

Running in Development

Setup Angular

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

cd pet-search-angular

2. Install npm dependencies:

npm install

3. Test the application: Run ng test to execute the unit tests via Karma.

ng test

4. Build the application: Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

ng build

Configure Angular

1. Go to the Angular application directory:

cd /pet-search-angular

2. Change the port inside the file: src/environments/environment.development.ts to the port that your ASP.NET application is using or your server of your choice.

Run the Angular Application

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

ng serve