GARLIC CITY DETAILING

_______________

A Capstone Project

Presented to the

Faculty of CST 499 at

California State University, Monterey Bay

_______________

In Partial Fulfillment

of the Requirements for the Degree

Bachelor of Science

in

Computer Science

_______________

by

Moses Garcia & Cesar Sanchez

Summer 2021
 2

Copyright © 2021

By

Moses Garcia, Cesar Sanchez

All Rights Reserved

 3

EXECUTIVE SUMMARY

Garlic City Detailing

by
Moses Garcia, Cesar Sanchez
Bachelor of Science in Computer Science
California State University Monterey Bay, 2021

The purpose of this project is to create a platform that enables small businesses to

succeed and use tools that will allow them to grow their business. The goal is to share this to

businesses in the South Bay, specifically Gilroy California. Creating an easy to use UX/UI that

will not require prior technical knowledge. COVID-19 was not only a tragedy but also an

opportunity for several to reach their goals. Just the small Giloy Community I have seen how

small businesses are trying to grow and expand their operations but are handy capped by how

much enterprise software costs but are also not able to launch an application themselves. Our

goal is to work around the current problem, and bring a solution to the already struggling

business. With the Garlic City Detailing website, we are trying to create a website that will allow

customers to schedule an appointment to get their car detailed. This website will help future

small businesses with incorporating an online scheduling system for their business.
 4

TABLE OF CONTENTS

PAGE
EXECUTIVE SUMMARY ……………………………………………………........…....…….... 3
PART
I BACKGROUND AND APPROACH …………....................................................................... 5
Introduction .............................................................................................................5
Issue: Website Availability ………………................................................. 5
Solution: Garlic City Detailing .................................................................. 6
Goals and Objectives ................................................................................. 6
Stakeholders and Community .................................................................... 7
Evidence of Need ....................................................................................... 7
Feasibility Report ................................................................................................... 7
II DESIGN REQUIREMENTS ............................................................................................... 10
Functional Requirements ..................................................................................... 10
Selection of Design Criteria ................................................................................. 11
Final Deliverables ................................................................................................ 11
Approach and Methodology ................................................................................. 11
Ethical Considerations ......................................................................................... 13
Legal Considerations ........................................................................................... 13
III PROJECT RESULTS ........................................................................................................... 15
Timeline and Budget ............................................................................................ 15
Usability Testing and Evaluation ......................................................................... 16
Final Implementation ........................................................................................... 18
Discussion............................................................................................................. 21
REFERENCES ........................................................................................................................ TBD
APPENDIX
A USABILITY TEST POST-SURVEY ................................................................. TBD
B TEAM MEMBERS…………………………………………………………….
C CITE USABILITY……………………………………………………………..
 5

PART 1

BACKGROUND AND APPROACH

INTRODUCTION

Trying to set up an appointment to get your car detailed can be a hassle at times. Whether

it’s the website being not friendly enough to make it easier for the customer or the lack of a

website for that matter. Calling different shops to get an estimate or schedule an appointment can

be very tedious. The entire process to get your car detailed seems to be way more complicated

than what it really should be. There are not many websites out there that allow you to see what

openings there are without having to call in to the detailing department and figure out what

schedule will work. In today’s society, everyone is super busy and sometimes having to call, wait

for an answer through email, or having to search online for a reliable detailing service becomes a

bit too much after a long day.

Gilroy City Detailing is a website that can help relieve some of the pain that occurs

while trying to schedule an appointment in order to have your car detailed. Our website provides

a portal where the user can schedule appointments and view which slots are currently available.

To cancel an appointment, you simply delete the event from your Google calendar. The main

takeaway from the website is the ease of use. This allows users to be able to come and go quickly

without having to spend too much time out of their day. Clients that have a busy schedule and

need a quick and easy way to get their car detailed benefit from our website. In doing so,

valuable time, which is important for both the client and the workers, can be saved.

ISSUE: WEBSITE AVAILABILITY

The majority of the detailing shops that can be found in your local communities normally

don’t have a website that you could visit and schedule an appointment. This makes the
 6

experience for the client a bit more troublesome. Having to call in to the detailers shop just to

view the availability creates a hassle that could be resolved by having an online website which

displays the available slots open to get their car detailed.

SOLUTION: GARLIC CITY DETAILING WEBSITE

An online website that is used to schedule appointments for car detailing services

