An-Najah National University 

Faculty Of Engineering Computer Engineering Department 

 

Graduation Project 1 (Software) 

Pic-A-Boo 

Your Booking App for Special Moments 

  

Rahaf Birawi 

Masa AbdalNasser Issa 

 

Supervisor: 

Dr. Suleiman Abu Kharmeh 

 

 

Presented in partial fulfillment of requirements of bachelor's degree in 
computer engineering 

Jan 2025 



Acknowledgement 

 

On begin giving thanks and praise to Allah for providing us with 

the knowledge, persistence, strength to finish this endeavor.  

 We would like to express our gratitude to our supervisor Dr. 

Suleiman for all his help and guidance on this semester.  

 

Finally, to our family and friends for their support and for always 

being there for us, we love you.  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



 Disclaimer 

 

This report was written by Rahaf Birawi and Masa Issa at the 

Computer Engineering Department, Faculty of Engineering, An -Najah 

National University. It has not been altered or corrected, other than 

editorial corrections, because of assessment and it may con tain 

language as well as content errors. The views expressed in it together 

with any outcomes and recommendations are solely those of Rahaf 

and Masa . 

An-Najah National University accepts no responsibility or liability for 

the consequences of this report being used for a purpose other than 

the purpose for which it was commissioned 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



Contants  
Acknowledgement ........................................................................................................ 2 

Disclaimer .................................................................................................................... 3 

Contants ...................................................................................................................... 4 

List of Figures: .............................................................................................................. 7 

Abstract ..................................................................................................................... 10 

Chapter 1: Introduction ............................................................................................... 11 

1.1 General Background and motivation .................................................................... 11 

1.2 Problem ............................................................................................................. 12 

1.3 Objective ........................................................................................................... 13 

1.4 Scope of the project ........................................................................................... 13 

Chapter 2: .................................................................................................................. 14 

2.1 Constraints and Earlier coursework ..................................................................... 14 

2.2 Earlier coursework ............................................................................................. 15 

3.2 Literature Review................................................................................................ 15 

Chapter 3: Methodology .............................................................................................. 16 

3.1 Tools, Methods and Programming Languages ....................................................... 16 

3.2 Standards .......................................................................................................... 17 

3.2.1 MVC (Model View Controller)......................................................................... 17 

3.2.1 Client Side ................................................................................................... 18 

Design: ............................................................................................................. 18 

Framework: ....................................................................................................... 19 

Programming Languages: ................................................................................... 19 

3.1.2 Server Side: .................................................................................................. 20 

Architecture ...................................................................................................... 21 

Framework ........................................................................................................ 21 

3.3 Backend Development ....................................................................................... 22 

3.3.1 API’s We Use ................................................................................................ 23 

Google Maps API ............................................................................................... 23 



Calendar API ..................................................................................................... 23 

Chart.js API ....................................................................................................... 24 

Map API ............................................................................................................ 24 

Navigation API ................................................................................................... 25 

Expo Location API .............................................................................................. 25 

Document Picker Integration .............................................................................. 26 

3.3.2 API Testing with Postman .............................................................................. 27 

Chat API Testing: ............................................................................................... 27 

Notifications API Testing: ................................................................................... 28 

Chapter 4: System Features and Implementation .......................................................... 29 

4.1 Home page ........................................................................................................ 29 

4.2 Login and Registration feature ............................................................................. 33 

4.2.1 Log in ........................................................................................................... 33 

4.2.2 Login and Register Error Notification .............................................................. 34 

4.2.3 User Type Selection ...................................................................................... 35 

4.3 User’s Screen and Features ................................................................................ 37 

4.3.1 Home screen ............................................................................................... 37 

4.3.2 Posts Filtering .............................................................................................. 38 

4.3.3 Location Save Confirmation .......................................................................... 38 

4.3.4 Follow Confirmation ..................................................................................... 40 

4.3.5 Map Integration for Location Selection ........................................................... 40 

4.3.6 Photographer Profile Interaction .................................................................... 42 

4.3.7 Appointment Booking ................................................................................... 46 

4.3.8 User Profile Management .............................................................................. 48 

4.3.9 Life Chat with file attachment ........................................................................ 51 

4.3.10 Location Browsing and Booking ................................................................... 53 

4.4 Photography’s Screens and Features ................................................................... 57 

4.4.1 Log in as a photographer ............................................................................... 57 

4.4.2 Photographer Profile and Dashboard management ......................................... 57 



4.4.3 Appointment Managment ............................................................................. 62 

4.5 Place Owner’s Screens and Features ................................................................... 67 

4.5.1 Log in as a place owner ................................................................................. 67 

4.5.2 Place Owner Profile and Dashboard Managment ............................................ 68 

4.5.3 Appointment Management ............................................................................ 71 

4.6 Admin’s Screens and Features ............................................................................ 73 

4.6.1 Login as an Admin ........................................................................................ 73 

4.6.2 Admin Home Page ........................................................................................ 74 

4.6.3 Registration Review and Search ..................................................................... 75 

4.6.4 User Data Export .......................................................................................... 77 

4.6.5 Reservation and Photographer Performance Graphs ....................................... 78 

4.7 Mobile Application Screens ................................................................................. 80 

4.7.1 User: ........................................................................................................... 80 

4.7.2 Photographer: .............................................................................................. 85 

4.7.3 Place Owner ................................................................................................ 90 

 

 

   

  

   

 

 

 

 

 

 

 

 



