Team 6 – Rezerve | CSCE Capstone

CSCE Capstone

Student Site for Individual and Collaborative Activites

Team 6 – Rezerve

Team Members:

Tyler Gerth

Brayden Alvarez

Landry Ishimwe Karangwa

Dalynn Hatch

Colton Tucker

Rylan McAlister

Project Summary:

Due to the COVID-19 pandemic, many smaller barbershops and salons were hurt tremendously due to restrictions preventing customers from doing in-person business with them. This caused some of these shops to go out of business entirely and caused others great financial loss. Our application, Rezerve, aims to solve the problem of these barbershops reopening and trying to regain customers in a post-pandemic society. We will do this by partnering with these businesses and creating a hub in which customers can search their local area for barbershops and salons.

Since barbershops and salons are some of the most personal of customer service businesses, we want to capitalize on that by creating a web application that allows customers to find and make relationships with the specific people working at these businesses rather than just seeing a business name. Rather than simply being an appointment-making service for the business, Rezerve aims to allow customers to browse various barbershops and salons and see and learn about the people working there. That way, when a customer shows up for an appointment, it isn’t a brand new experience, but instead already somewhat familiar. Creating these meaningful relationships will allow customers to put a name to the face of the person cutting their hair and make them more likely to want to return in the future or recommend the environment of the shop to a friend, thus creating more business.

Links:

Project Final Proposal

Project Final Proposal Slides

Project Final Proposal Presentation

Software Justification Document

API Document

Software Design Document

Final Presentation Slides

Timeline:

Fall Task List:

Read documentation on the React framework and how it works (all members)
Set up example React project to understand the flow of the React framework (all members)
Design of the Business Info page

Create the HTML layout of the page

Needs to be able to see information about the business, such as name, contact info, address, and workers

Load mock data into the page
Connect the Business Info page to the rest of the application

Design of the Customer Appointments page within the dashboard

Create the HTML layout of the page

Need to be able to see past and future appointments a customer has scheduled with a business, including name of business, date time, and cost

Load mock data into the page
Connect Customer Appointments page to the rest of the application

Creation of a Firebase project and connection of it to our React project

Create a project in Firebase for the application and add the necessary library configurations to connect our application to its API

Creation of a NoSql Firestore database within Firebase

Create a database within Firebase that will contain all the customer and business data for our application
Load mock data into the database
Connect the database to our application so the mock data can be pulled in

Design of the Payments checkout page

Create the HTML layout of the page

Use Stripe API to take care of payments
Need a customer to be able to enter their card information and other needed Stripe components so they can schedule appointments

Verify that the checkout page successfully links to Stripe
Connect the Payments checkout page to the rest of the application

Design nearby businesses page

Create HTML layout of page

Using Google Maps API to handle location tracking
Ability to search for business based off user address and built in location services

Set up appointments by clicking on a marker placed on business’s location

Spring Task List:

Creation of the Employee Home Page

This page servse as the homepage for Employees when they login to the application
This page includes a toolbar with the following tabs:

Home – This tab contains all of the basic information for the employee to see/edit, their availability, which can be set, and the ability to add/remove offered services
Appointments – This tab contains two-part approach to displaying the schedule and appointment information for the employee. The first part will be a list view of their appointments, and the second will be a more detailed calendar view of their entire day.

Appointments show as upcoming, requested, cancelled, and past, with the employee being able to accept or deny requested appointments, or cancel upcoming. Employees can also use this screen to message customers

Clients – This tab contains a compiled list of the employees clients, with a number indicating how many times they have visited. The list also includes the ability to message one or multiple of the clients
Performance – This tab contains an assortment of performance statistics such as their sales, profile popularity, and ratings/reviews.

Creation of Home Page
This page serves as the default page when the user access the web app and also gets displayed when the customer login to the web app
Creation of Login and Sign In pages
These pages allow the user to log in with their accounts and provide them with the option to reset their passwords.

Creation of Sign Up pages

These pages allow the customers, employees and business owners to create accounts on the website to have more access.

The employee signup allows the employees to create an account and link it to the salons.
The customer signup provides the customer with more access to the website; access like making reservations, rating barbers, and barbershops.

Redesign of the Business Info Page

This page serves as the screen that clients interact with when trying to select the barbershop/salon that they want to make an appointment with
It shows the location of the establishment, a description of the business, and a list of the employees
We remade this screen from the Fall in order to have a more consistent style and feel across the application

Creation of the Book Appointment Page

This page allows customers to select an employee at a business and book an appointment with them (embedded within the Business Info page)
It displays information about the employee’s services and availability
User can select employee, service, and date and see available appointment times on that day (taking into account employee’s schedule and working hours)
Can also choose to find first available appointment for a specific employee and service

Creation of the Business Performance Page

This page allows shop owners to view metrics about their business, such as profits, number of abandoned carts, and overall business rating
It is only accessible by the business owner
This page will filter the data based on a time period that is selected by the owner and contains the options (Day, Week, Month, Year)