provides a much more efficient form of scheduling for both the owner and customer. With an

online website, the client easily sees the availability of the car detailing shop and is able to

schedule or cancel any appointments they might need. Garlic City Detailing does just that. It

helps minimize the hassle that occurs when trying to schedule an appointment that should be

simple but oftentimes becomes more of a nuisance.

PROJECT GOALS AND OBJECTIVES

GOALS/OBJECTIVES

The goals of this project are to:

● Display a user friendly website to schedule appointments

○ Allows customers to schedule appointments from available slots

○ Allows customers to cancel appointments from their Google calendar

● Display the work that is provided from the shop

○ View previous detail work done by the shop

● Encourage self car care

○ Users are able to view our cleaning and maintenance products

○ Users are able to learn more about the detailing process by seeing the process that

goes into detailing a car and try it on their own.

● Always be available to help

 7

○ Users are able to contact us for any of their auto detailing needs

STAKEHOLDERS AND COMMUNITY

The thought processes behind this project is to help the community during difficult times.

As it is not easy to directly affect the community in meaningful ways, especially during a

pandemic. With everything becoming remote, it is not easy for a small business to grow. Having

no specific audience allows anyone to visit our site and experience it for themselves. Friends and

family were one of the first to experience how our website works.With continuous soft rollouts,

we were able to make changes and adjustments depending on the client’s feedback.

EVIDENCE OF NEED

This project was needed because there is not enough availability for car detailing shops to

schedule appointments online. With the times changing, it is important that we are adapting to

the technological advances being made. Being able to schedule your appointments online adds

on to the ability of being able to access everything at your fingertips. This cuts down on the time

being spent by the customer and the client while scheduling appointments. Instead of scheduling

appointments, the time is used to work on detailing the scheduled cars.

FEASIBILITY REPORT

While doing research for other similar sites within the community, we noticed that, in

general, there is a lack of websites for the local shops in our community. With that in mind, there

are a few sites that are available to our community but don’t have much to display. The main

focus from their site is having a number they can contact and just a typed out address to visit

(sites.google.com/site/robsautodetailservice). At the time of our proposal, Village Car Wash had

a website and now no longer has a site available. This becomes concerning for someone that was

used to visiting the website to simply see hours of operations or directions to the site. Garlic City
 8

Detailing resolves this issue. With our easy to use site, you can see what slots are open to bring

your car in for detailing. As soon as you land on the home page, you are given the detailing

packages available. Once you click on our scheduling button, it redirects you to our calendar

where you are able to view the available slots open for detailing. After that, an event is sent out

to the clients email which allows them to cancel their appointment at any time and our site will

reflect the change and make that slot available once again.

When viewing the site shinecoatautodetailing.com, there is not option to schedule an

appointment for the packages they offer through their “Our Services'' drop down, selecting “Auto

Detailing.” When trying to click on the option to receive a quote, the site does not return

anything. With Garlic City Detailing, we provide you a calendar to be able to schedule your

appointment once you have seen the package details. Having our site redirect you to a calendar

where it is easily accessible, easy to use, and time consuming provides a much better user

experience.

Having an admin login page also allows the shop owner to go in and update his package

detailing services and have the site replicate that information. As we are not admins of other

sites, we can;t say whether they have that feature or not. From just looking at Rob’ Mobile Auto

Detailing site, we could see that there’s no login button to be found which implies that it does not

have that functionality to update the services they provide on the site itself. With Garlic City

Detailing, we allow the shop owner to have everything available at their fingertips. Updating

your products and prices for a shop will make it easier on the owner to have a successful auto

detailing service.

Our Contact Us page allows our clients to provide any feedback they may have in regards

to our site or the auto detailing service they received. Just provide the information required and
 9

someone from the shop can help answer those questions. With the location of our shop, you are

able to see where you can take your car to get detailed and have directions to our shop as well.

This makes it easy to navigate to our shop and not have to look elsewhere online for our

directions.

Having a page specifically designed for the services we provide serves as a resource for

the client to truly understand what type of service they will be receiving per package available.

This avoids any confusion the client might have in regards to what type of service they will be

receiving for their car detailing. Within this page, it is important for us to demonstrate how the

work is done. In doing so, the client can learn how to care for their vehicle themselves and avoid

an expensive repair for something that could have been avoided with simple care and

maintenance procedures.
 10

PART II

DESIGN REQUIREMENTS

FUNCTIONAL REQUIREMENTS

