A PROPOSED DESIGN AND IMPLEMENTATION

DSN4096-CAPSTONE PROJECT PHASE-II

Phase – II Report

Submitted by

Ojas Gupta (20BCE10590)

Manas Makde (20BCE10697)

Kartik Sharma (20BCE10099)

Satwik Srivastava (20BCE10576)

Page | 1
 in partial fulfillment for the award of the
degree of
BACHELOR OF TECHNOLOGY
in

COMPUTER SCIENCE AND ENGINEERING

SCHOOL OF COMPUTING SCIENCE AND ENGINEERING

VIT BHOPAL UNIVERSITY

SEHORE, MADHYA PRADESH - 466114

MAY 2024

Page | 2
 VIT BHOPAL UNIVERSITY, KOTHRIKALAN, SEHORE
MADHYA PRADESH – 466114

BONAFIDE CERTIFICATE

Certified that this project report titled “Sportzfy Web And App” is the

bonafide work of “Ojas Gupta (20BCE10590), Manas Makde (20BCE10697),

Kartik Sharma (20BCE10099), Satwik Srivastava (20BCE10576)” who carried out

the project work (DSN4096- Capstone Project phase-II) under my supervision.

Certified further that to the best of my knowledge the work reported at this time does

not form part of any other project/research work based on which a degree or award

was conferred on an earlier occasion on this or any other candidate.

PROGRAM CHAIR PROJECT GUIDE

Dr J. Manikandan, Dr. Anand Motwani,
Senior Assistant Professor (Gr-2), Senior Assistant Professor (Gr-17) ,
School of Computing Science and Engineering, School of Computing Science and Engineering,
VIT BHOPAL UNIVERSITY. VIT BHOPAL UNIVERSITY.

The DSN4096-Capstone Project phase-II Viva Voce Examination is held on ____________

Page | 3
 ACKNOWLEDGEMENT

First and foremost, we would like to thank the Lord Almighty for His presence and immense

blessings throughout the project work.

We would like to thank my internal guide Dr. Anand Motwani, for continually guiding and actively

participating in our project, and giving valuable suggestions to complete the project works.

We wish to express our heartfelt gratitude to Dr. J. Manikandan, Head of the Department, School of

Computing Science and Engineering for much of his valuable support and encouragement in

carrying out this work.

We wish to express our heartfelt gratitude to Dr. S. Poonkuntran, Professor and Dean, School of

Computing Science and Engineering for much of his valuable support and encouragement in

carrying out this work.

We would like to thank all the technical and teaching staff of the School of Computing Science and

Engineering, who extended directly or indirectly all support.

Last, but not least, We are deeply indebted to our parents who have been the greatest support while

we worked day and night for the project to make it a success.

Page | 4
 LIST OF FIGURES

FIGURE NO. TITLE PAGE NO.

1.0 System Design 14
2.0 Screenshot of Menu Page 16
3.0 Screenshot of Contact Us 17
Page
4.0 Screenshot of 21
wireframing’s control flow

Page | 5
 ABSTRACT

Sportzfy is a comprehensive digital solution comprising both a mobile application and a website, meticulously
crafted to streamline the daily operations of turf owners. With an intuitive interface and robust features,
Sportzfy empowers turf owners to effortlessly manage their booking slots, exercise full control over
reservations, and meticulously monitor every aspect of the booking process. The Sportzfy mobile application
and website serve as a centralized hub for turf management activities, offering owners unprecedented
convenience and efficiency in overseeing their turf facilities. Through Sportzfy, owners can seamlessly handle
the complexities of scheduling, ensuring optimal utilization of their turf resources while minimizing
administrative burdens. Key Features are given below:-

Easy Booking Management: Sportzfy simplifies the process of managing daily booking slots, allowing owners
to efficiently organize and allocate turf resources based on demand on the calendar.

Comprehensive Control: Owners have complete authority over bookings, with the functionalities like add,
modify, or cancel slot as needed, ensuring adherence to operational preferences and availability.

Detailed Monitoring: Sportzfy provides owners with real-time insights into booking activities, enabling them to
manage areas and turd, get updated information, and make informed decisions to enhance operational
efficiency.

Customizable Settings: The platform offers customizable settings to accommodate varying business
requirements, allowing owners to configure parameters such as pricing, availability, and booking rules with ease
and also updates latest information on the website.

User-Friendly Interface: Sportzfy has an intuitive and user-friendly interface, ensuring a seamless experience for
both owners and supervisors, thereby fostering enhanced monitoring and transparency.

Page | 6
 TABLE OF CONTENTS

CHAPTER TITLE PAGE NO.

NO.

List of Figures
iv

v
Abstract
1 CHAPTER-1:
PROJECT DESCRIPTION AND OUTLINE 1

1.1 Introduction 1

1.2 Motivation for the work 1-2

2
1.3 Problem Statement 2-3
3
1.4 Objective of the work
1.5 Summary
CHAPTER-2: RELATED WORK INVESTIGATION
2.1 Existing Approaches/Methods 4-5
2.2 Pros and cons of the stated Approaches/Methods 5-6

Page | 7
 3 CHAPTER-3: REQUIREMENT ARTIFACTS
3.1 Introduction 7
7-8
3.2 Hardware and Software requirements
3.3 Specific Project requirements 8
3.3.1 Data requirement 8
3.3.2 Functions requirement 9
3.3.3 Performance and security requirement 9
3.3.4 Look and Feel Requirements 9
3.4 Summary 10

4 CHAPTER-4: DESIGN METHODOLOGY

AND ITS NOVELTY

11
4.1 Methodology and goal
4.2 Functional modules design and analysis 12-13

4.3 Software Architectural designs 13-15