List of Figures: 
Figure 1:MVC .............................................................................................................. 18 
Figure 2: client side ..................................................................................................... 20 
Figure 3:server side ..................................................................................................... 21 
Figure 4: Express JS ..................................................................................................... 22 
Figure 5:Google Maps API ............................................................................................ 23 
Figure 6:Calendar API .................................................................................................. 23 
Figure 7:Chart.js API .................................................................................................... 24 
Figure 8:Map API ......................................................................................................... 24 
Figure 9:Navigation API ................................................................................................ 25 
Figure 10:Expo Location API ......................................................................................... 25 
Figure 11:Document Picker Integration ......................................................................... 26 
Figure 12:Chat API Testing ........................................................................................... 27 
Figure 13:Notifications API Testing ............................................................................... 28 
Figure 14:Home page .................................................................................................. 29 
Figure 15: About us ..................................................................................................... 30 
Figure 16:Gallery ......................................................................................................... 30 
Figure 17:Portfolio....................................................................................................... 31 
Figure 18:Services ....................................................................................................... 31 
Figure 19:Blog ............................................................................................................. 32 
Figure 20:Contact Us .................................................................................................. 32 
Figure 21:Log in ........................................................................................................... 33 
Figure 22:incorrect Password or Email .......................................................................... 34 
Figure 23:fill out the fields............................................................................................ 34 
Figure 24:User Type Selection ...................................................................................... 35 
Figure 25:Client Register ............................................................................................. 35 
Figure 26:Photographer Register .................................................................................. 36 
Figure 27:Users Home page ......................................................................................... 37 
Figure 28:Home page posts ......................................................................................... 37 
Figure 29:Filter posts by gender or date ........................................................................ 38 
Figure 30:Filter posts by location .................................................................................. 38 
Figure 31:Save location ............................................................................................... 39 
Figure 32:Location has been saved .............................................................................. 39 
Figure 33:Follow ......................................................................................................... 40 
Figure 34:5 Map Integration for Location Selection ........................................................ 40 
Figure 35:Notification .................................................................................................. 41 
Figure 36: View photographer profile ............................................................................ 42 



Figure 37:Photographer Accessories ............................................................................ 43 
Figure 38:About photographer ..................................................................................... 43 
Figure 39:Contact photographer .................................................................................. 44 
Figure 40:click "view more" .......................................................................................... 44 
Figure 41:View Accessories(1) ..................................................................................... 45 
Figure 42:View Accessories(2) ..................................................................................... 45 
Figure 43: Book photographer appointment .................................................................. 46 
Figure 44:Select time .................................................................................................. 46 
Figure 45:fill information .............................................................................................. 47 
Figure 46:Delete appointment...................................................................................... 47 
Figure 47:User Profile Management .............................................................................. 48 
Figure 48:Client Profile (Booked sessions) .................................................................... 49 
Figure 49:Client Profile (Favorite Locations) .................................................................. 49 
Figure 50:Client Profile (Edit user information) .............................................................. 50 
Figure 51:Life Chat ...................................................................................................... 51 
Figure 52: file attachment ............................................................................................ 52 
Figure 53:Life Chat with file attachment ........................................................................ 52 
Figure 54:Location Browsing ........................................................................................ 53 
Figure 55:Search by location ........................................................................................ 54 
Figure 56:View place profile ......................................................................................... 54 
Figure 57:Pictures of the place ..................................................................................... 55 
Figure 58:Select time to Book ...................................................................................... 55 
Figure 59:fill information .............................................................................................. 56 
Figure 60:Log in as a photographer ............................................................................... 57 
Figure 61:home page for photographer ......................................................................... 57 
Figure 62:Photographer Profile and Dashboard management ......................................... 58 
Figure 63:Photographer Profile (view material) .............................................................. 59 
Figure 64: Delete one of materials ................................................................................ 59 
Figure 65:add material ................................................................................................ 60 
Figure 66:new material added ...................................................................................... 60 
Figure 67:edit photographer information ....................................................................... 61 
Figure 68:Photographer Appointment Management ....................................................... 62 
Figure 69:view appointments ....................................................................................... 63 
Figure 70:Delete appointment...................................................................................... 63 
Figure 71:Accept the appointment ............................................................................... 64 
Figure 72:filtering the calendar ..................................................................................... 64 
Figure 73:Add new appointment time ........................................................................... 65 
Figure 74:Log in as a place owner ................................................................................. 67 



Figure 75:place owner home page ................................................................................ 67 
Figure 76:Place Owner Profile and Dashboard Management .......................................... 68 
Figure 77:the place photos .......................................................................................... 69 
Figure 78:Delete place photo ....................................................................................... 69 
Figure 79:add new place photo .................................................................................... 70 
Figure 80: Edit place owner information ........................................................................ 70 
Figure 81: Appointment Management ........................................................................... 71 
Figure 82:Delete Appointment ..................................................................................... 72 
Figure 83:accept appointment ..................................................................................... 72 
Figure 84:log in as admin ............................................................................................. 73 
Figure 85:Admin Home Page ........................................................................................ 74 
Figure 86:search by user type ...................................................................................... 74 
Figure 87:accept or reject applications ......................................................................... 75 
Figure 88:Search by name ........................................................................................... 76 
Figure 89:Download Excel sheet .................................................................................. 77 
Figure 90:view Excel sheet ........................................................................................... 77 
Figure 91:booking months chart 1 ................................................................................ 78 
Figure 92:booking photographer chart2 ........................................................................ 79 



 

 