User Stories were created by creating a mock up site (drawn up) and having meetings on

what functionalities should be included to make a website for auto detailing possible. Each

requirement is summarized in Figure 1 below.

Figure 1. Functional Requirements

 11

The functional requirements are split into six categories which contain—home page

(HOME), service page (SERV), products page (PROD), about page (ABT), contact us page

(CONT), and login page (LOG). Each requirement was prioritized from a 1-3 scale, with 1

indicating highest priority. Having these requirements identified by priority made working on the

essential functionalities easier to envision and plan out.

SELECTION OF DESIGN CRITERION

In addition to the listed requirements above. We design based on the design to:

● Ease of use for a non-technical user admin/customer.

● The solution’s UI should be easy to use to invite any technological comfort level

● Landing page should have a scheduling solution to minimize actions required to schedule

an appointment

● Accurate information

● Hashing password to prevent password decryption

FINAL DELIVERABLES

The final delivery for this project includes a fully functional web application deployed on

AWS Cloud 9 platform consisting of:

● Frontend client which can be found through www.garliccitydetails.com

● Backend JawsDB database which will hold the services, products and user

information required for the website

We will also be creating a video demonstration of the deployed website, all

documentation pertaining to the functionalities of this site and the goals of this project.

APPROACH AND METHODOLOGY

 12

For our project we utilized NodeJS, HTML, AJAX, JawsDB, Heroku, and AWS Cloud9.

Using these tools gives us the upper hand when it comes to the competition that is out there.

Currently, there aren't too many websites for auto detailing that display the Google Calendar with

available slots which is one of the features included in our website. Using AJAX in our code, we

are able to create new APIs which are used to retrieve the information from the database. Should

a service be updated, created, or deleted, the site will always be up to date as it will be syncing

from the database. This will not only make it easier for the shop owner to be able to manage the

site through the login page and not worry about having to make any technical changes on the

site.

Using JawsDB and adding an iframe to our site became a more viable solution as it

reflects when a calendar event has been reserved. Since using Google APIs was not as efficient

as we first believed it would be. We were able to instead use Google Calendar’s scheduling tool

to include calendars that would be even easier to use. They are more efficient to make and cancel

a reservation if the owner of the calendar decides to modify something. This also allows the

client to cancel an appointment from their Google calendar. We also use JawsDB in order to keep

track of the package details and product inventory at the shop.

Through AWS Cloud9, we are able to implement all of our backend and front end code to

efficiently use Heroku. This allows the developers to implement any new changes to the site

from anywhere around the globe as long as they have access to a computer and the internet.

Using Heroku and AWS makes the code and functionalities seamless as everything is uploaded

to GitHub in a private repository which in turn has Heroku automatically pull new versions of

the code. Overall, this project proved to be a difficult yet interesting project while utilizing

different tools.
 13

ETHICAL CONSIDERATIONS

When it comes to creating a website or any type of application, one must stop to think

about the digital divide and whether or not we could be creating a service that’s tailored more

towards one group than the other. Garlic City Detailing will be a website that is available to

anyone that has a mobile device or computer. Websites can be accessed by any mobile device or

computer that has access to the internet therefore there should not be any type of gap between

groups as long as they have access to the internet. In today's day and age, having access to the

internet can be done through various different methods. Whether it’s having your own internet,

using a hotspot around town, or going to a public library which provides free access to the

internet.

Since Garlic City detailing will be accessed through the internet, everyone who has

access should be able to visit our website and request an appointment to have their car detailed.

Having a website for our service as opposed to having an application, which is only available for

either an iOS device or android device, will go a long way into maximizing the efficiency of our

service. This will ensure that everyone has the same access as everyone else since it won’t be

dependent on any type of software or operating system. The only group that won’t be able to take

advantage of our service is anyone who does not yet own a vehicle or is not old enough to drive a

vehicle yet. Overall, our app is not restricted to any specific group whether it’s age, class, or

anything of that sort.

LEGAL CONSIDERATIONS

One of the main concerns for any website is data privacy. When it comes to websites

obtaining data from the user, it is always important to keep their data safe. Garlic City detailing

will request minimal data from the user in order to be able to schedule an appointment that
 14

contains sufficient information. The only information that will be required is an email and the

date they want to schedule an appointment which will be stored in the shop’s Google Calendar

which will ensure the data is not lost or leaked. One potential concern that could occur is that a

