/3rd-sc-5-PIKPET-FE

Hi, this is the front-end repository of PIKPET, a pet adoption support service.🐾

Primary LanguageJavaScript

image

PIKPET - "A communication website for saving abandoned pets and making easier to accessible to pet shelters"

Table of Contents

About PIKPET

image

A website that allows to find similar animals using the image of an animal you want, and provides an application for adoption in a unified style therefore allows easy connection to various institutions at once.

Our goal

image

Over 90% of the puppies distributed in South Korea go through what are colloquially known as "pet shops." These pet shops are closely linked to illegal groups commonly referred to as "puppy mills."

Puppies over 5 months old are considered to have no commodity value and are disposed of. Female dogs are often sold back to puppy mills to breed more puppies, while male dogs are commonly used as food ingredients.

We have set a major goal to become an alternative to the unethical infrastructure of the pet industry, including puppy mills, by increasing accessibility to shelters and breeders.

Components

Frontend

JavaScript React Vite npm Zustand styled-components

Backend

https://github.com/GDSC-KNU/3rd-sc-5-PIKPET-BE

Java Spring Boot MySQL

DevOps

Docker Github Actions Google Cloud Platform

Functions

Login

login

Searching with an image: Recommendation of pets that look similar by comparing breeds, colors, sizes, etc.

Searching by filters: Searching popular categories

Appling for adoption

Viewing details of the pet

upcoming_updates

Implementation of notification service using Firebase

Before visiting a shelter, we use Firebase to receive notifications from the shelter. This allows users to receive updates on animals they have expressed interest in.

Addition of Breeder Certification System

Especially for breeders, there is also an opinion that they cannot be trusted, as the operators of puppy mills can pretend to be professional breeders without requiring specific qualifications. we aim to manage the transaction records of breeders to determine if they are certified users.

How to Run

Frontend

  1. Install node.js v.21.1.0
  2. Run git clone https://github.com/GDSC-KNU/3rd-sc-5-PIKPET-FE
  3. Create a .env file in ~/3rd-sc-5-PIKPET-FE to set the environment variables
    Google Maps Platform API key is necessary! Get a key and put it in a variable named VITE_APP_GOOGLE_MAP_API_KEY in .env
  4. Run npm install
  5. Run npm run dev
  6. Access to localhost:5173
  7. Login with the test account (E-mail: test@test, Password: test)

Backend

It is currently on the server. You don't need to run the backend server seperately because the frontend server is connected to the backend server.