Abstract 
 

In this project, an integrated website and mobile application were designed to book 
and improve the service flow of photography sessions across the services such as 
MySQL, React, Express, and Node.js  .  It was possible to make appointments, 
contact photographers, and choose between several photographic sessions. Other 
major self-explanatory facets of the application were calendar for the immediate 
booking of a photographer, chat windows for interaction with the particular 
photographer in real time, and mappi ng facilities for identification or booking of 
location for the shooting session, additional options that can be added to a 
particular session. Photographers developed special web sites for portfolios, which 
allowed users to select the sessions and to rate  them with the help of feedback 
service of the application. In terms of payment the necessary conditions were 
provided to provide the clients and photographers with convenient and problem -free 
payment solutions. These interface designs were created to be u ser cooperative and 
user friendly, resulting in functional, let alone aesthetic, solutions to meet the 
demands of the existing photographic market. Having all of these features in one 
system, the project offered a perfect solution for organizing and runnin g 
photographic sessions successfully.  

 

 

 

 

 

 

 

 

 



 

Chapter 1: Introduction  
1.1 General Background and motivation  

The photography industry has grown remarkably due to the growing availability of better quality 
photos in different fields including social communications and personal occasions. But, the 
process of booking photography or any related service still tends to be uncoordinated as well as 
lacking in efficiency. Most clients and photographers are still using primitive ways of arranging 
appointments, communicating with schedules and managing bookings which often takes a lot of 
time and results to errors in the end. Consequently, these inefficiencies are detrimental to 
customer satisfaction and create lost business opportunities and diminishing organizational 
growth. That is why our Pic-a-Boo was created specifically to simplify the process of booking 
photographers for photography services and make it joyful for both sides. Through the platform, the 
users can make appointments, contact photographers, select a range of sessions, and paying for 
them online securely. Besides enabling users to book photographs based on basic parameters, 
Pic-a-Boo has other services to improve the aspects of photography booking. Clients need not be 
restricted to photographers within their geographical areas but can instead book a session with 
photographers they prefer, view galleries, and make informed decisions about the date and time of 
their photo sessions. Guru: Photographers on the other hand can create profiles and be able to 
promote their work and sell directly to their clients. 



One of the most valuable aspects in using Pic-a-Boo would be that it can help to enhance business 
performance for those photographers. Thanks to the automation and data entering most of the 
routine tasks that photographers used to engage into, the application benefits the photographers 
by cutting down their working time, helping to organized sessions more effectively and reach a 
wider audience of clients. Such an automated process means that what is in store for the clients, 
who want to book the services of a photographer, is as seamless a process as possible which in the 
long run will generate better business outcomes. A love for technology and detailing make this 
company’s goal to transform photography as we know it today possible through mastery of 
software development. As future professionals we saw the potential of applying technical 
knowledge within practical efforts within the sphere of photography. The idea behind Pic-a-Boo is 
to make the employing process between clients and photographers, and the experience for the 
remaining users fun, straightforward, and positive. The idea behind Pic-a-Boo is to make the 
employment process between clients and photographers, and the experience for the remaining 
user's fun, straightforward, and positive. In addition, we understand the importance of Pic-a-Boo in 
helping small and medium photography enterprises to get affordable and easy to use websites. For 
this reason, Pic-a-Boo provides the photographers with a cheaper and effective way to offer their 
services, gain more clients and expand their agencies. As for Pic-a-Boo baseline profit, our primary 
objective is to provide a complete solution that will improve the photography services quality for 
the clients and assistants, as well as develop the sphere of photography. 

 

 

 

1.2 Problem  

As described in the Background and Motivation section, both photographers and clients 
use outdated, time-consuming and susceptible to mistakes tools and apply a range of 
manual methods to manage the booking and organization of photo sessions. These non-
automated approaches often result in dissatisfied clients, missed opportunities and even 
general problems with business development. They include communication barriers, lack 
of well-coordinated schedules, and payment problems that also affect the inefficiency of 
the industry. These challenges have been met by our Pic-a-Boo application because it is an 
easy-to-use application that is also technologically sophisticated. Reducing the number of 
operations that photographers are forced to perform by hand and improving the quality of 
the booking process makes it better for both photographers and clients. Lastly, the vision 
of Pic-a-Boo is to bring the meetings of the client and photographer to a more smooth, 
constructive, and reasonable level towards organizing the desired session. 



 

1.3 Objective  
The primary goal of the Pic-a-Boo project is to try and solve the problem of trying to find 
photographers and booking a session with them as quickly and easily as possible. It also 
seeks to improve communication. We offer an integrated real-time chat that enables the 
exchange of messages between the photographers and users of the application. 
Photographers are offered individual pages to display their portfolios and thus the clients 
can make sound choices. Further, there is a professional calendar for the increase in 
productivity in the field of scheduling, as well as a safe possibility for the transactions 
making. In addition, opting for session kind, accessories, and locations of the session also 
adds to clients’ flexibility within Pic-a-Boo. The application also fosters business 
opportunities where photographers including small medium business owners get to get 
many clients, while developing their services. Thanks to a user-friendly interface and logo, 
the site meets the requirements of the contemporary photography market and encourages 
sellers’ confidence due to feedback and ratings. In addition, integrated mapping services 
allow customers search a proper photography location and make a booking of spots 
accordingly 

 