customer adds fake appointments and takes up slots with fake information. To mitigate this issue,

we would enforce the amount of times a user can schedule an appointment with the same email.

Equality is a term that is loosely defined, within our site and potential business model we

plan to be inclusive and supportive for any businesses that have been continuously on the fence

about shutting their operations down. We understand that during the pandemic everyone faced

hardships in one way or another. As the founders of the site, we plan to help the community by

giving the necessary tools for others.

 15

PART III

PROJECT RESULTS

TIMELINE AND BUDGET

As far as the timeline and budget go, we were able to manage our time efficiently after a

few hiccups we had in the first few weeks. Week 1 and Week 2 felt the most unorganized as we

were gathering information and creating a mockup for our project. Once we had that covered, the

proposed timeline (Figure 2) was followed and implemented accordingly.

Week 1 Research/Setup
● Model and design
● Gather information on similar
products
● Set up our eclipse environment using
spring boot

Week 2 Start back end/front end development

● Create HTML pages
● Create controllers

Week 3 Project Essentials

● Implement Google Calendar
● Link custom domain to Heroku

Week 4 Final Stages

● Testing in our environments
● Completing HTML

Week 5 Project Testing

● Request friends and family to test our
website

Week 6 Make any changes based off of feedback from

testing

Week 7 Complete testing/survey for Garlic City

Detailing
Figure 2. Proposed project timeline
 16

Overall, we were able to follow the timeline pretty close to what was proposed. The

testing went according to plan and we were able to make a few changes to the site prior to the

Capstone festival. There was no budget allocated for this project which meant we had to use

some of the free resources available to us. This came with its own issues as there were a few

times that the database maxed out it’s connections.

USABILITY TESTING AND EVALUATION

Figure 3. Survey Responses Breakdown

Our testing consisted of a few tasks that we asked the client to try and complete. From

there we were able to analyze what sections of our website would require more work. We asked

each client to try and do the following tasks and ask for help if they got stuck with a task.

● Schedule an appointment from the home screen

● Schedule an appointment from the services page

● View Products:

○ From Inventory

○ Filtered by Interior

○ Filtered by Exterior

● Login to admin page with provided credentials

 17

○ Simulate logging in as an Admin and add a new service

○ Simulate logging in as an Admin and view all services.

■ remove/update a service

Since we primarily asked family members to test, we were able to have one on one

testing with each individual to analyze the flow and where it seemed tougher for the client to

complete an action. After having three of the four clients test those functionalities, we asked

them to fill out a survey and provide any feedback they think can help the site be of greater value

(Appendix A). From the responses we received (Figure 4), we decided to try and implement at

least one of those changes to have our last client test and experience the new changes.

Figure 4. Survey Response Feedback

After receiving feedback, we were able to implement the first feedback which mentions

to allow the service description to be updated after creating a new service. In doing so, the client

would see the new information replicated everywhere on the site and have it be in sync. The

second feedback we received, we decided to add as a future improvement to the site. After

adding that functionality, we had our last client test and got feedback from them. That’s the

second feedback we received, to have the products pop up when clicked on to get a detailed

description of the product.

 18

FINAL IMPLEMENTATION

This project, in its final state as submitted, can be split up into six components—home

page , service page, products page, about us page, contact us page, and login page.

The home page serves as the landing page that the client first sees when he visits our

website. This page should have the scheduling assistant to be able to minimize the time the client

needs to spend on our site if all they came for was to schedule an appointment. Having the three

package deals on the home page with a scheduling option for each does just that. The home page

contains three containers which serve as the package deals that are available through the owners

auto detailing shop (Figure 5).

Figure 5. Home Page Layout

 19

The service page serves as a more in depth look into what is provided with each package

deal. The information on this page is synced up with our database through the use of AJAX API

calls (Figure 6). Lines 60 through 67 are retrieving the information from the API call and in line

74 through 83, we are doing a for loop to be able to display the information for each result found.

With the use of API calls, we are able to keep the entire site in sync and the shop owner would

no longer need to have a site admin to make changes on the site for him. This minimizes the

amount of extra resources required to operate their business. This is done for each of the service

packages that are offered. For economy, premium, and supreme packages we are using similar

API calls to get each service’s description and be able to have the site synced up every time that

shop owner updates his services or removes a service from one of the packages.

Figure 6. AJAX API for Site Service and Description

Adding and removing a package is done quite simply from the login page. The admin is able to