Redesign Backend

This task was over reworking our Firestore database to be more efficient and without duplicated data

This was done by building out a DB schema, replacing the existing schema with it, and then adding data into the new schema

This task also involved enabling Authentication for the application so users could start making accounts and moving through the application flow

Authentication should be persistent until the user chooses to log out, so a user could close the browser and open it back up without being logged out

Creation of the Employee Accounts Page

This page will be accessible by employees of businesses
This will allow employees to set their appointments, take payments for the business, as well as have a to-do list of what they need to get done (such as things like getting new equipment, learning new styles, etc.)

Creation of the Employee Services Page

This page is part of the Employee Home Page
Shows information about the specific services an employee offers (since different employees specialize in different things), a description of those services, and the price of the service

Creation of the Business Search Page

Allows a user to search for a location via Google Maps API and find all businesses in our database within a 50 mile radius of that spot
Uses geolocations to create a bounding box within which to search
Displays all the businesses, with links to take the customer to their Business Info page

Creation of Customer Rating and Review Page

This page is accessible by customers and is contained within the customer’s Business Info page
This will allow customers to rate and review the shops they have been to
These ratings/reviews will be posted on the businesses page so others can see them
Ratings/Reviews will be stored in a DB to be pulled in when people view the list of businesses
Guests without an account cannot create a review

Account Registration Flow

This includes the implementation of the flow for Customers and Businesses to sign up and create accounts on the website
The first half is the ability to create user accounts which we are using Firebase authentication to manage, and the second part is creating business accounts which employees are tied to

Messaging Between Employees and Customers

Accessible by both
Allows the two parties to send direct messages to each other regarding appointments or general questions
Can be accessed via a Messaging tab in the Sidebar or from the Appointments page

Stripe Integration

Accessible by customers to allow for payment of bookings/appointments
Server created to handle talking with the application and Stripe API
Allow splitting up payments to direct money to the businesses, stripe, and us.

Creation of the Forum Page

Used to allow customers to directly interact and message with each other
Allows customers to talk about different businesses they’ve visited
Deprecated from Project Proposal due to losing members and being unable to complete – Customer/Employee Messaging still in place

Deploy the Application via Heroku

We set up a Heroku account for the application and did the configuration in order to hook our Github repository to Heroku
Deployed the application and started load testing it to make sure it can handle multiple users accessing it at once

Testing

We continuously tested our application throughout the development process to make sure that later changes aren’t breaking earlier ones

Current Timeline:

Fall Tasks:

Week 1 (10/19 – 10/25)
- Everyone
- Everyone
- Tyler Gerth and Landry Ishimwe Karangwa

Read documentation on React and how it works
Set up example React projects to understand the flow
Design of the Business Info page

Week 2 (10/26 – 11/1)
- Everyone
- Tyler Gerth

Creation of the Firebase project and connection of it to the React project
Creation of the Firestore Database

Week 3 (11/2 – 11/15)

Design of the Payments Checkout page
Design of the Nearby Business page

Spring Tasks:

Sprint 1 (01/11 – 01/24)
Sprint 2 (01/25 – 02/07)

Sprint 3 (02/08 – 02/21)

Redesign Backend – Tyler Gerth and Rylan McAlister
Business Home Page
- Menu bar, AppBar and linking necessary components to Business Home Page
  - Landry Emery Ishimwe Karangwa
Project-Wide Styling Updates – Colton Tucker
Initial Deployment to Heroku – Colton Tucker

Sprint 4 (2/22 – 3/7)

Google Maps Business Search – Tyler Gerth
User login Page – Landry Emery Ishimwe Karangwa

Sprint 5 (3/8 – 3/21)

Appointment Availability and Booking – Tyler Gerth
Reset account page – Landry Emery Ishimwe Karangwa

Spring 6 (3/22 – 4/4)

Appointment Statuses (Requesting, Accepting, Cancelling) – Tyler Gerth
Viewing Existing and Upcoming Appointments – Tyler Gerth
Editing of Employee Data – Tyler Gerth
User Logout – Tyler Gerth
Stripe Integration – Rylan McAlister
Add Review Functionality – Dalynn Hatch, Brayden Alvarez
Styling update on login Page, account reset Page, and sign up page
- Landry Emery Ishimwe Karangwa

Sprint 7 (4/5 – 4/18)

User Messaging (Between Customer and Employee) – Tyler Gerth
Persistent User Sessions – Tyler Gerth
Creation of ‘First Available Appointment’ functionality within the Book Appointment page – Tyler Gerth
Addition of Employee Services to Employee Home – Tyler Gerth
Request the user’s current position on Home Page – Landry Emery Ishimwe Karangwa
Display businesses using Google Maps – Landry Emery Ishimwe Karangwa
Stripe Integration – Rylan McAlister
Business Performance Functionality – Dalynn Hatch
Business Rating Bugs – Dalynn Hatch, Brayden Alvarez