1.4 Scope of the project 

The scope of our Party Planner application project is to develop a complete software 
solution that addresses the challenges and goals mentioned in the Problem Statement 
and objective sections. 

 

1.5 Importance 

Business customers who will be using our Pic-a-Boo application will find the interface 
created in a way that makes it possible to reduce operations that take place manually, and 
to offer new tools that make the overall procedure of the booking and management of 
photographs much easier to accomplish. It offers the following benefits: 

1. Automation of manual processes: 

Various tasks related to photography session such as bookings, control over session 
choices, payments and progress of booked appointments are some of the features that are 



automated by this application. Notifications and chat minimize the time and effort to sync 
with the clients and the photographers. 

2. Improved customer experience: 

Pic-a-Boo is a simple interface through which clients can reach photographers and find 
information on the services within the site and on specific photographers, make 
appointments and get in touch with the photographers. This confirms greater satisfaction 
and thus feeds loyalty that is long term. 

3. Increased efficiency and accuracy: 

Some traditional booking processes and the organization of schedules can be delegated to 
the application, and therefore the main advantages include increased speed, fewer 
mistakes, and the potential for disruption of communication. This enables photographers 
to give their clients a tasteful and professional approach to taking photography services. 

4. Provision of valuable insights: 

Organizational decision-makers and photographers that manage the Pic-a-Boo site receive 
useful data such as booking history, revenue data, and consumer preferences. They 
include basic and advanced statistics that help make evidence-based decisions regarding 
services to offer, how to enhance customer experience, and thus expand operations. 

 

Chapter 2: 

2.1 Constraints and Earlier coursework 

1. Several difficulties were observed during the analysis of requirements as well as during 
the testing of components that should meet the needs of various clients and 
photographers. Another major drawback while designing was the issue of achieving an 
optimum between utility and style on one end of the scale, and between meeting the 
different needs of the users on the other end of the scale.  

2. This timeline presented some challenges in developing Pic-a-Boo, due to the 
commitment of the team to other activities besides academics and other projects they 
were working on. Also, practicing with technologies including Flutter, React and back-end 
tools like Node.js were new to us for the first time, directing a significant amount of time to 
understanding these forms and languages. Our work was limited to four months, and 



during that period, the team mainly concentrated on the learning of the technologies and 
the provision of basic functions.  

3. A final limitation originated from the limited nature of the testing environment, dedicated 
to the platform only. Because of the availability of only a few iOS devices, the application 
was tested and further developed on Android devices only. This platform limitation came 
to affect the extent of testing since we focused our efforts on guaranteeing Android users a 
stable experience given the limitations. 

 

 

 

 

 

 

 

2.2 Earlier coursework 

From the Computer Engineering courses that we took; it was very helpful in that we were 
able to build and design the Pic-a-Boo application. From the Web Programming and 
Object-Oriented Programming studied in our classes, each was applied as the 
fundamentals for this project. To gain further experience, course study was complemented 
by attendance of the Node.js bootcamp and studying MySQL at the university. Further, we 
subscribed to the programs on Udemy to master Flutter and React since these languages 
are indispensable for front-end development. These additional resources enhanced the 
design and effectiveness of this application to a very large extent. 

 

3.2 Literature Review 

 
The need for development of Pic-a-Boo was identified regarding current systems and their 
inability to satisfy the photographers as well as clients adequately. Other platforms like 
Thumbtack, Snappr, and ShootProof are booking, and management services of session 
photography where photographers use these platforms to display their work and clients 



book sessions from these photographers. But these platforms usually do not possess the 
features such as real time communication tools, choice of session from a list of options 
and integrated services like choice of accessories and mapping. Other systems provide 
either fragmented or a portion of the travel photographic booking service offering 
scheduling or payment processing functionalities, but none provide an all-around 
experience. Here, independent photographers or small businesses are overshadowed by 
larger companies or must pay through the roof or are not able to customize enough. Pic-a-
Boo aims to fill these voids with a single solution that targets photographers and 
customers in equal measure. Common features like instant messaging, secure payment 
solutions, configurable session parameters, and mapping are included and make it 
simpler and quicker to use. In addition, Pic-a-Boo enhances equity to new and young 
photographers through the provision of cheaper portfolio management tools and 
engagements hence improving their standing in the market. 

 

Chapter 3: Methodology  
Methodology From the literature review of the photography booking platforms and after 
conducting a prior research, it can be deduced that Pic-a-Boo is a major step forward in 
improving the flow and experience of the photographers as well as the clients. The 
methodology used in the conduct of this research, as well as the collection, analysis, and 
processing of data to develop the application, is presented in this chapter. It also 
describes the tools, technology and system adopted in developing Pic-a-Boo, and the 
results obtained from the development. As part of the methodology, the current systems 
were assessed to reveal their drawbacks and the requirements of the intended audience 
guided the development of the main elements of the system. The following chapter 
expounds on the techniques utilized to guarantee that Pic-a-Boo hosts a capable, user-
friendly and efficient platform for booking and organizing photo shooting sessions. 

 

 

3.1 Tools, Methods and Programming Languages 

While designing Pic-a-Boo, we used some of the tools, techniques, methods and 

programming languages to come up with an application that is effective and easy to use. At 

