CST-336: FA-2022 - Final Project Documentation

Students: Angela Cheng, Ben Textor, Janet Pham

Title: PetPal

Description: PetPal is a user-friendly and reliable pet services database. Users can register
their pet(s), review available pet-related services and providers, and create reservations with our
collection of thoroughly-vetted service vendors. Users can also search our database of pet
names to get ideas for any new fuzzy friends they are planning on welcoming into their homes.
We also provide randomly generated images of pets, and pet names to give users ideas.

Task Distribution:
Angela: CSS editing, code clean-up and editing
Ben: Initial shell, log-out mechanism, CSS styling, code debug and troubleshooting
Janet: Database design. sign-in mechanism, forms, general design, CSS

Changes:
- Home Page: Navigation bar with home, about, random pet generator, pet lookup, and
pet services was what we started with and then we added registration and a log-out
feature. Below the nav bar was an overall summary what the website does, but it was
moved to the about page. We also added a log-in and sign-up feature to allow access to
only certain pages to registered users. The final thing we added to the page is unsplash
api images of dogs that randomize everytime the page is reloaded.
- Random Pet Generator: Shuffles through the database of names and loads the random
image of a dog.
- Pet Registration: Can only be accessed if logged in and contains more form elements
than we anticipated.
- Pet Name Lookup: Goes through the database, pet_registration, to lookup names.
Added the chart for a full view of the database that includes the pet’s name, species, and
breed.
- Pet Services Lookup: can only be accessed when logged-in. It will also lead to editing
and deleting the appointment.
Database Schema:
● customer_table: keeps track of the customers logging in/registering their information,
which includes their first and last name, email, phone number, zip code, and password
and username.
● pet_registration: keep track of the pets after logging in the customer. This table
consists of the pet’s name, gender, age, breed, and the owner’s name.
● pet_reservation: a table that tracks the pets’ services after logging in and going through
the process.

Screenshots:
Home Page:

Fetch Calls: Fetch calls can be found on lines 38, and 128 of index.js.
Rubric:

Minimum requirements:
Final Report must include Title, Description, Task distribution, Changes from -20pts (if missing any)
original design, Database Schema and Screenshots of finished product

Project uses at least three database tables with at least 10 fields (combined)

JavaScript and CSS code must be in external files

Upload all files as a zip file, including database records (export it in SQL
Format)

Feature Requirements:

Requirements Points

Project allows user interaction with at least three different types of form elements (text box, 15
select, radio, checkbox, etc).

All in the pet registration page, which contains the form elements: text box, select, and radio.

Project uses Web storage or Sessions 15

Project allows users to update existing records in the database, in a friendly way (data is 15
pre-filled). Must update at least three fields.

After logging in and reserving one of the four pet services that are provided, users can edit and delete the service,
time, date, pet name, and select a pet breed. The information is all pre-filled.

Project allow users to add records to the database 15

Add new records as a new user, pet registration, and pet services.

Project must have at least 50 lines of client-side JavaScript code (e.g. form data validation, API 15
calls, etc.)

Project includes at least two local or external Web APIs 15

As part of your submission, please explain where the Fetch calls are.

- Unsplash api images of pets in index.ejs, code is in index.js.

- TheDogAPI which list dog breeds in the petserv /pet services lookup for the pet breed.

Project has a nice, professional and consistent design, free of typos. 10

Uses at least 50 CSS properties or Bootstrap.