4.4 User Interface
15-17
designs
4.5 Summary 17
5 CHAPTER-5: TECHNICAL IMPLEMENTATION
& ANALYSIS
5.1 Outline
5.2 Technical coding and code solutions
5.3 Prototype submission 18-19

5.4 Summary 19-20

20-21
21-22

Page | 8
 6 CHAPTER-6: PROJECT OUTCOME AND
APPLICABILITY

6.1 key implementations outline of the System 23-24

6.2 Significant project outcomes
24-25
6.3 Project applicability on Real-world applications 25-26
6.4 Inference
26-27

7 CHAPTER-7: CONCLUSIONS AND

RECOMMENDATION

7.1 Outline 28-29

7.2 Limitation/Constraints of the System 29-30
7.3 Future Enhancements
30-31
7.4 Inference 31
APPENDIX A – Screen Shots 32-35

APPENDIX B – Coding 36-47

REFERENCES 48

Page | 1
 CHAPTER 1
PROJECT DESCRIPTION AND OUTLINE

1.1 INTRODUCTION

Sportzfy is an app designed specifically for turf owners to efficiently manage all aspects of bookings
with unparalleled control and monitoring. Sportzfy gives a comprehensive solution tailored to streamline
the complexities of turf management, empowering owners to oversee rates, discounts, time allocations,
canteen costs, payment statuses, and more, all from one intuitive platform. With Sportzfy, owners can
effortlessly adjust rates and apply discounts to attract customers and maximize revenue. Sportzfy allows
owners to efficiently allocate time slots based on demand and resource availability. By optimizing turf
utilization, owners can ensure a seamless booking experience for customers while maximizing
profitability. Sportzfy simplifies financial management by seamlessly integrating canteen costs into the
booking process. Owners can accurately calculate total costs for customers,

6.1 MOTIVATION FOR WORK

After frequent visits to the nearby turf, we developed a strong rapport with the turf owner. Recognizing
the challenges they faced in managing bookings and enhancing their online presence, we extended an
offer to assist them in developing an innovative solution. With our experience in technology and a
shared vision for improving turf management, we proposed the creation of Sportzfy – an intuitive app
designed to streamline operations and expand their reach in the digital realm.

Page | 1
 1.3 PROBLEM STATEMENT

In the business of turf management, turf owners face numerous challenges in efficiently managing
bookings and optimizing operational processes. These challenges stem from the absence of a centralized
platform tailored to their specific needs, resulting in inefficiencies, administrative burdens, and missed
opportunities for revenue generation. Without a dedicated solution in place, turf owners struggle to
maintain control over booking schedules, regulate pricing structures, monitor payment statuses, and
enhance their online presence.
Moreover, traditional methods of managing bookings, such as manual paperwork or fragmented digital
systems, lack the agility and flexibility required to adapt to evolving market demands and customer
preferences. Turf owners are often overwhelmed by the complexity of juggling multiple tasks
simultaneously, leading to scheduling conflicts, inaccurate financial tracking, and suboptimal resource
utilization.

1.4 OBJECTIVE OF THE WORK

The primary objective of the Sportzfy project is to design and implement a comprehensive app for turf
booking and management, aimed at enhancing the overall experience for turf owners and customers
alike. The following specific objectives outline the scope and goals of the project:

 Conduct an in-depth analysis of the current turf booking system and its limitations, including
challenges related to manual booking processes, scheduling conflicts, and lack of real-time
visibility into turf availability.

 Identify the needs and expectations of turf owners and customers, including preferences for
booking methods, scheduling flexibility, pricing structures, and user interface preferences.

 Develop a user-friendly and intuitive mobile application that caters to the unique requirements of
turf booking and management, prioritizing ease of use, accessibility, and functionality for both
turf owners and customers.

 Implement key features within the app, such as seamless booking functionality, real-time
availability updates, flexible pricing options, web editor, and booking log for turf owners.

Page |
  Evaluate the performance and effectiveness of the Sportzfy app through rigorous testing, user
feedback analysis, and performance metrics tracking, with a focus on identifying any usability
issues, technical glitches, or areas for improvement.

1.5 SUMMARY

Sportzfy is a revolutionary mobile application designed to transform the landscape of turf

booking and management. With a focus on enhancing the experience for both turf owners and
customers, Sportzfy offers a comprehensive solution to streamline operations, optimize resource
utilization, and elevate the overall customer experience. By conducting thorough analysis of the
current challenges faced in turf management, Sportzfy addresses common pain points such as
manual booking processes, scheduling conflicts, and lack of real-time visibility. Through user
feedback and meticulous testing, Sportzfy ensures that its user-friendly interface and intuitive
features meet the diverse needs and expectations of turf owners.

Page |
 CHAPTER 2
RELATED WORK INVESTIGATION

2.1 EXISTING APPROACHES/METHODS

In the segment of turf management, various app and web options exist, each offering unique
features and functionalities tailored to the needs of turf owners and customers. Some existing
options include platforms like Sporloc, which aim to streamline the booking process, optimize
resource utilization, and enhance the overall customer experience.

Sporloc provides turf owners with a comprehensive suite of tools to manage bookings, track
availability, and process payments seamlessly. Its user-friendly interface and intuitive features
make it a popular choice among turf owners looking to streamline their operations and improve
customer satisfaction. While these existing options provide valuable solutions for turf
management, each comes with its own set of strengths and limitations. it's essential for turf
owners to carefully evaluate their needs and preferences before selecting the most suitable app or
web option for their turf management needs. By leveraging the capabilities of these innovative
applications and web-based solutions, turf owners can optimize their operations, improve
customer engagement, and stay competitive in the ever-evolving turf industry landscape.

Page |
2.2 PROS AND CONS OF THE STATED APPROACHES/ METHODS

While turf management sites like Sporloc offer numerous benefits, they also come with their share of
drawbacks and limitations. Below are some potential cons associated with these platforms:


Complexity of Implementation: Implementing a new turf management system can be a complex
and time-consuming process. Turf owners may encounter challenges related to data migration,
system integration, and staff training, which can disrupt operations and incur additional costs.

 Cost Considerations: The upfront cost of acquiring and implementing a turf management
platform can be prohibitive for some turf owners, particularly smaller facilities with limited
budgets. Additionally, ongoing subscription fees and maintenance costs may further strain
financial resources over time.

 Learning Curve: Transitioning to a new turf management system may require a significant
learning curve for both turf owners and supervisor. Navigating the platform's interface,
understanding its features and functionalities, and adapting to new workflows can be challenging,
leading to productivity dips and potential user frustration.

 Limited Customization Options: While turf management platforms offer a range of features and
functionalities, they may lack the flexibility to accommodate specific business requirements or
unique operational workflows. Turf owners may find themselves constrained by the platform's
predefined settings and limited customization options, which can hinder their ability to tailor the
system to their needs.

 Technical Issues and Downtime: Like any software solution, turf management platforms are
susceptible to technical glitches, bugs, and system downtime. These issues can disrupt
operations, impact customer service, and erode trust in the platform's reliability and performance.

 Technical Support: The quality of customer support provided by turf management platform

Page |
 vendors can vary widely. Turf owners may encounter challenges in accessing timely assistance,
receiving satisfactory resolutions to their issues, or accessing resources and documentation to
troubleshoot problems independently.

 Scalability Constraints: As turf facilities grow and evolve, they may require a turf management
platform that can scale alongside their business. Some platforms may have limitations in terms of
scalability, hindering their ability to accommodate increasing booking volumes, expanding
facilities, or new business ventures.

Page |
 CHAPTER-3
REQUIREMENT ARTIFACTS

3.1 INTRODUCTION

For Sportzfy, ensuring the success of its app and website requires careful attention to a diverse range of
requirements across three key categories: functional, non-functional, and usability. Functional requirements
dictate the core features and capabilities of the app and website, encompassing functionalities such as booking
management, real-time availability updates, payment status, and communication channels between turf
owners and customers.
Non-functional requirements are equally critical, focusing on aspects such as performance, security, and
scalability. These requirements ensure that the Sportzfy platform can handle high volumes of bookings
securely, provide responsive performance even during peak usage times, and protect sensitive user data.
Usability requirements play a vital role in shaping the overall user experience of the Sportzfy app and website.
Intuitive navigation, clear and concise interfaces, and seamless user interactions are essential elements that
contribute to user satisfaction and engagement. By prioritizing usability, Sportzfy aims to create an accessible
and user-friendly platform that caters to the needs and preferences of both turf owners and customers.

3.2 HARDWARE AND SOFTWARE REQUIREMENTS

The hardware requirements for Underbelly Express’s canteen website are:

● Server: The website will require a server to host the website and manage incoming requests from
users.
● Storage: The website will require a database to store user information, order history, and menu
data.
● Network: The website will require a stable and reliable network connection to ensure quick
response times and prevent downtime.

Page |
 These hardware requirements are essential in ensuring the app and web’s performance, stability, and
security. By meeting these requirements, Sportzfy can provide a seamless and secure booking process for
its clients. Additionally, scalability is an important consideration for hardware requirements. As the
business grows and experiences more traffic, additional servers and hardware may be necessary to
maintain performance and prevent downtime.

The software requirements for Underbelly Express’s canteen website are:

● Node.js
● Express
● React native
● MongoDB
● VScode
● Programming languages like: JavaScript, CSS, HTML.

These software requirements are essential in building a functional and secure booking process on Sportzfy
App. By meeting these requirements, the website can provide a seamless and secure experience for its
clients.

3.3 SPECIFIC PROJECT REQUIREMENTS

3.3.1 Data Requirements:

● The app must store customer profiles for both Owners and managers to allow complete ownership to
the clients.
● The app must store a log of all booking , along with the name, phone numbers, slot time, area booked,
rate, discount etc.
● The app must store Booking details of all customers, including payment status and amount to be
paid.

Page |
3.3.2 Functionality Requirements:

● The app must allow different access mode for different users.
● The app must allow clients to navigate between all features like calendar, search, log book, web editor.
● The app must allow clients to check slot available and book it.
● The app must provide a slot confirmation box and WhatsApp message for confirmation.
● The app must have search integration to avoid going through all data.
● The app must allow clients to edit details and images in the website

3.3.3 Performance Requirements:

● The website must be responsive and load quickly on both desktop and mobile devices.
● The website must be able to handle multiple concurrent users without slowing down.
● The website and app must be able to handle a booking at peak hours.

3.3.4 Security Requirements:

 The App must use secure authentication protocols to prevent unauthorized access to
customer accounts.
 The server must sanitize the incoming data to prevent any form of malicious data attack.
 Different type of access control should be provided with different access codes.

3.3.5 Looks and Feel Requirements:

● The app and website must have a clean and modern design that is visually appealing.
● The app must be easy to navigate and use, with clear labels and instructions.
● The app must have multiple views for daily booking data.

These requirements are important to ensure that the Sportzfy app is functional, reliable, and user-
friendly, while also maintaining security and performance standards. By meeting these
requirements, the app can provide a positive experience for clients and help to build a strong brand
presence in the online domain.

Page |
3.4 SUMMARY

By creating and adhering to the mentioned requirement artifacts, we ensure that our app “Sportzfy” for the
turf is designed and implemented to meet the business and user needs, while also delivering high
performance, security, and usability.

Page |
 CHAPTER-4
DESIGN METHODOLOGY AND ITS NOVELTY

4.1 METHODOLOGY AND GOAL

