Professional Documents
Culture Documents
_______________
A Capstone Report
Presented to the
_______________
In partial fulfillment
Bachelor of Science
in
Computer Science
_______________
By
John Fleischli
Levi Remington
Erik Stanton
_______________
Fall 2020
EXECUTIVE SUMMARY
The purpose of PetRecs is to provide pet owners with an online application to securely
track, record, and manage their pet’s medical records. The goal was to optimize pet care by
relieving the burden of record keeping, enabling pet owners to become more active,
knowledgeable participants in their pet’s healthcare. This was achieved through the ground-up
development of an online, intelligent record keeping system that provides users with a secure,
account-based platform where important, relevant data can be uploaded, interpreted, and
PetRecs has satisfied these outcomes, as well as the ability to privately share or export pet
profiles. This optimizes the transfer of relevant pet data, giving veterinarians, pet sitters, or
incoming pet owners an easily digestible summary of a pet’s history, medications or health
conditions. PetRecs empowers pet owners of all ages with access to a digital hub for the personal
EXECUTIVE SUMMARY 2
TABLE OF CONTENTS 3
DESIGN REQUIREMENTS 11
MAJOR FUNCTIONS 11
STORAGE 12
INTERACTIVITY 14
SECURITY 15
DESIGN CRITERION 15
FINAL DELIVERABLES 16
APPROACH & METHODOLOGIES 17
LEGAL CONSIDERATIONS 18
ETHICAL CONSIDERATIONS 19
FINAL APPLICATION 21
TIMELINE & BUDGET 21
USABILITY TESTING & EVALUATION 22
FINAL IMPLEMENTATION 24
MODEL 24
VIEW 28
CONTROLLER 33
DISCUSSION 41
CONCLUSION 43
REFERENCES 45
APPENDIX 46
APPENDIX A 46
APPENDIX B 48
APPENDIX C 49
APPENDIX D 50
PART I
INTRODUCTION
The project is PetRecs, an online pet record management system for pet owners and
veterinarians. Pet owners recognize the need for record keeping when it comes to medical
documents and health information regarding their pet. The proper chronicling of a pet’s personal
medical history can ease the burden of both pet owners and veterinarians, while helping ensure
the pet’s well-being. With how crucial these records are, the issue lies within the physical
medium where all of this invaluable information is most commonly delegated to. The purpose of
the online pet record management system is to transition pet records from the physical space to a
digital hub, where an intelligent and accessible record keeping system empowers pet owners to
The current standard for storing and maintaining pet medical records as a pet owner is
with physical printed copies of vaccine, illness, and veterinary office visit records. This
approach, while common, is extremely inefficient and wasteful. The longer and more detailed a
pet’s essential health history, the more of a burden it becomes to decipher or make accessible to
incoming owners, sitters, or animal health professionals. Finding and interpreting specific
information or records on one’s pet can be an enormous hassle unless properly organized and
maintained. Even if they are well-kept, relying on physical records can be disastrous in the event
of loss or irreparable damage. In addition, pet owners may be overwhelmed when keeping track
of their pet's shots, appointments, medicines, supplements, and other essential health-related
measurements (weight, size, feed, stool, behavior, appetite, teeth, etc.). This problem is
compounded for owners of multiple pets spanning various species that each require different
PetRecs solves these problems by providing pet owners an accessible web application to
store and manage pet information and medical records. It acts as a highly-customizable portal for
all of one’s pets by encompassing data on medical records and individual pet information. If the
pet owner chooses, pet data can be easily viewed by friends or family members, a convenient
sharing feature to assist others in the temporary care of one’s pet. Crucially, veterinarians who
need to input data on a pet into their own system can also be remotely granted access to a
patient’s pet profile, optimizing the client’s pet information transfer process.
PetRecs allows users to have separate profiles for each pet. They are then able to add
information for medical records, specific pet information, and care taking information (food,
medication, walking routine, etc). Specifically, users can track a pet’s records, weights,
medications, and even log custom entries in the pet’s journal. Users can share pet profiles with
veterinarians or other users as long as they know the email address for the PetRecs user they
wish to share their pet profile to. This eliminates the necessity to bring in printed medical records
GOALS
● Provide pet owners with a convenient method to record, view, and share any records
● Streamline the medical record exchange that occurs between a pet owner and a
OBJECTIVES
● Store basic pet information to a profile (age, weight, current conditions, medication, etc.)
● Give accounts access to the pets that others have shared with them
● Manually log observations and measurements to track pet health over time
● Graphic representation of data points over time (i.e. weight over time)
PetRecs was developed by a team of students from California State University, Monterey
Bay for a senior capstone project that showcases the knowledge and experience gained
throughout the Computer Science Online program. The team members gained experience in
The application primarily serves pet owners, but its functionality can extend benefits to
veterinarians, pet sitters, and pet shelters. Anyone who owns, temporarily cares for, or generally
oversees animals that actively require health care or have a history of health problems would
benefit from the tools provided in PetRecs. Even for perfectly healthy pets, the application serves
scrupulous pet owners who seek a means to manage their pet's care in a way that is convenient
Pet owners are one of the user types that benefits from PetRecs. Whether the pet owner
has just one pet, or multiple varieties of different species, the application provides them with the
ability to create and store pet profiles, digitally manage their pets’ essential health history, easily
share the data with those that may need it, and stay on top of necessary care. Pet health records
are usually recorded on paper, which can be easy to misplace or forget about. Pet owners no
longer have to worry about manually organizing their pets’ paper files or carrying them to the
veterinary office. All of their essential information can be easily accessible as digital copies for
Caretakers, such as veterinarians, pet shelters, and pet sitters, are another user type to
realize benefits from the project. If the pet owner uses the application, caretakers also using the
application will be able to receive the desired records with ease. Computer access to the medical
records allows viewing techniques such as sorting by date, filtering out certain record types, and
searching for record titles. Reading and sifting through large amounts of paperwork is
significantly more time consuming than methods that are only available with digital records.
EVIDENCE OF NEED
The group that primarily benefits from PetRecs are pet owners. PetRecs completely
streamlines how information about their pet is stored and organized, granting peace of mind
knowing that at any moment they can quickly obtain access to all of their pet’s medical records
in case of an emergency. PetRecs relieves the burden of maintaining records from multiple
sources by providing a single hub where all pet-related information and notifications can be
managed. Veterinarians also benefit from the product because the transfer of information from
the pet owner will be made easier, meaning they will not have to worry about having any missing
information for a pet or waste the time to have potentially years of medical records scanned into
their system.
information regarding one’s pet that people do not typically have immediate access to. Similar to
how people are starting to have medical records stored on their phone in case of an emergency,
one can utilize this product to immediately grant a veterinary professional access to a pet’s prior
conditions, medications, and allergies. By encouraging the long-term capture and management of
data, the application will help promote an active, health-conscious approach to pet care that
brings pets and their owners closer together, all while providing peace of mind that the data is
ENVIRONMENTAL SCAN
Research of the current market reveals a few other products in the same vein. Most of
these products are solely concerned with the connection between the veterinarian and the pet
owner, and are rather limited in how they allow the user to record data. PetRecs is more
customizable, enabling pet owners with a suite of tools to help them manage and observe data on
their pet in the way they want to. The PetRecs application is centered around the responsibilities
of the pet owner, ultimately assisting them with the proper care of their pet through insightful
Some products, like the popular mobile app PawPrint, offer a suite of tools similar to
what is outlined in this document ("Pawprint - Get your pet's medical records!", 2020). PawPrint
even claims that they will fetch medical records directly from the veterinarians themselves. This
is a remarkably convenient feature that the PetRecs development team will consider
implementing at a later date. As feature-rich as PawPrint is, there are numerous shortcomings
with this application's execution that the PetRecs team will strive to avoid. For instance,
according to user reviews on the iOS app store, PawPrint has a troublesome reminders tool that
automatically marks recurring tasks as done as soon as their due date has passed. There are other
reported limitations, such as the inability to display a pet's age in months, weeks, or days, instead
just rounding down to the year. There is also no way for users to delete medical history, backdate
medications, or edit the frequency of notifications. PawPrint also lacks support for supplements,
food tracking, generic drugs, supply tracking, customizing vaccine entries, or adding animals
under 1 pound. Users also report a frustrating user experience, citing a confusing and
On the business-end of animal healthcare, there are data management applications that
primarily service veterinary practices and their clients. One example is VitusVet, a paid
2020). These products are important to acknowledge because they illustrate the need for
cross-platform data management in the veterinary industry. PetRecs is not designed to bolster
veterinary practices, but it is intended to tangentially assist veterinarians by making it easier for
everyday pet owners to track and share their pet’s health information.
PetRecs resembles PawPrint in function, but differs in form. PetRecs is a desktop web
application, whereas PawPrint is a mobile application for iOS and Android devices. In both
applications, users can register and start adding pets. The development window for PetRecs did
not allow it to be as feature rich as PawPrint, but the developers have aimed to make PetRecs a
more customizable experience overall. For instance, PawPrint only allows for the creation of pets
from sixteen different species, whereas PetRecs accommodates pets from around fifty unique
species. The PetRecs application also supports dog and cat breeds, with data already collected for
over 500 breeds. PetRecs also leverages desktop screen real estate to provide users with a more
immediately informative and intuitive experience compared to the more cramped and simplified
DESIGN REQUIREMENTS
MAJOR FUNCTIONS
record management system. The term “record” here encompasses many important data points,
where the most basic and foundational are a pet’s name, gender, species, breed and birthday.
Crucially, PetRecs also collects advanced records like care notes, profile photos, documents,
logged events, and more granular measurements such as day-to-day weighings and medications.
Within this pet record management system are several key requirement groups that were integral
STORAGE
A user of PetRecs should be able to store their pet’s data through the application such that
when the user closes the application they can rest assured that their data will persist as-is to be
read, edited, added to, or deleted at a later date. In order to fulfill this requirement, the PetRecs
developers have meticulously designed models to correspond with expected data collection and
inserted them into a MySQL database server provided by JawsDB. Then, the database models
were connected to the application’s backend using Sequelize, a multi-dialect object relational
mapping (ORM) service. With this configuration, the PetRecs application is ready to store
queryable data.
EER Diagram to showcase PetRecs’ MySQL Database Structure
INTERACTIVITY
A user of PetRecs should be able to directly interact with stored data via a series of
create, read, update and delete (CRUD) operations that occur out of sight in the application’s
backend. With the database configured, the PetRecs application must be designed to process
requests that affect the data. This was achieved by designing an application programming
interface (API) in the backend such that HTTP requests could be made to specific routes from
the front end to trigger RESTful services in one of the various model controllers. The controllers
then utilize the Sequelize ORM to directly apply selected CRUD operations to the connected
MySQL database. With an established API, PetRecs users are able to interact with the stored
A user of PetRecs should—by default—be the only one authorized to read, edit, and
delete their own data. In order to fulfill this requirement, the PetRecs developers needed to
design a solution to authenticate the user and then upgrade the existing API to test for
authorization before c arrying out specific calls to the database. To execute this task, the PetRecs
team employed the services of Express-Session, a simple but effective cookie-based middleware
designed to store user sessions. The first step to making cookies meaningful was to create a
session store in the existing MySQL database. This ensured that whenever a user visited the site,
a cookie was being generated by the application and stored in the database to persist for its
predetermined lifetime.
Next, after the creation of authorization middleware to block all API requests from
unauthorized users, an account controller was created to openly handle API requests for
unauthenticated users by granting them access to account registration and login services. The
registration route would save the user’s information to the database, but only after hashing the
user’s password with bcrypt. The login route would check if an email existed in the Accounts
database, and then compare the hash of the input password to the stored hash in the database. If a
successful login occurs, the account controller appends a unique cookie to the user, successfully
authenticating them and granting the user access to their account’s data.
DESIGN CRITERION
The budget for this project was planned from the start to be minimal. This expectation
has informed the overall design criteria, resulting in realistic goals that have been met through a
general adherence to the initially proposed timeline. Among these goals were specifications for
performance, reliability, and cost. The developers set out to design PetRecs such that it performs
quick and responsively. This meant that the API needed to be coded efficiently, returning only
necessary data to minimize hang-ups, and it also meant that some of the project's limited budget
would have to be spent on a capable Heroku dyno to be able to process the application's requests
intelligent database design built upon battle-tested data management systems. The budget toward
Heroku also plays a role in ensuring consistent, reliable operation of the PetRecs application.
Since the budget is small, the PetRecs team has made use of free, open-source libraries and
frameworks to build the application code, set up the database servers, and provide security to the
user. Free licensed art has also been leveraged to add some style to the website without
FINAL DELIVERABLES
The final deliverables for PetRecs include the developed and deployed PetRecs web
application, a detailed report and video presentation on the project, a historied Pivotal Tracker
link illustrating the project’s development, a link to the project’s GitHub repository and a report
The PetRecs website is deployed and hosted with Heroku, where pet owners can store
medical records, track health data, and keep track of important pet related events. All features are
functional and bug-free, so the website and services can be used without any limitations.
A final written report describing all of the thought process and work behind the
development of PetRecs. The report includes the proposed problem and how PetRecs is the
solution, details about the design and functionality, as well as legal and ethical considerations
that the team took. The team also created a video presentation that was shown to attendants of
the Fall 2020 Capstone Festival. The video explains our motivation for developing PetRecs and a
demonstration of the main features that were completed before the end of the project’s timeline.
The project’s repository was hosted on GitHub and our project planning was done with
Pivotal Tracker. Multiple branches were used to separate features that were still in progress with
those that were fully developed, all with commits detailing what each team member completed.
Pivotal Tracker was used to track project progress, keeping track of which tasks were in progress
and which were still not complete. Pivotal Tracker provides a detailed project history, outlining
The main focus behind the research for PetRecs was to understand what data and
information is most beneficial to store for pet owners and veterinarians. The PetRecs team
conducted interviews with samples from the intended audience to more accurately assess
essential features. The team also examined feedback of similar products to see where they fall
short. Finally, the PetRecs team also conducted user tests with members from the target
demographic, closely observing their interactions with late-stage builds of the site to track how
accessible its features were. This data was analyzed to form an actionable plan on improving the
site.
Internal research was also necessary to make sure the application supported the basic
needs of each pet owner. This includes verifying that PetRecs has options for all different types
of dog/cat breeds, as well as identifying what other types of pets should be offered. Initial
selections have been based on pet-type popularity, with extra considerations for species that
commonly require medical information be tracked and organized. The final approach in the
team’s research was to take inspiration from the team’s collective pet ownership background.
PetRecs was inspired by personal experience, and understanding what was needed to make this
project successful required insight into what pet owners personally want to see in a pet record
manager.
As this application utilized some technologies that the PetRecs developers were
unfamiliar with, another major aspect of the team’s methodology was to consume official
documentation and reference enthusiast forums for clarification on the various frameworks and
libraries that proved integral to the PetRecs experience. There were also many internal
discussions within the dev team on best practices in both code and UI design. Each member of
the team demonstrated a personal interest in making PetRecs the best that it could be, and every
sprint the team brainstormed agendas and delegated responsibilities to maximize the quality of
LEGAL CONSIDERATIONS
Complying with privacy laws are a primary concern of any development team working
on a project where storing information is the main focus. California Civil Code 1789:29 requires
authorization. It is important to only keep information that is necessary for the application to
fulfill its purpose and to keep user information safe from any attacks. The application does not
seek or store any unneeded personal information, such as home address, phone number, financial
payment information, or any other unnecessary information. The application does not track or
store any unnecessary technical information from users, such as geo-location information, IP
addresses, or monitoring the application usage per user. Passwords are never stored; instead, they
are hashed using one-way bcrypt encryption to safeguard the password from ever being
It is also important for the application to emphasize that any advice given should be taken
with the acknowledgement that on the subject of animal care, different doctors have different
opinions, so we are not be held liable for any damage caused through the use of of PetRecs, be it
indirect, special, incidental or consequential damage. Before users can finalize account creation,
they must accept PetRecs’ Terms of Service and acknowledge that we are not responsible for any
harm that may happen to their pet, especially if they are making decisions without their
veterinarian’s recommendation. We are not assuming responsibility for the full care of one’s
pets, nor are we responsible for any harm if the application malfunctions or ceases functionality.
ETHICAL CONSIDERATIONS
computer access, can be dividing and possibly harmful to those who do not have access. With
these considerations in mind, the release of an application like PetRecs should not be deemed
unethical. While there are many benefits that the application and service can provide, they do not
necessarily give a user, one who has computer and internet access, any distinct advantage in life
Additionally, the developers of PetRecs are cognizant of the sensitive emotional context
inherent with pet care, and are using their best professional judgement to provide software that is
user friendly, inclusive, and sufficiently tested before deployment. Much care was taken when
considering how user data should be stored and protected, as users of the site are entrusting the
developers to handle this data carefully and securely. Long term considerations for the project
include consistent reevaluations of the application's data protection methods to prevent inevitable
new security vulnerabilities, maintaining transparency with users if the development team ever
decided to transition PetRecs into a profitable service, and continuously ensuring that the
FINAL APPLICATION
The timeline and milestones outlined in the project’s proposal were successfully met on
development team ran into several obstacles that needed extra time and were extended into later
sprints. To continue to stay on schedule and not fall behind the established milestones, it was
necessary to adjust the scope for some of the functionality and goals originally set for the project.
The expenses for the project stayed within the monetary budget with only minimal costs
necessary for the deployment server on Heroku. The allotted time budget was exceeded by
almost 50% of the original estimation. This was primarily due to the learning curve the team had
to deal with by using React. The budget for time was able to be adjusted accordingly once there
was a better understanding of how much time was necessary to properly utilize react and other
unfamiliar technologies.
USABILITY TESTING & EVALUATION
Usability testing was performed for the PetRecs application with a focus group of pet
owners who matched the target audience. The target audience for PetRecs is very broad as it is
designed to be accessible and available for all pet owners as long as they have access to a
computer. There were 4 documented testers, each different ages, with varying comfort levels
with technology. This allowed for feedback from different perspectives on the user experience
and the ease of use. The testing was designed to get feedback from the user based solely on their
experience with the application as well as their clarity and understanding of how to use it and its
main functionalities.
The web application was tested by having users attempt to navigate and use the website
under normal conditions, without assistance. They were asked to complete multiple tasks that
relate to their respective user groups, i.e. ‘Create a user account’, ‘Add a pet to your account’.
It was important to improve features and make them easy for users to understand without any
assistance. There was a focus on watching when the users got stuck or had difficulty
understanding what they were supposed to do. A lot of feedback was based on small UI tweaks
to smoothen out the user experience. This was valuable information to the development team and
conjunction to get likert ratings of how well the features worked and the users’ opinions of their
experience. The surveys were broken into sections for each area of focus and core functionality.
It allowed us to get information on the experience for each individual section of the application.
This feedback, on top of the observations made during testing resulted in several improvements
to the accessibility of the application. It gave the development team insight into what areas the
users were confused with or didn’t understand the use for. The testing performed followed
closely to the development teams usability test plan. It was decided to leave out separate testing
for the veterinarians due the lack of differences in the user experience and change in scope for
the project. The usability testing plan proved to be adequate to receive insightful feedback to
For testing to be performed, testers needed to be using a computer with a web browser to
access the deployed web application. It was required that it take place in person or online using
screen sharing software. This was to allow observation of the user experience and response to
having to figure out how to perform the task. Testing documents including a tasks list and a
survey were needed and put together for organization and ease of testing procedures.
Predetermined tasks (Appendix B) were organized to give a natural flow through the
functionality of the application. The tasks walked the user through all of the application’s main
functionality. Surveys were designed and written to get feedback based on multiple factors and
opinions the users may have had. A report was written after all tests were conducted and user
experience surveys were complete and analyzed. The report gives a minor background of each
tester, their general experiences, and the improvements we were to make after focus group
FINAL IMPLEMENTATION
PetRecs is a web application built on a modified MERN stack: MySQL, Express, React,
and Node.js. This modular software framework creates a separation between the front-end
(React) and the back-end (MySQL, Express, Node.js) to enable parallel development. As such,
the project’s functions can be separated into the three interconnected parts of the
Model-View-Controller (MVC) architectural pattern. The Model holds all functions representing
the PetRecs database, the View holds all functions displaying content to the user, and the
Controller holds all functions that manipulate the data upon user input.
MODEL
PetRecs data consists of Accounts, Account Types, Breeds, Species, Pet Events, Event
Types, Pet Medications, Pet Records, Pet Weights, and Sessions. Inside the models folder, each
of these models is defined in their respective .model.js file, where the Sequelize ORM is
employed to create a MySQL table to represent the model’s data columns. Not much logical
computation is going on in these files, but care is taken to minimize data repetition in the design
such that the data is normalized, and appropriate restrictions are applied to the data such that bad
data can not breach into the MySQL tables. Below is the code for pet.model.js, the most complex
Within the models folder is also the index.js file, which establishes a connection to the
MySQL database server using Sequelize, and exports a db object containing all of the PetRecs
models to be used in the controllers and server.js. The contents of the models/index.js file can be
seen below:
db.Sequelize = Sequelize;
db.sequelize = sequelize;
module.exports = db;
Within the middleware folder, there are two key files to aid in user authentication. The
first file, session.js, h elps configure a new session for the user by setting up a session store in the
module.exports = session({
secret: "62-gaQuAnqY317N>`OM-FlW:IuLElx", // store something cryptic in env
later
store: sequelizeSessionStore,
resave: false,
saveUninitialized: false,
name: 'sessionId',
proxy: true,
cookie: {
//sameSite: true, // helps prevent CSRF attacks
secure: false, // if true: only transmit cookie over https
httpOnly: false, // if true: prevents client-side JS from reading the
cookie.. set to false to access cookie in React
maxAge: 1000 * 60 * 30 /
/ session max age: 30 minutes
}
});
The second file, authenticate.js, establishes some basic route blocking for unauthenticated users:
module.exports = authenticate;
VIEW
Located in the client folder, the view consists of the PetRecs front end React app. This
app holds static files, CSS files, utility functions, and most importantly components that render
views for the user. Depending on the router path, specific components are rendered to the screen
that allow users to view and interact with the PetRecs data. These components range from the
simple Footer that displays static data, to the more complex Pet Scene that makes numerous
Axios requests and passes data down to the child components to be dynamically rendered. Some
components are re-used in others, like the Pet NavBar or Pet Card, while others are designed to
represent a singular page, like the Pet Creation page or the Homepage. Reusable components are
located in the client/src/components folder, while one-time-use components are located in the
client/src/pages folder.
The main app.js file located in client/src/App determines what component to render
based on the routed path and if the user is logged-in or not. Props are passed to some components
function App(){
return (
<div id="container">
<Router>
<Switch>
<Route path="/" exact component={()=>isUserLoggedIn()?<Redirect
to={"/pets"}/> : <HomePage/> } />
<Route path="/login" exact component={()=>isUserLoggedIn()?<Redirect
to={"/pets"}/> : <Login/>} />
<Route path="/register" exact component={()=>isUserLoggedIn()?<Redirect
to={"/pets"}/> : <Register/>} />
<Route path="/logout" exact component={()=>isUserLoggedIn()?<Logout/> :
<Redirect to={"/"}/>} />
<Route path="/pets" exact component={(props)=>isUserLoggedIn()?<Pets
{...props}/> : <Redirect to={"/"}/>} />
<Route path="/pets/new" exact
component={()=>isUserLoggedIn()?<PetCreation/> : <Redirect to={"/"}/>} />{/*Keep
this component above "pets/:PetId"*/}
<Route path="/pets/:PetId/"
component={(props)=>isUserLoggedIn()?<PetScene {...props} /> : <Redirect
to={"/"}/>} />
<Route path="/account" exact component={()=>isUserLoggedIn()?<Account/> :
<Redirect to={"/"}/>} />
<Route exact component={NotFound} /> {/*Keep this component at the end*/}
</Switch>
</Router>
</div>
);
}
uncomplicated manner. The homepage below uses the Homepage component and the Footer
Dynamic components are more complex, utilizing Axios API calls to populate, create,
update, delete, or refresh data, and utilizing handler functions to interpret user interactions with
rendered buttons or forms. Material Tables and Recharts were utilized to display data in an
organized fashion.
Below is the Pets page, which makes use of the Header, Pets, and Footer components.
API calls are made to retrieve the user’s owned pets and the pets that are shared with the user.
Shared pets are only displayed if the user clicks the “Shared With Me” tab. The default view is
Clicking on a pet profile will render the Pet Scene component, which represents the pet
profile. The Pet Scene has its own router, which determines which part of the pet profile the user
is accessing. Regardless, the Pet Scene makes the appropriate API calls to gather all of the
pertinent information, and then passes that information down to the PetAboutComponent,
and experience no loading times because the data has already been retrieved.
Displayed forms are designed to handle inappropriate data, providing instant feedback to
singular-application experience.
Clickable elements feature hover-effects to provide visual feedback and make the
and pleasing to the eye. A custom color palette was designed for this purpose. It took many
CONTROLLER
Upon user interaction, the data managed by PetRecs must be properly manipulated. To
accomplish this, a series of controllers were developed to perform CRUD operations on existing
models. Each controller contains several methods, where each method pertains to a specific
operation to perform upon some data. All controllers can be found in the controllers folder.
These files can be hundreds of lines in length, so example operations will be highlighted below
For CREATE operations, like the one used to create a new pet, the request body is
validated first to ensure it contains the proper data that will be required for the operation to ensue
successfully. This is to provide yet another layer of protection against bad or unwanted data. One
pet.controller.js:
// Validate request
if (!req.body.SpeciesId || !req.body.PetName || !req.body.PetGender) {
res.status(400).send({
message: "Error. Essential fields are empty."
});
return;
}
If the validation is successful, an object will be created from the request body to represent
// Create Pet
const pet = {
SpeciesId: req.body.SpeciesId,
BreedId: req.body.BreedId,
PetName: req.body.PetName,
PetGender: req.body.PetGender,
PetAgeYear: req.body.PetAgeYear,
PetAgeMonth: req.body.PetAgeMonth,
PetAgeDay: req.body.PetAgeDay,
AllergyNotes: req.body.AllergyNotes,
FoodNotes: req.body.FoodNotes,
CareNotes: req.body.CareNotes,
ProfileUrl: defaultProfile
};
Afterwards, the object is passed into a Sequelize function to handle the creation.
Sometimes, multiple Sequelize methods are called at once. Regardless, there is error handling.
As seen below, the Pet.create function also calls the Contact.create function so that the owner of
For UPDATE and DELETE operations, there is a validation to check if the user is an
owner of the pet they are trying to update/delete. This is to prevent users from being able to
change any of the basic info of a pet or delete the pet when it is not theirs. Users would only be
in a position to fail this validation if they were accessing a pet that was shared to them. This type
associated data with that pet: the pet’s contacts, events, weights, and records.
For FIND ALL operations, a JSON array of objects is returned based on specific
conditions applied to a MySQL query. First, a simple check is performed beforehand to see if the
if(!req.session.user) {
res.status(401).send("You are not logged in.");
return;
}
If the check passes, then the operation can ensue, and one example of this operation is the
one that is used to retrieve a list of the logged-in user’s pets so that they can be individually
Contact.findAll({
where: { AccountId: req.session.user.AccountId, Owner: 1}
})
.then(data => {
for(let i = 0; i < data.length; i++) {
contactArr.push(data[i].PetId);
}
Pet.findAll( {
where: { PetId: contactArr },
attributes: ['PetId', 'PetName', 'ProfileUrl']
})
.then(data => {
res.send(data);
})
.catch(err => {
res.status(500).send({
message:
err.message || "Some error occurred while retrieving owned
Pets."
});
});
})
.catch(err => {
res.status(500).send({
message:
err.message || "Some error occurred while retrieving Pet Contacts."
});
});
For displaying details of a singular element, there are FIND ONE operations. In the case
of fetching basic pet information via pet id (i.e. viewing a pet’s profile), there is a validation
check in the beginning to see if the user has access to the pet; this cross references the pet id and
the user’s account id with the Pet Contact table to verify a row exists and determine that the user
has view access. The FIND ONE operation is available for most models, so the one used for
In order for the controllers to be interacted with, methods have been paired to specific
routes in the Express server. These routes make up the PetRecs API, and they are called from the
front end using Axios. All API routes can be found in the routes folder. Here are the API routes
// Root: "/api/pets"
module.exports = router;
These routes are exported above, and then required and used in the main server.js with
In the front-end, these routes are called from a component with Axios. Below is a more
complex example where the Pet Scene component performs one Axios call to get basic
information about a specific pet, then nests two more Axios calls using the response from the
first call to get specific breed and species information about that pet. Afterwards, the response
data is set to a specific state in React so that it can be passed to child components and displayed
properly. Promises are tracked to determine if the loading bar needs to be displayed.
function fetchPetProfile() {
manuallyIncrementPromiseCounter();
axios.get(`/api/pets/${props.match.params.PetId}`, {withCredentials: true} )
.then(response=>{
const profile = response.data;
const requestSpecies = axios.get(`/api/species/${response.data.SpeciesId}`,
{withCredentials: true});
const requestBreed = (response.data.SpeciesId === 1 ||
response.data.SpeciesId === 2)? axios.get(`/api/breeds/${response.data.BreedId}`,
{withCredentials: true}) : "";
axios.all([requestSpecies, requestBreed]).then(axios.spread((...responses)
=> {
const responseSpecies = responses[0];
const responseBreed = responses[1];
setCardAcquired(true);
setPetprofile({
pet: profile,
species: responseSpecies.data,
breed: responseBreed.data
});
manuallyDecrementPromiseCounter();
setInfoAcquired(true);
})).catch(err =>{
console.log(err);
manuallyDecrementPromiseCounter();
})
})
.catch(err=> {
console.log(err);
Swal.fire('Oops...', "A pet with this ID does not exist", '
error');
history.push('/pets');
manuallyDecrementPromiseCounter();
})
}
DISCUSSION
Throughout the design and development phases of PetRecs, the team ran into a variety of
problems that needed to be solved. One of the first frontend related problems encountered was
learning to use the React web framework properly. It is a powerful library that emphasizes
building reusable user interface components. In early iterations, the development team was able
to build the foundation of the website with just a basic understanding of the React library. During
the later iterations of PetRecs, we were able to optimize the user experience of the website,
refactoring React components to take advantage of data flow between components, minimizing
there were still multiple aspects of the user interface and visual design that could be improved.
Findings from the feedback helped to correct various issues, improving user experience by
making the purpose of buttons more obvious, adding loading animations and confirmation alerts
to any processes that need more time to connect to the database, and changing feature titles to
The most difficult problems to solve were those related to the backend. The main features
of PetRecs all revolve around storing data about pets, so it was important to correctly implement
database connectivity. One limitation we experienced was our MySQL database’s limited
capacity. In order to store a user’s uploaded pet profile pictures and pet records, a more capable
database in Firebase’s Cloud Firestore was implemented to host the uploaded files. Integrating
this among the existing controllers was a learning experience. Another challenge was connecting
MySQL into the backend. For this we utilized Sequelize, an object-relational-mapping tool
which maps the models written in the backend to the tables hosted on the MySQL database
server.
It is important for PetRecs users to be able to share information about their pets, so
having a secure login system was a high priority. There were multiple ways to implement this,
but between Java Web Tokens and Express Sessions, there was a clear winner in what would
require the least amount of fuss to get operational. Express Sessions was ultimately used to
generate a secure cookie for logged-in users, while bcrypt was used to hash input passwords
during registration and login comparison. Both of these libraries proved difficult to implement as
PetRecs aims to solve the problems that occur from storing and maintaining pet medical
records. Managing these records with physical copies can be disorganized and wasteful, as well
as leaving open the possibility for damage or loss. In addition, pet owners may already be
dealing with health-related measurements for their pet and having to track that based on physical
records. The solution is an accessible web application where users can store and manage pet
It was the goal of the PetRecs development team to provide pet owners a convenient way
to record, view, and share information involving the care and medical history of their pet. The
need for this application was apparent due to how most pet owners are currently storing their pets
records and information. The major functionality of the PetRecs web application includes storage
for records and information for users' pets, the ability to update information as needed, and have
all of a user's data stored securely being only accessible by them. The approach taken to solve the
problem was to have an understanding of what data and information is most beneficial to store
To meet the expectations for the user interface and experience, the developers utilized
technologies that they were unfamiliar with like React, Sequelize, Material, Recharts, Firebase,
and more advanced aspects of Express and Heroku. Part of the methodology was to understand
the various frameworks and libraries that proved integral to the PetRecs experience. This resulted
in a clean, user-friendly design that relied on the component based framework React. The design
focused on information being accessible and organized to make it easy to know where it can be
code review and being open to suggestions and refactoring. The team found it beneficial to
dynamically adjust workloads depending on the change of time cost for specific tasks. Designing
and implementing a product for this project showed the value in focus group feedback and how
important it is to dedicate time to making revisions and fixes based on feedback from testing.
The team also learned, when it comes to a consumer product that users will be interacting with,
Going forward, the team would like to implement a streamlined notification and reminder
system to continue to expand the ways in which the application helps people manage their pets'
health information. Another focus would be creating an application for mobile devices to make
all the stored information more accessible and easier to use. Finally, advanced pet profile sharing
to give users more power and flexibility when it comes to sharing their pets information.
REFERENCES
http://leginfo.legislature.ca.gov/faces/codes_displaySection.xhtml?lawCode=CIV§i
nNum=1798.29
Pawprint - Get your pet's medical records!. (2020). Retrieved 28 July 2020, from
https://www.getpawprint.com/
APPENDIX A
Pet Profile
Pet Records
It was easy to upload a record.
Pet Events
Pet Weights
Pet Medications
Comments or suggestions?
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Name:_________________
APPENDIX B
1. Create an account (because website is not finished, out of caution I instructed testers to
use a fake email address in the format: [firstName]@test.com)
2. Log into the account you just created
3. Navigate to the Account page and update your account information with your first name
(last name is not necessary).
4. Navigate to the Pets page. Add a new pet to your account.
5. Complete the pet creation form and submit it to create your pet.
6. Once created, navigate to your pet’s profile.
7. Edit your pet’s profile to add additional details like notes
8. Update your pet’s profile picture
9. Share your pet with Admin@gmail.com
10. Upload a record. Download the record. Delete the record.
11. Add a new event marking some observation about your pet. Edit the event. Delete the
event.
12. Add your pet’s weight (if applicable), Edit the weight, delete the weight
13. Add your pet’s medications (if applicable), edit the medication, delete the medication
14. Log out.
APPENDIX C
Levi Remington: Security & API Lead, Requirements Gathering, Pet Profile Sharing
The project workload was evenly distributed among all members. Each member was
responsible for a major portion of the overall project. There were leads assigned for each section
which are specified above. All members contributed in these areas, but the leads were in charge
of the direction for the section and to help distribute tasks and responsibilities among the other
team members. As agile sprints progressed, there were reevaluations of the workload given to
each member. This was to stay on pace and to allocate resources to an area that may have been
1. Research Question/Problem Statement and Significance: Excellent, the case was made that many
Does the proposal include the answer to “So what”? How pet owners would like to track the
well does the proposal show the significance of the project exercise, food, shots, etc much more
to the student, the discipline and/or practice, the extensively. Seems like a great project.
University, the community, and beyond?
2. Goals/Objectives: How well are the goals/objectives Excellent, main goals and secondary
described? Are they clear and reasonable for the scope of goals are listed.
the project?
3. Methodology or Procedures: How well does the proposal Good, the team of three seems very
demonstrate that the project can be completed with the capable of completing the project on
available resources and in the time specified (feasibility)? time. A timeline is not mentioned,
How clearly does the proposal describe a plan for however, so it is hard to see the weekly
plan.
development and implementation (e.g., development of
creative design, or data collection and statistical analysis)?
Is the research method or development method clearly
identified.
4. Timeline: Is the timeline realistic in regard to the Excellent, the timeline was well
proposed methodology/procedures? represented with color and detail. Very
realistic.
5. The team members’ qualifications: How prepared is the Good, the students seem to be well
student skills and experience to conduct the project? If not, prepared to complete the project
how thorough is the justification?
6. Evaluation: How well does the proposal describe a plan to Excellent, several possible users of the
evaluate/test the expected outcomes/product? project will be included as well as the
survey that will be used.
7. References cited: Does the proposal include complete Good, it looks fine
bibliographic information for all references cited using an
appropriate style for the discipline?
8. Budget Summary: How reasonable does the budget Good, I think that the project can be
(including time and other resources) seem for both the completed on time
effort and anticipated results described?
9. Additional comments: if it is a team project, is each Inadequate, it is not clear who will do
member has a clear workload assignment? If it is a research which parts or how the workload will be
project, is there a clear dissemination plan? If it is a startup, split up.
does it have basic marketing and financial plan? Welcome to
comment on other aspects of the proposal.
Progress Report Rating and Feedback - is it timely, appropriate level of details, well written,
adhere to the propal?
1 Asked if the ability to print out info would be available to take to a vet or for a
sitter. Checked to see if the ability to reorder food or if tracking would be
included, like a fitbit on the collar. Could a sitter input data like when walked or
fed? The answer was no. Good job so far.
2 The team is on track. Doing great, will have something to share with the group
next week.
3 Team is doing great and on track. Polishing features, pet profile uploading. How
would you handle data capacity, upload docs, and number of pets?
4 Set up explicit goals to stay on track, need reminders of shots. Set up medical
records, health and event component pages, events can be added or deleted.
5 Doing great, showed example of how things worked and allowed others to setup
accounts. Final push, feedback from 3 people. Fixing stray bugs.