the front-end, we use React and React Native, this gives our application a modern and 

interactive user interface compatible with both the web and mobile devices. On the 

backend side, we utilized Node.js and Express.js to create a RESTful API; moreover, to 



handle the application data and business logic, we utilized the Sequelize ORM. MySQL is 

used on the backend as the application database which effectively handles the relational 

database scheme of the application. With the help of these tools, and following a set 

development pattern, we were able to set up an effective and integrated system for 

organizing the photography sessions. 

 

 

 

 

 

3.2 Standards 

3.2.1 MVC (Model View Controller) 

In our project, we implemented the Model-View-Controller (MVC) pattern to structure our 
system efficiently: 

Model: This part represented our database, MySql. The model, detailed with expert profiles 
and relevant data, is central to training and updating in response to requests from both the 
view and controller. 

View: This is the graphical user interface (GUI) used by different users like admins, 
students, and experts. It facilitates various functions such as making reservations, 
managing bookings, asking questions, and rating and searching features. 

Controller: Serving as the backbone, it's built with Node.js and handles the backend 
operations of both the application and the website. It's crucial for linking the Model and the 
View, ensuring they work together seamlessly. 

 



 

Figure 1:MVC 

 

 

 

3.2.2 Client Side 

Design:  

At the start of the Pic-a-Boo application project, the design of the client side followed a 
series of group discussions and comprehensive research which formed the basis of unique 
and appealing concept. This idea was created out of a passion for photography and 
devotion to building the most efficient system for the organization of a photography 
session booking. Contrary to utilizing standard UI templates for typical business 
applications, we devoted a lot of time in developing a thoughtful and unique application UI. 
The UI design was made in-house, although the interfaces designed, and its aspects were 
based on our findings as well as actual practices with reference to user needs and 
standards of the trade. The primary consistent that this approach allowed for was the 
fashioning of a design layout that is an aesthetic fit of the brand image and theme of the 
application. Also, using a coherent set of colors, we ensured that the application’s 
atmosphere contributes to the overall enjoyable and comfortable experience of a user. 

 



Framework: 

For our client-side development, we utilized React and React Native, popular open-
source frameworks for building user interfaces. React allows us to develop a dynamic and 
interactive web interface, while React Native extends these capabilities to create mobile 
applications for both iOS and Android platforms using a shared code base. We selected 
React and React Native for their robust ecosystems, reusable component structure, and 
cross-platform development efficiency. By employing these frameworks, we streamlined 
the development process, eliminating the need for separate native programming for each 
platform. This approach saved us valuable time and effort while ensuring a consistent user 
experience across web and mobile platforms. React and React Native’s extensive libraries 
and community support further solidified our decision, making them the ideal choice for 
delivering the intuitive and responsive interfaces required for Pic-a-Boo                             

 

 

 

 

 

Programming Languages: 

 When constructing Pic-a-Boo, JavaScript was used as the main language on both the client 

as well as server side. JavaScript is a friendly, powerful and an object oriented language 

that has been used in the modern world development of web and mobile applications. 

JavaScript is able to adapt and be flexible which also is fueled by a large amount of libraries 

and frameworks, along with us having exposure to the language during our university 

years. Thus, with the help of libraries and frameworks like React, React Native and Node.js 

JavaScript allowed keeping the process of development effective and scalable. Its capability 

to operate dynamic, real-time features it is suitable for the application hence becoming an 

essential tools that supports delivery of a good user experience. 

 



     

Figure 2: client side 



3.2.3 Server Side: 

 

Architecture 

In the case of Pic-a-Boo’s design, we decided to have a client-server structure which 
supported multiple client communication through the same server. The server tier was 
implemented specifically for a RESTful API enabling clean interaction between the client 
tier and the server tier. 

Framework  

In terms of server-side scripting the main frameworks used were Node.js and Express.js. 
These technologies have been selected because of their virility, community of users, and 
stunning results that will fit perfectly within our project needs. Node.js has excellent I/O 
control in parallel and is event based, thus allowing for many similar requests to be 
processed simultaneously, and Express.js is an advantageous way to work with strong API 
using simple features and middleware. Considering the Node.js and Express.js in parallel 
with each other, we created a dependable and efficient backend framework to meet the 
fundamental requirements of Pic-a-Boo. 

       

Figure 3:server side 



3.3 Backend Development 

Express Js: 

is a simple and flexible framework used in Node.js to build web applications and APIs. It 
makes web development easier by handling tasks like routing (directing traffic based on 
URLs) and dealing with HTTP requests and responses. You can also extend its features 
with various plug-ins, known as middleware. Express.js is popular for its simplicity and 
speed, making it a great choice for creating efficient web applications. 

Basic routing: 

Put, Delete, Post, Get 

 

Figure 4: Express JS 



3.3.1 API’s We Use  

Google Maps API 

• Purpose: To display and interact with maps, provide directions, and help users 
locate photo session venues with ease. 

• Usage: This API is used for features such as mapping photo session locations and 
integrating search functionalities for places. 
 

 
Figure 5:Google Maps API 

Calendar API 

• Purpose: To manage bookings and display available dates and times. 
• Usage: Enables users to select time slots for photography sessions and provides 

reminders for appointments. 
 

 
Figure 6:Calendar API 



 

Chart.js API 

• Purpose: To create interactive and visually appealing data visualizations such as 
bar charts, line graphs, and pie charts. 