For the Sportzfy project, we're using a design method called User-Centered Design (UCD). This means
we're focusing on what the users need and like when we're designing the app. Our goal is to make an app
that's easy and enjoyable for people to use when they want to book turf slots.

With UCD, we're doing a bunch of steps to make sure we're on the right track. First, we're talking to
users and learning about what they want. Then, we're making up "personas" to represent different types
of users. After that, we're making prototypes of the app and testing them out to see if they work well.
We're doing all of this to make sure that the final app is something that users will like and find useful.

On the technical side, we're using a method called agile software development. This means we're
working in small steps and making changes as we go along. We're getting feedback from users regularly
and making improvements based on what they say. This way, we can make sure that the app we're
building is always getting better and meeting the needs of the users.

By using UCD and agile software development together, we're making sure that Sportzfy is a great app
that people will love to use. We want to create something that's helpful and easy to use for everyone
involved, and these methods help us do just that.

Page |
4.1 FUNCTIONAL MODULES DESIGN AND ANALYSIS

Functional Modules for this project are:

● Login Module:

This module allows users to login with the app by providing their different credentials like a
username and password. Different set of credential are given to the owner and the supervisor for
having different level of access to the functions.

● Home Page and Analytics Module:

The Home page and Analytics module shows user different option on the screen like calendar,
search, web editor, signout, log book and also show the earning from current month and earning of
all time.

● Booking Calendar Module:

Within the app, the booking calendar module serves as a valuable tool for clients, facilitating the process
of finding and reserving available slots on the calendar. This feature ease the booking experience,
allowing users to conveniently browse through the calendar to identify open slots that align with their
scheduling needs.

● Log Book Module:

Through this module clients can effortlessly view all bookings made for a particular day, including
details such as name, contact number, booking time, and payment status, eliminating the need to
navigate through the calendar repeatedly.

● Search Integration Module:

Owners and managers can efficiently search for specific logs by entering the number, retrieving all
bookings associated with that particular number for quick reference and management.

Page |
 ● Web Editor Module:

With the Web Editor module, users gain the capability to modify images, update announcements, and
provide new information showcased on the website. This feature empowers users to maintain the
website's relevance and freshness by easily making edits without requiring technical expertise.

● Setting Module:

Within the Setting module, users possess the ability to adjust the default booking rates for various areas
and customize the messages sent to customers upon confirming their bookings. By providing flexibility
and customization options, the Setting module enables users to effectively manage and optimize their
booking processes to align with their business objectives.

Design:

The Sportzfy app has a modern and easy-to-use design, with a neat and simple layout. It mostly uses
white and blue colors, with some grey for important parts. The website works well on both computers
and phones, so it's easy to use no matter what device you're using.

The Sportzfy app is made with React-Native, and the website uses HTML, CSS, and JavaScript. The
backend part is supported by Node.js, Express, and MongoDB. The design is made in a way where each
part is separate and can be easily put together into the whole system.

4.2 SOFTWARE ARCHITECTURAL DESIGNS

For the project's architecture, we'll use Node.js and Express to create the server-side part. It'll handle
requests from the client-side. The App will be made with React-Native, making it easy to use and
understand. We'll store and get data from MongoDB, with MongoDB Atlas helping the server-side talk
to the database. The website will be made with common languages like JavaScript, CSS, and HTML.

Fig 1.0

Page |
Page |
 The architectural design includes the following components:

● Client-Side:

1. React Components: Each of the pages in the app are divided into reusable components
built with React.

2. State Management: State is managed with the React Context API, allowing for the passing of
data between components.

● Server-Side:

1. Node.js and Express: The server-side component is built with Node.js and the Express
framework.

2. API Endpoints: The server-side provide API endpoints that are accessed from the client-side,
allowing for the retrieval and storage of data.(rephrase)

3. MongoDB: The database component is built with MongoDB, with a MongoDB driver used to
communicate with the database from the server-side.(mongodb atlas)

4. Authentication: The server-side handle authentication, allowing users to securely log in and
access protected resources.

● Development Tools:

1. Vscode: A popular code editor that is used for development.

2. Git: A version control system that is used to track changes to the codebase.

This architecture provides a scalable and modular framework for the website, allowing for easy
maintenance and future expansion.

Page |
4.3 USER-INTERFACE DESIGNS

Page |
The Booking Calendar

The booking calendar feature in the Sportzfy turf app offers a comprehensive solution for managing turf
bookings efficiently. The calendar divides the entire day into equal time slots, typically by the hour, providing
users with a clear and structured view of available time intervals. This segmentation enables users to easily
identify open slots and select the desired start and end times to define the duration of their booking.
By allowing users to specify the starting and ending
slots, the booking calendar empowers them to customize
the duration of their bookings according to their specific
needs and preferences. Whether it's a brief practice
session, a friendly match, or a full-fledged tournament,
users have the flexibility to book turf facilities for the
duration that best suits their requirements. Moreover, the
booking calendar feature enhances user experience by
offering intuitive navigation and seamless interaction.
Users can effortlessly scroll through the calendar,
visually inspecting available time slots and making
selections with just a few taps or clicks. This streamlined
process eliminates the need for manual calculations or
guesswork, ensuring a hassle-free booking experience for
both turf owners and customers. Additionally, the
booking calendar serves as a centralized hub for
managing all turf bookings, providing turf owners with a
comprehensive overview of scheduled activities
throughout the day. This visibility enables turf owners to
optimize resource allocation, minimize scheduling
conflicts, and maximize revenue opportunities by
efficiently utilizing available time slots.
Overall, the booking calendar feature in the Sportzfy turf
app plays a pivotal role in facilitating seamless turf
booking experiences, empowering users to easily
schedule and manage their activities while enhancing
operational efficiency for turf owners. Its user-friendly
interface, customizable duration settings, and
comprehensive scheduling capabilities make it a valuable tool for both turf owners and customers alike.

