Skip to content

Latest commit

 

History

History
122 lines (72 loc) · 4.54 KB

README.md

File metadata and controls

122 lines (72 loc) · 4.54 KB
Raw

Adopt A Pet

A Vue.js app for pet adoption, with pet data fetched from the Petfinder API. Visitors can view and save pets, search with keywords and/or filters.

Table of Content

It might take some time to load up the server.

Final Product

Landing Page

Landing Page

User can:

  • View all pets by clicking Start Looking / View all pets in the nav bar
  • View liked pets by click the heart button at the top right corner

View All Pets Page

All Pets

User can:

  • Click on any pet cards to view the details of the pet (opens in a new window).

  • Like/unlike any pets by clicking the heart icon on the top right corner of the pet cards. The color of the heart icon indicates if the user has liked the pet.

  • Show/hide filter and sorting by clicking the buttons at the top right corner. Only one (of sorting, filter) is shown at a time.

  • Enable/disable location by clicking the gps icon at the top left corner. The filter/sort with distance function only works when the location is enabled.

All Pets - Filter with location

Filters with enabled location: user can filter with distance from current location

All Pets - Filter

Filters with disabled location

All Pets - Sort with Location

Sorting with enabled location: user can sort result with distance from current location

All Pets - Sort

Sorting with disabled location

Pet Details Page

Pet Details Pet Details Pet Details

User can:

  • View all the media on the left

  • View details on the right, including a link to the pet profile on Petfinder

  • Like/unlike the pet by clicking the heart icon on the top right corner of the pet cards. The color of the heart icon indicates if the user has liked the pet.

Liked Pet Page

Liked pets

User can:

  • View all the pets that the users has liked. Status of the pet is shown on the card if the pet is no longer adopable.

  • Click on any pet cards to view the details of the pet (opens in a new window).

  • Like/unlike any pets by clicking the heart icon on the top right corner of the pet cards. The color of the heart icon indicates if the user has liked the pet.

Dependencies

Frontend

Backend

Getting Started

  1. Clone or download this repository onto your local device.
  2. cd to the folder where this project is cloned.
  3. Install all dependencies with npm install command.
  4. Create a .env.local file by copying the contents from .env:
  • Set up your PostgreSQL database for this project and fill in the values for DB_HOST, DB_USER, DB_PASS and DB_NAME
  • Get API key from Petfinder API and fill in the values for VUE_APP_ID and VUE_APP_SECRET
  • Fill in the SECRET value for the cookie sessions
  1. Create tables in the database with the files in server/db/schema.
  2. Run the server with npm start command.
  3. Run the app in the development mode with npm run serve command.
  4. Open the broswer and visit: http://localhost:3001/.

Credits