• Usage: This API is utilized in the dashboard to display metrics, such as the number 
of visits to a place, photographers' working hours, or other analytical data. It 
provides an intuitive way for users to understand performance and trends. 

 
 

 
Figure 7:Chart.js API 

 

Map API 

• Purpose: To provide an interactive map interface for users to view and explore 
locations available for photography sessions. 

• Usage: The Map API is used in the application to display the locations of photo 
session venues. Users can interact with the map to see specific places, such as 
landmarks or studios, along with their details like contact information, address, and 
images. This feature enhances user experience by offering a visual and intuitive way 
to locate and select places for their sessions. 

 

 
Figure 8:Map API 



Navigation API 

• Purpose: To facilitate seamless movement between different pages and 
components within the application. 

• Usage: The navigation system enables users to move intuitively through the app. 
For instance: 

o Users can navigate from the homepage to detailed location pages. 
o Access their personal profiles. 
o Switch between chat, notifications, and booking pages. 

 

 
Figure 9:Navigation API 

 

Expo Location API 

• Purpose: To access and utilize the user's geographical location within the 
application, enhancing features that rely on location-based services. 

• Usage: 
o Retrieve the user’s current location to personalize their experience. 
o Display nearby photography session locations. 
o Support map features, such as showing directions or pinpointing session 

locations. 
o Filter available photo shoot places based on the user’s city or current 

location. 
 

 
Figure 10:Expo Location API 

 

 

 

 



Document Picker Integration 

• Purpose: 

• The Document Picker API was implemented to allow users to upload files or 
documents, such as contracts, reference images, or additional session details, 
directly from their devices into the application. 

• Usage: 
o Enable users to attach files in chats or booking details. 
o Allow photographers and location owners to upload images or documents, 

such as accessory details or venue specifications. 
 

 
Figure 11:Document Picker Integration 



 

3.3.2 API Testing with Postman 

• Purpose: 
       Postman was used extensively to test and validate the functionality of APIs 

related to real-time chat and notifications. This ensured that the system 
delivered reliable and accurate communication features. 

• Usage Scenarios: 

Chat API Testing: 

▪ Verified message delivery between users (e.g., customers, 
photographers, and place owners). 

▪ Tested endpoints for sending and retrieving messages in real-time. 
▪ Ensured that attachments, such as images or files, were successfully 

uploaded and displayed. 
 

 
Figure 12:Chat API Testing 



 

Notifications API Testing: 

• Ensured users received appropriate notifications for new messages, booking 
reminders, or updates. 

• Tested the delivery of push notifications to the intended recipients. 
 

 
 

Figure 13:Notifications API Testing 



 

Chapter 4: System Features and Implementation 

 

4.1 Home page                                                                                                                                                       

 

 

 

 

 

Figure 14:Home page 



 

Figure 15: About us 

 

 

Figure 16:Gallery 



 

Figure 17:Portfolio 

 

 

Figure 18:Services 



 

Figure 19:Blog 

 

 

Figure 20:Contact Us 



4.2 Login and Registration feature 

4.2.1 Log in 

To have access to all the services included in the application, the user must sign in. In this 
case, the correctness of the entered data both topical and identifier is checked, as well as 
the match to the account registered earlier using the username and password 
combination. If the password entered is not the right one as registered for the user, then a 
message saying that the password entered is wrong will be shown. In case of the new user, 
they must register the help of the registration button that is placed on the same screen to 
access the application’s services. In our application, there are four types of users who can 
access the platform: the customer, the photographer, the owner of the photo session 
location, and the admin. Each user type has their account page created to display the 
information or services a typical user in that role would need. Altogether these provisions 
make its use perspective smooth and coherent with the execution of the application. 

 

Figure 21:Log in 



 

4.2.2 Login and Register Error Notification  

 
Figure 22:incorrect Password or Email 

 

 

Figure 23:fill out the fields 



 

4.2.3 User Type Selection  

 

Figure 24:User Type Selection 

 

Figure 25:Client Register 



 

 

 

 

 

 

 

 

 

Figure 26:Photographer Register 



4.3 User’s Screen and Features  

4.3.1 Home screen 

After logging in as a customer, filters appear at the top of the page. These filters allow the 
customer to specify criteria for searching photographers based on specific requirements 
or preferences. 

 

Figure 27:Users Home page 

 

Figure 28:Home page posts 



4.3.2 Posts Filtering 

The navigation bar also allows users to filter posts to display those by female 
photographers only, male photographers only, or to showcase photography sessions in 
specific locations, such as Al-Aqsa Mosque. Additionally, users can filter posts by date for 
more tailored results. 

 

Figure 29:Filter posts by gender or date 

 

Figure 30:Filter posts by location 



4.3.3 Location Save Confirmation 

The navigation bar also displays notifications, such as new messages or reminders about 
upcoming photo session dates. Users can easily access various features from the 
navigation bar, including chats, location profiles, and appointment searches. Each feature 
will be explored in more detail later. 

 

Figure 31:Save location 

 

Figure 32:Location has been saved 



 

4.3.4 Follow Confirmation  

 

Figure 33:Follow 

4.3.5 Map Integration for Location Selection  

 

Figure 34:5 Map Integration for Location Selection 



 

 

 

 

 

 

 

 

 

Figure 35:Notification 



 

4.3.6 Photographer Profile Interaction  