Fig

Page |
The View Booking Dialog Box

In the Sportzfy app, the "view booking" dialog box is a pivotal

component that facilitates the booking process by prompting users to
input essential information before confirming a slot reservation. This
dialog box appears when users select an available slot on the app's
interface.
Within this dialog box, users are required to fill out several fields to
complete the booking transaction comprehensively:
1. Name: Users are prompted to input their full name, providing the turf
owner with a clear identification of the individual making the booking.
2. Number: Contact information in the form of a phone number is
requested, enabling the turf owner to establish communication with the
user if necessary.
3. Time: Users select the desired time slot for their booking from the
available options displayed in the app's calendar interface.
4. Description: A brief description of the booking purpose is entered,
offering clarity to the turf owner regarding the nature of the reservation,
whether it pertains to a training session, match, or other activities.
Fig
5. Area Booked: Users specify the particular area of the turf they intend to book, such as a specific field, court,
or pitch, ensuring accurate allocation of resources by the turf owner.
6. Rate: The rate for the booking is entered, often determined by factors like duration and time of day,
providing transparency regarding the associated costs.
7. Discount: Users may input any applicable discount codes or promotional offers to avail reduced rates,
enhancing affordability and incentivizing bookings.
8. Canteen Cost: Anticipated expenses for canteen purchases during the booking period are recorded, enabling
comprehensive financial tracking and reconciliation.
9. Payment Status: Users indicate the current payment status of the booking, specifying whether payment has
been successfully processed or is pending.
By meticulously filling out these fields, users ensure that all pertinent information required for the booking

Page |
transaction is accurately captured and communicated to the turf owner
The Log Book

The log book feature in the Sportzfy app serves as a comprehensive record-
keeping tool, providing users with a centralized repository to review all
bookings made for a given day, along with pertinent details associated with
each reservation.
Upon accessing the log book within the app, users are presented with a
detailed overview of all bookings scheduled for the selected day. This
information-rich interface typically includes the all details for each
booking.
By consolidating these details within the log book interface, users can
efficiently review and manage all bookings made for the day, facilitating
effective communication, financial tracking, and operational planning for
turf owners and administrators. This centralized record-keeping
functionality enhances transparency, accountability, and efficiency within
the booking process, ultimately contributing to a seamless and well-
managed turf management experience for all stakeholders involved.

Page |
 The Search Integration

The Search Integration feature in the Sportzfy app enhances user accessibility and facilitates efficient booking
management by enabling users to retrieve specific booking details through a streamlined search functionality.
This feature empowers users to effortlessly locate all bookings associated
with a particular individual by simply entering their contact number into the
search bar.
Upon accessing the Search Integration feature within the app, users are
presented with a user-friendly interface that prompts them to input the
contact number associated with the desired bookings. Once the contact
number is entered, the app leverages its integrated search algorithm to scan
the database and retrieve all relevant booking records linked to the provided
number.
The search results are then displayed in a comprehensive and organized
manner, presenting users with a detailed overview of all bookings attributed
to the specified contact number. Each booking entry typically includes a
range of pertinent details, such as the booking time, client name, reserved
time slot, description of the booking, booked area, booking rate, applied
discounts, canteen expenses, and payment status.

Fig This detailed presentation of booking information empowers users to swiftly

review and manage all bookings made by a specific individual, facilitating effective communication, financial
tracking, and operational planning for turf owners and administrators. Moreover, the Search Integration feature
contributes to enhanced transparency, accountability, and efficiency within the booking process, ultimately
enhancing the overall user experience and facilitating seamless turf management operations.

Page |
 The Search Integration

The Web Editor feature within the Sportzfy app empowers users with the capability to dynamically modify and
update website content, facilitating real-time dissemination of information, announcements, and updates
pertaining to tournaments, events, and news. This feature serves as a
versatile tool for users to exercise creative control over their online
presence, enabling them to curate engaging and relevant content that
resonates with their target audience.
Upon accessing the Web Editor feature within the app, users are
greeted with an intuitive and user-friendly interface that provides
seamless navigation and robust editing capabilities. The feature
typically encompasses a range of functionalities: -
Content Editing: Users can modify and update textual content
displayed on the website, allowing for the addition of tournament
schedules, event announcements, news articles, and other relevant
information. This flexibility enables users to keep their audience
informed and engaged with the latest updates and developments within
the turf community.
Photo Management: The Web Editor feature enables users to upload,
edit, and manage photos and images showcased on the website. Users
can easily swap out outdated images, add visuals to complement
textual content, and maintain a visually appealing and dynamic online
presence.
Fig
Announcement Creation: Users can create and publish announcements or alerts directly through the Web Editor
interface, notifying visitors of upcoming tournaments, special events, promotions, or other noteworthy updates.
Overall, the Web Editor feature empowers users to exercise creative autonomy and maintain a dynamic and
engaging online presence for their turf facilities. By providing robust editing capabilities and customization
options, this feature facilitates effective communication, community engagement

Page |
 The Setting Menu

The Settings menu within the Sportzfy app serves as a