update and remove a product by filling out the necessary information. After doing that, the home
 20

page and the services page both get updated with the new service and or description that is

entered (Figure 7). The other pages are quite simple and do exactly what is displayed on Figure

5. The about us page just gives a quick overview of where the shop started and the location/hours

of operation. The contact us page contains a google form that the client can fill out if they are

looking for any extra information or give feedback that can help the site improve.

Figure 7. Update Service and sync on site

 21

Similar functionalities are made when we want to update which admins exist. The shop

owner can add/remove admins to keep his site with only the people that should have access to

modify it. Overall, the site was created with the thought of having an easy to use site that any

technological comfort level can operate and feel comfortable with.

DISCUSSION

Throughout the first implementation of our web page we changed several things to reach

our end goal. Make it look like a fully functional website that would provide a service to

potential clients, or to a business that would be interested in implementing themselves. We also

wanted to make sure that our site was easy to investigate through, since that was one of our

major priorities. Some of the issues that happened more than once when testing using our

database. The live site we have www.garliccitydetails.com is deployed through Heroku and

using a custom domain on Google domains. Our site became unusable through the recording of

the video presentation we were trying to create. Even though the site is back up once again, there

is no easy way of telling when it could go down again. Even though displaying the custom

domain was not a requirement we were hoping to put it in use for our presentation. Some other

issues that came about during the implementation process was some of the web pages displaying

the products from the database. The time spent on that from one of our team members was more

expected but the outcome was exactly what we wanted.

Collaboration and communication with the team was simple. The team has been working

together since the beginning of the cohort. Using the basic tools that we already had previous

knowledge on like Google Docs, Github, Discord, and JawsDB all played a part in the

development of this site. Google Docs allowed us to collaborate on papers and proposals that

were part of the capstone. Github allowed us to manage and merge code. Having separate
 22

branches gave the opportunity to work on this project at the sametime instead of waiting for

changes to be made by the team. It also gave us the flexibility to use our own IDE preference.

Discord was a huge player in this as well. Using screen sharing for troubleshooting or for some

quick advice on how to continue developing the site without having the need to use Github.

JawsDB also gave us the ability to have several of these databases to test and see changes that we

made since we were able to log into them using MySQL and logging into them locally.

This site has the potential to help the community who is looking to get their car detailed

but is having a tough time scheduling an appointment that works with their schedule. This

project serves as a good foundation for what can be done in the future for this site. Some of the

future improvements that can be done to the site includes: making it a one stop site (for anyone

to implement their services with the site), adding a payment system online, and creating a mobile

application and most importantly a mobile site.

 23

REFERENCES

Rob’s Mobile Detailing. (n.d) https://sites.google.com/site/robsautodetailservice/home

 24

APPENDIX A

USABILITY TEST POST-SURVEY

The following survey is available at: https://forms.gle/ndBsuDEQpDTqrkHn9

25
 26

APPENDIX B

TEAM MEMBERS

Moses Garcia - Cesar Sanchez

Division of responsibilities: The goal of this project is to divide up the work as equally

as possible to get as much exposure to each technology used. The responsibilities will be:

● Creating HTML Pages: Moses

● Styling HTML Pages: Moses

● Integrating APIs: Cesar

● Creating javascript files: Cesar

● Research for website: Moses/Cesar

● Coordinating with Clients: Moses/Cesar

 27

APPENDIX C

CITE USABILITY

This is the guide to create a new appointment.

1. Navigate to www.garliccitydetails.com

2. Navigate to the Home page or service page.

3.

4. Click on the “Schedule” Button on either the home or services page. Both calendars are

the same.

5. Fill out the “Book an Appointment” once complete hit “save” to complete the process
 28

This guide is made to access the Administrative Page

1. Navigate to the Login button.

2. Once pressed

3. Use Username: hi and Password: hi

4. Once in the Administrator Page will open with the rest of the

privileges.

This guide is made to access the Products Page

1. The products tab will present the products page and the category drop down menu

will give the option to select inventory from the

database.
 29

This guide is made to use Administrator privileges.

1. Adding an admin enter username and password, there is a function in place to

automatically hash the password.

2. “Show Admins” displays current administrators as well as the option to remove them

from the database.

3.

4. “Add a new Service” will send description and service to the database in the selected

drop down option.

 30

5. “Service Information” section will give the ID, Services, Package Deal, as Removing and

Updating the Service.