When a customer reaches out to the photographers, they redirect to the photographer’s 
personal page. There is a currant button on this page for a photo session, as well as some 
details about the photographer, his/her social networks, and the portfolio. Such samples 
enable the customer to see other works done by the photographer meaning the customer 
can judge the kind of work the photographer can offer. In this aspect, the page also 
includes some prop accessories made available by the photographer for such occasions 
as weddings, graduation and other occasions. 

 

 

 

Figure 36: View photographer profile 



 

Figure 37:Photographer Accessories 

 

 

Figure 38:About photographer 



 

 

Figure 39:Contact photographer 

When the user clicks on "View More," they can explore examples of the accessories 
provided by the photographer. The client can easily navigate through the photos in a 
smooth and user-friendly manner, allowing them to view all available options before 
booking the session. 

 

Figure 40:click "view more" 



 

Figure 41:View Accessories(1) 

 

Figure 42:View Accessories(2) 



4.3.7 Appointment Booking 

When the user clicks on the "Book an Appointment" button, they will see the available 
session times with the photographer. After selecting a suitable session time, a screen will 
appear to fill in the reservation details. Once the information is completed, the user can 
click "Save" to confirm the booking. If the user clicks on a previously booked photography 
appointment, options will appear, allowing them to delete the appointment if desired. 

 

Figure 43: Book photographer appointment 

 

Figure 44:Select time 



When the user clicks on the "Book an Appointment" button, the available session times 
with the photographer will be displayed. Upon selecting a suitable session time, a screen 
will appear for the user to fill in the reservation details. After entering the required 
information, the user can click "Save" to confirm the booking. If the user clicks on an 
already booked photography appointment, options will appear, allowing them to choose 
whether to delete the appointment or keep it. 

 

Figure 45:fill information 

 

Figure 46:Delete appointment 



4.3.8 User Profile Management  

This is done by clicking at the users photo on the homepage of the account and then going 
to the profile account name. Here the customer can check the list of scheduled 
photography sessions and details of the session where the customer has booked a slot. 
Also, it shows the addresses that have been saved in “Favorite Locations” tab. The 
customer is again free to remove the location by clicking the bin bin icon that is close to the 
photo of the location to be deleted. They also contain the customer’s personal information 
that includes the name, phone number, location and an email address. Customers can 
change their name or other information at the account by clicking the “Update” button, the 
relevant changes, and then click the “Save” button to set this update as final. 

 

Figure 47:User Profile Management 



 

Figure 48:Client Profile (Booked sessions) 

 

 

Figure 49:Client Profile (Favorite Locations) 



  

Figure 50:Client Profile (Edit user information) 

 

 

 

 

 

 

 

 

 

 

 



4.3.9 Life Chat with file attachment 

When the customer moves the pointer on the chat-box on the navigation bar, he is taken to 
the conversations. Here, the customer can call photographers or owners of photo shoot 
locations, or ask questions, make requests or decide. Also, by using the “Attach a File” 
button in the conversation list, the customer can take a picture or browse a file and send it 
to the recipient. It enables the user to request changes, seek similar images or make a 
specific demand because of the conversation in the chat in accordance with the discourse 
and consensus achieved in the conversation. 

 

Figure 51:Life Chat 



 

Figure 52: file attachment 

 

 

Figure 53:Life Chat with file attachment 



 

 

 

4.3.10 Location Browsing and Booking  

If the customer clicks on “Places” he or she will be able to see available locations for photo sessions. It also 
has a feature for searching for specific locations so venues for a photo shoot within a selected city for 
instance will be pulled out. When choosing a certain area, the customer receives the information about the 
area including the address, the phone number and the photos of the place. It is fast for the customer to 
navigate around the images to view all of them. When the customer clicks on the “Book an Appointment,” 
button, the dates and time of booking possibilities will be displayed. In case a particular time slot of choice is 
taken, the customer will be presented with a field to fill out the booking details. The booking will then be 
confirmed after the information has been saved into the database. Further, in the same drop-down menu the 
customer is also able to cancel the booking by selecting it and clicking on “Delete”. 

 

 

Figure 54:Location Browsing 



 

Figure 55:Search by location 

 

Figure 56:View place profile 



 

Figure 57:Pictures of the place 

 

 

 

Figure 58:Select time to Book 



 

 

 

 

 

 

 

Figure 59:fill information 



4.4 Photography’s Screens and Features 

4.4.1 Log in as a photographer 

This is the home page that appears when the photographer logs into their account. It 
displays both the posts of other photographers and the posts they have published. At the 
top of the page, the photographer has the option to publish a new post, which includes 
adding a photo, its location, and an optional caption or description. 

 

Figure 60:Log in as a photographer 

 

Figure 61:home page for photographer 



4.4.2 Photographer Profile and Dashboard management 

When the photographer enters their personal page by clicking on their profile picture in the 
navigation bar and then on their name, a graph appears at the top of the page displaying 
their working hours for the week. At the bottom of the page, the photographer can see 
images of the accessories available for their photo sessions. They can delete any image by 
clicking the trash icon at the top right of each picture, or they can add new accessory 
photos by clicking the file selection button below the images. On the left side of the page, 
the photographer's personal information is displayed. They can modify this information by 
clicking the "Update" button, making changes, and then clicking "Save" to save the 
updates. 

 

Figure 62:Photographer Profile and Dashboard management 



 

Figure 63:Photographer Profile (view material) 

 

 