comprehensive platform for users to customize and manage
various aspects of their turf facility operations, ranging from
adjusting default rates to configuring automated messaging
protocols and establishing rules and regulations. This feature
empowers users with granular control over critical parameters,
ensuring alignment with organizational objectives and operational
preferences.
Upon accessing the Settings menu within the app, users encounter
a meticulously designed interface that facilitates intuitive
navigation and seamless configuration of key settings. The feature
typically encompasses a diverse array of functionalities, including
but not limited to:
Rate Management: Users have the ability to customize default
booking rates for different areas or facilities within their turf
venue. This includes setting hourly rates, daily rates, or special
pricing structures for peak hours, weekends, or holidays. By
adjusting rates through the Settings menu, users can optimize
revenue generation strategies and maintain competitiveness within
the market.
Messaging Customization: The Settings menu enables users to
tailor automated messages that are sent to customers upon confirming their bookings. Users can personalize
message content, including booking confirmations, reminders, and updates, to reflect their brand identity and
communication style. This customization fosters a professional and engaging customer experience while
providing pertinent information to booking parties.
Rules and Regulations: Users can establish and enforce rules and regulations governing turf facility usage
through the Settings menu. This may include specifying booking policies, cancellation procedures, code of
conduct guidelines, and safety protocols. By clearly articulating rules and regulations, users promote
transparency, mitigate risks, and ensure compliance with legal and operational standards.

Page |
The Website Design
The Sportzfy website, meticulously crafted and seamlessly integrated with the accompanying app, offers users a
dynamic platform to access and manage a myriad of information pertaining to turf facilities. With a user-
friendly interface and robust functionality, the website serves as a comprehensive hub for users to stay
informed, engaged, and connected with their turf community. At the core of the Sportzfy website lies a wealth
of essential features and resources designed to cater to the diverse needs of users. Users can effortlessly navigate
through a repository of announcements, updates, and event schedules, ensuring they are always up-to-date with
the latest news and developments within the turf community. Additionally, comprehensive information
regarding turf facilities, including rules, regulations, and booking policies, is readily available to users, fostering
transparency and clarity in
facility operations.
The website also boasts an
extensive gallery showcasing
the turf facilities in all their
glory, allowing users to
visually explore and appreciate
the amenities and offerings
available. From pristine
playing fields to state-of-the-art facilities, the gallery provides a compelling glimpse into the world of turf
sports.
Furthermore, users can access vital contact information, facilitating seamless communication with turf
administrators and management teams. Whether seeking assistance, making inquiries, or providing feedback,
users can easily connect with the relevant stakeholders through the website's intuitive contact features. One of
the standout features of the Sportzfy website is its seamless integration with the accompanying app, enabling
users to make real-time updates and modifications to information and images directly from their mobile devices.
This synchronization ensures that changes made through the app are promptly reflected on the website, ensuring
consistency and accuracy across all platforms.

Page |
Page |
4.4 SUMMARY
The project was organized using a waterfall methodology, which means each stage flowed into the next,
starting from requirements gathering all the way to software design. The app we proposed to the client
offers a fresh way to handle turf bookings and monitoring. With this app, turf management can be
handled from anywhere, giving users a lot of flexibility and control. It's designed to be user-friendly,
making it easy for turf owners to manage their facilities and keep track of bookings remotely.

Page |
 CHAPTER-5
TECHNICAL IMPLEMENTATION & ANALYSIS

5.1 OUTLINE

I. Front-End Implementation
A. Website UI Design
1. Created prototype design
2. Building wireframes for initiation
3. Implementing UI using HTML, CSS, JavaScript
B. React-native app implementation
1. Setup react native project using create-react-native-app
2. Implement context for global state management
3. Implement multi-page navigation
4. Create basic widget components
5. Created base page components
6. Added functionality using hooks

II. Back-End Implementation

A. MERN implementation
1. Created environment using npm-init
2. Set-up Node.js and Express server
3. Configuring MongoDB Atlas for data storage
4. Use Express middleware for error handling and logging
5. Create API endpoints for data retrieval and manipulation
6. Establishing connection with mobile application
B. Authentication
1. Create endpoints for user registration and login
C. Database
1. Defining MongoDB database schema
2. Created dummy collections for testing
3. Implement CRUD operations for database manipulation

Page |
 III. Testing and Validation
A. Unit Testing
1. Manual testing of individual React components

IV. Deployment
A. Set up server deployment on cyclic.sh
B. Ensure proper scaling and performance of the application
C. Set-up front end hosting on Netlify and connecting with git

Page |
 5.2 TECHNICAL CODING AND CODE SOLUTIONS

1. Setting up the Development Environment:

● Install Node.js: This provided us with the runtime environment for executing JavaScript code
on the server-side.

● Install MongoDB: Used to set up the database for our project.

● Install VScode: Used this as your code editor for writing the project code.

● Set up React-Native: This gave us a basic project structure to start with.

2. Front-end Development:

● Create React Components: We built reusable and modular React components for different
sections of our application’s user interface.

● Implement HTML, CSS and JavaScript: We constructed the fundamental framework

using HTML, then enhanced its appearance with CSS, and added functionality using
JavaScript

● Implement Routing on server: created separate routes for handling various request for
either web or app.

● Fetch Data from APIs: Implement http request in app to fetch data from the server

3. Back-end Development :

● Establish Express Server: We created an Express server to manage requests from the client-
side and generate corresponding responses.
● Define API Endpoints: We devised and deployed RESTful API endpoints within Express,
catering to diverse functionalities including user authentication, data retrieval, creation, and
deletion.
● Connect to MongoDB Atlas: Leveraging a MongoDB driver like Mongoose, we established
seamless connectivity between our Express server and the MongoDB database.
● Define Data Structures: We outlined structured data formats for storing booking and setting
values, ensuring efficient data management within the system.

Page |
 4. Database Management:

● Set up MongoDB Collections: We built and establish MongoDB collections to store data
pertinent to various entities within the application.
● Execute CRUD Operations: We integrated Create, Read, Update, and Delete functionalities
within Atlas, enabling seamless interaction with the database collections .

5. Deployment:

● Hosting Setup: We opted for the hosting service provider Cyclic.sh to deploy our application
and make it available online.
● Environment Variables Configuration: We established environment variables to safeguard
sensitive data such as database connection strings or API keys.

5.3 Database Design

The ER diagram of the database is shown below, which is a type of diagram that illustrates the
relationship between entities in a database. The ER data model specifies an enterprise schema that
represents the overall logical structure of a database graphically. In this case, there are three entities:
user, setting,
and

booking_data. booking_data has unique attributes such as phone number, description, client name,

Page |
 from_date, till_date, and expenses, which includes attributes such as advance_payment, discount, and
rate_per_hour.

Fig
The user entity has attributes such as username, password, and type, while setting has attributes such
as default_rate, default_duration, and WhatsApp messages. The relationships depicted are user books
the data and modifies setting.

UML Class Diagram -

Page |
 Fig XX

Page |
UML Inteteraction Diagram

Fig 4.0

Page |
 5.4 SUMMARY

The technical approach taken for Sportzfy involved leveraging a combination of backend and frontend
technologies, along with database management and design tools. Here's a breakdown of the key
components used:
● Backend Development: Node.js and Express were employed to handle server-side operations. Node.js
facilitates running JavaScript code on servers, while Express simplifies API and web service development,
managing HTTP requests and routing. These technologies ensured efficient handling of server-side tasks
and interactions with MongoDB for data management.
● Frontend Development: React, along with JavaScript, CSS, and HTML, formed the foundation of
frontend development. React, a widely-used JavaScript library, enabled the creation of reusable UI
components, enhancing user interface functionality. JavaScript, CSS, and HTML were utilized to further
refine and style the application's frontend interface.
● Database: MongoDB Atlas served as the project's database, storing and retrieving data pertinent to
Sportzfy's features and functionalities. MongoDB Atlas provided a reliable and scalable database solution,
facilitating seamless data management within the application.
● Integrated Development Environment (IDE): Visual Studio Code (VS Code) served as the primary IDE
for coding tasks. VS Code offers a range of features and extensions, including syntax highlighting,
debugging tools, and source control integration, enhancing the development experience and productivity.
● Design and Prototyping: Gimp, a collaborative design tool, was utilized for designing and prototyping
Sportzfy's user interface. Gimp facilitated the creation of interactive prototypes, allowing for feedback and
review from stakeholders, thereby ensuring the development of a user-friendly and intuitive application.
By leveraging these technologies and tools, the Sportzfy project achieved efficient backend functionality, a
responsive frontend interface, seamless database integration, and effective design and prototyping. This
approach enabled streamlined development, code reusability, and the creation of a robust and user-centric
application.

Page |
 CHAPTER-6
PROJECT OUTCOME AND APPLICABILITY

6.1 KEY IMPLEMENTATION OUTLINES OF THE SYSTEM

● User Management:

A. Implement user registration and authentication using Node.js, Express.js, and MongoDB.

B. Create different user profile with set of credentials.

C. Enable concurrent access for owners and supervisors.

● Booking Calendar:

A. Develop a calendar format slot booking page.

B. Implement easy navigation in year months and dates.

C. Include add and cancel feature for slot booking.

● Log Book:

A. Design a listed of tab of the booked entities.

B. Allow user to view all details of the booked slot like name, slot, time, date, etc.

C. Create different Section for different areas.

● Web Editor:

A. Enable users to edit website from app.

B. Create a dashboard for update information and changing images on the website.

● Setting:

A. Create a user dashboard for changing app’s default rates.

B. Implement default message text field which can be modified in the setting menu

● Search Integration:

A. Allow user to search a particular slot by entering number of the customer.

Page |
 B. Display all the entries made by the customer in chronological order.

● Web Development:

A. Develop a web page for marketing purposes.

B. Display all the details like photos, dimensions contact information, rules etc.

C. Optimize load time and response time of the app and web integration.

These key implementations will form the core functionalities of the system, providing a robust and
user-friendly food ordering and delivering platform.

6.2 SIGNIFICANT PROJECT OUTCOMES

 Enhanced User Control: The ability for users to modify website content through the Sportzfy app
significantly empowered turf owners and administrators. This feature allowed them to swiftly
update announcements, adjust booking rates, and upload new images directly from their mobile
devices. As a result, users could promptly adapt to changing circumstances, ensuring that their
online presence remained current and informative.
 Improved User Engagement: By enabling users to actively participate in website management,
Sportzfy fostered a sense of ownership and engagement among turf owners. The interactive
nature of this feature encouraged users to regularly update their website content, resulting in a
dynamic and engaging online platform. Visitors were more likely to return to the website to
access the latest information, fostering a stronger connection between turf facilities and their
clientele.
 Streamlined Communication: The seamless integration between the Sportzfy app and website
facilitated streamlined communication between turf owners and their audience. Users could
effortlessly disseminate announcements, share updates, and communicate important information
directly through the website. This direct channel of communication improved transparency and
responsiveness, enhancing the overall user experience and satisfaction.
 Increased Operational Efficiency: The feature allowing users to make website changes via the
app contributed to improved operational efficiency for turf owners. Rather than relying on
external web developers or cumbersome content management systems, users could quickly and
easily update their website content on the go. This streamlined process reduced administrative
overheads, minimized delays in information dissemination, and optimized resource utilization
within turf facilities.
Page |
  Competitive Advantage: Sportzfy's innovative approach to website management conferred a
significant competitive advantage to turf facilities utilizing the platform. By empowering users
with the tools to maintain a dynamic and up-to-date online presence, Sportzfy distinguished itself
as a forward-thinking solution in the turf management industry. This feature not only enhanced
user satisfaction but also positioned turf facilities as proactive and responsive to customer needs,
thereby strengthening their competitive position in the market.

6.3 PROJECT APPLICABILITY ON REAL-

WORLD APPLICATIONS