Figure 64: Delete one of materials 



 

Figure 65:add material 

 

 

Figure 66:new material added 



 

              

Figure 67:edit photographer information 

 

 

 

 

 



4.4.3 Appointment Managment 

The bridge to personal pages starts by selecting their image from the navigation bar, followed by 
clicking on their name. This opens a graph showing the photographer's working hours for the week. 
The bottom section of the page displays images of accessories suitable for photo sessions. Each 
image has a trash icon located at the top right corner, allowing photographers to delete it from the 
list. Photographers can also add new accessory images by selecting files using the button under 
the existing pictures. Personal information about the photographer is displayed on the left side of 
the page. By selecting the "Update" button, photographers can modify any of their stored details. 
Clicking "Save" applies to the changes and updates the profile. Once a photographer accepts a 
booking, the color of the booking turns red to indicate confirmation. 

 
Figure 68:Photographer Appointment Management 



 

Figure 69:view appointments 

 

Figure 70:Delete appointment 



 

Figure 71:Accept the appointment 

the photographer can also filtering the calendar to weekly or monthly or daily, also when 
the photographer clicking on the plus icon he can add new time available for booking. 

 

Figure 72:filtering the calendar 



 

 

 

 

Figure 73:Add new appointment time 



 

 

 

 

 

 

 

 

 

 

 

 

 



4.5 Place Owner’s Screens and Features 

4.5.1 Log in as a place owner 

This is the home page that appears when the place owner logs into their account. It 
displays both the posts of other place owners and the posts they have published. At the 
top of the page, the place owner has the option to publish a new post, which includes 
adding a photo, its location, and an optional caption or description. 

 

Figure 74:Log in as a place owner 

 

Figure 75:place owner home page 



 

4.5.2 Place Owner Profile and Dashboard Management 

When the place owner enters their personal page by clicking on their profile picture in the 
navigation bar and then on their name, a dashboard appears at the top of the page 
displaying a graph of the number of visits to their location for the week. At the bottom of the 
page, the place owner can see images of the accessories available at their location for 
photo sessions. They can delete any image by clicking the trash icon at the top right of 
each picture, or they can add new accessory photos by clicking the file selection button 
below the images. On the left side of the page, the place owner's personal information is 
displayed. They can modify this information by clicking the "Update" button, making 
changes, and then clicking "Save" to save the updates. 

 

Figure 76:Place Owner Profile and Dashboard Management 



 

Figure 77:the place photos 

 

 

Figure 78:Delete place photo 



 

Figure 79:add new place photo 

 

   

Figure 80: Edit place owner information 

 

 

 



4.5.3 Appointment Management  

The bridge to personal pages starts by selecting their image from the navigation bar, 
followed by clicking on their name. This opens a graph showing the place owner's working 
hours for the week. The bottom section of the page displays images of accessories 
available at the location for photo sessions. Each image has a trash icon located at the top 
right corner, allowing place owners to delete it from the list. Place owners can also add 
new accessory images by selecting files using the button under the existing pictures. 
Personal information about the place owner is displayed on the left side of the page. By 
selecting the "Update" button, place owners can modify any of their stored details. 
Clicking "Save" applies to the changes and updates the profile. Once a place owner 
accepts a booking, the color of the booking turns red to indicate confirmation. 

 

 

Figure 81: Appointment Management 



 

Figure 82:Delete Appointment 

 

 

Figure 83:accept appointment 

 

 

 



4.6 Admin’s Screens and Features 

4.6.1 Login as an Admin   

 

Figure 84:log in as admin 

 

 

 

 

 

 

 

 

 

 

 

 



4.6.2 Admin Home Page 

This is the admin's home page where all the information about the application appears. He 
can classify users by searching by name or by their type (photographers, place owner, 
regular user) or by city. 

 

Figure 85:Admin Home Page 

 

 

Figure 86:search by user type 



4.6.3 Registration Review and Search 

On the application page, registered photographers and place owners are displayed. 
During the registration process, users are required to upload files showcasing their work. 
These files are reviewed by the admin, who can download and view the submissions to 
determine whether to accept or reject the registration request. Additionally, the page 
includes a search feature that allows users to filter and locate photographers or place 
owners based on name, type (photographer or place owner), or city, ensuring easy 
navigation and discovery of relevant profiles. 

 

 

Figure 87:accept or reject applications 



 

 

 

Figure 88:Search by name 

 

 

 



4.6.4 User Data Export 

When you click on the Download button at the top right of the page, an Excel file is 
generated and downloaded. This file contains a list of usernames, their classification 
(photographer or place owner), and the city in which they are located, enabling easy 
access to user data for management or reporting purposes. 

 

Figure 89:Download Excel sheet 

 

Figure 90:view Excel sheet 



 

4.6.5 Reservation and Photographer Performance Graphs 

The first graph displays the number of reservations made each month throughout the year. 
For example, in November, it shows a total of 20 reservations. The second graph highlights 
the top-performing photographer based on the number of bookings they have received, 
helping to identify the most popular photographers on the platform. 

 

Figure 91:booking months chart 1 



 

Figure 92:booking photographer chart2 



4.7 Mobile Application Screens 

4.7.1 User: 

 

 



 



 

 



 

 

 

 

 



 

 



4.7.2 Photographer: 

     

 



 



 

 



 

 



 

 

 

 



4.7.3 Place Owner