The Sportzfy turf app has demonstrated its practical viability in real-world scenarios by effectively
enhancing operational efficiency and client satisfaction within turf management. Its seamless integration
into day-to-day operations has yielded tangible benefits, particularly in terms of revenue generation and
client retention. One of the primary advantages of the Sportzfy app lies in its capability to enable remote
management of turf facilities. This feature empowers turf owners to oversee and administer their venues
from any location, facilitating swift decision-making and proactive management.
By remotely managing bookings, updating facility information, and communicating with clients, turf
owners can optimize resource utilization and maximize revenue potential. The app's impact on revenue is
significant, as it enables turf owners to capitalize on opportunities and respond promptly to client inquiries
or booking requests.
By leveraging the app's functionalities, turf facilities can ensure optimal utilization of available slots,
leading to increased earnings over time. Furthermore, the ability to remotely manage turf facilities allows
owners to minimize operational costs and streamline administrative processes, further contributing to
bottom-line profitability. Client satisfaction is another key aspect of the Sportzfy app's real-world
applicability. Clients appreciate the convenience and flexibility afforded by the app, which simplifies the
booking process and enhances communication with turf owners. The app's user-friendly interface and
intuitive features contribute to a seamless booking experience, fostering positive client relationships and
promoting repeat business.

Page |
 6.4 INFERENCE
The Sportzfy turf app has proven its worth in the real world by boosting earnings and keeping clients
satisfied through remote management capabilities. By enabling turf owners to oversee operations from
anywhere, the app maximizes revenue potential and ensures efficient resource utilization. Clients
appreciate the convenience and seamless booking experience offered by the app, leading to enhanced
satisfaction and repeat business. Considering its success, there are plans to develop a similar app for other
turf owners, extending the benefits of streamlined management and improved client relations to a broader
audience

Page |
 CHAPTER-7
CONCLUSIONS AND RECOMMENDATION

7.1 OUTLINE

The Sportzfy turf management app has successfully achieved its objectives of revolutionizing the booking
and management process for turf owners and users alike. Key outcomes and achievements of this project
include:
 Development of a comprehensive app that streamlines turf booking, management, and
communication processes.
 Implementation of user-friendly features such as booking calendars, log books, and search
integration for seamless navigation and efficient operation.
 Integration with payment status updates to rectify payment with defaulter.
 Design and development of an intuitive and responsive user interface, enhancing user experience
and satisfaction.
 Implementation of administrative tools for turf owners to manage bookings, settings, and user
accounts with ease.
 Deployment of the app on a reliable platform, ensuring accessibility and reliability for users.

Throughout the project, we learned valuable lessons about the importance of planning, communication, and
thorough testing. These elements were essential in ensuring the success and functionality of the Sportzfy
app.

Looking ahead, there are areas for improvement that we plan to address, including:
● Integration of web editor access integration with React-Native components.
● Optimization of app performance to enhance speed and responsiveness.
In conclusion, the Sportzfy turf management app represents a significant advancement in the turf
management industry, providing users with a convenient, efficient, and user-friendly platform for booking
and managing turf facilities. We are proud of the outcomes and achievements of this project and remain
committed to further enhancing the app's functionality and user experience in the future.

Page |
 7.2 LIMITATIONS/ CONSTRAINTS OF THE SYSTEM

While the Sportzfy turf management system offers numerous benefits and functionalities, it also has
some limitations that need to be addressed. Some of these limitations include:

Limited Payment Gateway Integration: One of the main limitations of Sportzfy is the absence of
payment gateway options. This limitation could potentially inconvenience users who prefer to use online
payment method leading to a less than optimal user experience.

Lack of Advanced Analytics: Another limitation of Sportzfy is the absence of advanced analytics
features. While the system provides basic booking and management functionalities, it may lack robust
analytics capabilities. Advanced analytics features, such as detailed reporting and data visualization
tools, could provide valuable insights into turf utilization patterns.

7.3 FUTURE ENHANCEMENTS

In order to further enhance the Sportzfy turf management system and provide users with an even more
comprehensive and seamless experience, several future enhancements are planned. These enhancements
include:

 Implementation of Cashback System: Introducing a cashback system within Sportzfy will

incentivize users to make bookings and engage with the platform regularly. By offering cashback
rewards for bookings or referrals, turf owners can encourage repeat business and foster loyalty
among their clientele. This feature will not only attract new users but also retain existing ones,
ultimately driving increased usage and revenue generation.

 Advanced Analytics Capabilities: Enhancing Sportzfy's analytics capabilities will enable turf owners
to gain deeper insights into their operations and make data-driven decisions. Advanced analytics
features, such as detailed reporting, predictive analytics, and trend analysis, will provide valuable
insights into turf utilization patterns, customer behavior, and revenue trends. By leveraging these
insights, turf owners can optimize their operations, improve customer satisfaction, and maximize
profitability.

Page |
  Improved User Interface (UI): Enhancing Sportzfy's user interface (UI) will elevate the overall user
experience and make the platform more intuitive and visually appealing. By incorporating modern
design principles, streamlined navigation, and interactive elements, the UI will provide users with a
seamless and enjoyable booking experience. Additionally, implementing responsive design
techniques will ensure that Sportzfy is accessible and optimized for use across various devices and
screen sizes.

7.4 INFERENCE

In summary, the future enhancements planned for the Sportzfy app aim to elevate its functionality and
user experience. These include the implementation of a cashback system to incentivize bookings,
advanced analytics capabilities for data-driven decision-making, and improvements to the user interface
for enhanced usability.
However, it's important to acknowledge the current limitations of the Sportzfy app, such as the absence
of payment gateway options, advance analytics, and reward system. Addressing these limitations will be
essential to ensuring the continued success and effectiveness of the Sportzfy.

Page |
 Appendix - A (Screenshots)

Page |
Page |
Page |
Page |
Page |
 Appendix – B (Coding)

Page |