1 
 

 

 

Al-Najah National University 
 

 

 

 

 

 

 

 

 

 

Faculty of Engineering & Information Technology 

Computer of Engineering Department 

   

Graduation Project 1 

A to B 

 

Groub members: 

Ethar Suwan     &    Entimaa Bushkar 

 

Supervised by:  

Dr. Raed Al-Qadi  &  Dr. Suliman AbuKharmeh  
 

 

 

 

Presented in partial fulfilment of the requirements for 

Bachelor degree in Computer Engineering. 

 

Date : 1/13/2023 



2 
 

Table of Contents 
Figures of table:....................................................................................................................................... 3 

Abstract: ................................................................................................................................................. 6 

Chapter 1: Introduction ........................................................................................................................... 7 

Statement of the problem: .................................................................................................................. 7 

1.2 Project Objective: .............................................................................................................................. 8 

1.3 Project Scope: .................................................................................................................................... 8 

1.4 Project importance: ........................................................................................................................... 8 

Chapter 2: Constraints and Earlier coursework. ..................................................................................... 10 

2.1 Constraints: ................................................................................................................................. 10 

2.1.1 Programming Language:........................................................................................................ 10 

2.1.2 Remote Notification: ............................................................................................................. 10 

Chapter 3: Literature Review ................................................................................................................. 11 

Chapter 4: Methodology........................................................................................................................ 12 

4.1 Tools, Methods and Programming Languages: ............................................................................. 12 

4.1.1 programming language: ........................................................................................................ 12 

4.1.2 Tools: ........................................................................................................................................ 12 

4.1.3 Database: .............................................................................................................................. 13 

4.2 System Features Implementation:................................................................................................ 17 

4.2.1: Google Maps usage: ............................................................................................................. 17 

4.2.2: Notification: ............................................................................................................................. 18 

4.2.3: Chat: .................................................................................................................................... 21 

4.3 Mobile application: ...................................................................................................................... 25 

4.3.1: Authentication and Forget Password: ................................................................................... 25 

4.3.2: First Page: ............................................................................................................................ 33 

4.3.3: Customer Side: ..................................................................................................................... 34 

4.3.4: Driver Side: .......................................................................................................................... 48 

4.4: Website: ..................................................................................................................................... 62 

4.4.1: Tools, Methods and Programming Languages: ..................................................................... 62 

4.4.2 programming language: ........................................................................................................ 62 

4.2.3 Tools: .................................................................................................................................... 62 

4.4.4: Database: ............................................................................................................................. 63 

4.2 System Features Implementation:................................................................................................ 63 



3 
 

Chat ............................................................................................................................................... 63 

5.1.3 Notification System: .............................................................................................................. 68 

4.4 The Website:................................................................................................................................ 73 

Admin:............................................................................................................................................... 87 

Chapter 5: CONCLUSION & RECOMMENDATION.................................................................................... 90 

5.1 CONCLUSION: .............................................................................................................................. 90 

5.2 ..................................................................................................................................................... 90 

 
 

 

 

 

Figures of table: 
Figure 1 ................................................................................................................................................. 13 

Figure 2 ................................................................................................................................................. 14 

Figure 3 ................................................................................................................................................. 15 

Figure 4 ................................................................................................................................................. 16 

Figure 5 ................................................................................................................................................. 16 

Figure 6 ................................................................................................................................................. 17 

Figure 7 ................................................................................................................................................. 18 

Figure 8 ................................................................................................................................................. 18 

Figure 9 ................................................................................................................................................. 19 

Figure 10 ............................................................................................................................................... 20 

Figure 11 ............................................................................................................................................... 20 

Figure 12 ............................................................................................................................................... 20 

Figure 13 ............................................................................................................................................... 21 

Figure 14 ............................................................................................................................................... 22 

Figure 15 ............................................................................................................................................... 23 

Figure 16 ............................................................................................................................................... 23 

Figure 17 ............................................................................................................................................... 24 

Figure 18 ............................................................................................................................................... 24 

Figure 19 (Sign Up) ................................................................................................................................ 25 

Figure 20 (Sign Up) ................................................................................................................................ 26 

Figure 21(related to Sign up) ................................................................................................................. 26 

Figure 22(the user enter their email) ..................................................................................................... 27 

Figure 23(the user received the reset code via email) ............................................................................ 27 

file:///C:/Users/Google%20Tech/Desktop/Graduation%20Project%201%20Report.docx%23_Toc125260872


4 
 

Figure 24(the user entered the new password and the reset code)........................................................ 28 

Figure 25(the password successfully updated!) ...................................................................................... 29 

Figure 26 (Sign in Page) ......................................................................................................................... 30 

Figure 27 (Setting tab) ........................................................................................................................... 31 

Figure 28 (Setting -Account-) ................................................................................................................. 32 

Figure 29 (Setting -About-) .................................................................................................................... 33 

Figure 30(Customer or driver?) .............................................................................................................. 34 

Figure 31(customer Home Page)............................................................................................................ 35 

Figure 32 (Tracking order-customer-) .................................................................................................... 36 

Figure 33 (place order(sender Info)) ...................................................................................................... 37 

Figure 34 (place order (recipient info)) .................................................................................................. 38 

Figure 35 (place order (Package info)).................................................................................................... 39 

Figure 36 (Place order(Date picker)) ...................................................................................................... 40 

Figure 37(Place order (receipt)) ............................................................................................................. 41 

Figure 38 (Success Modal) ..................................................................................................................... 42 

Figure 39 (current user orders) .............................................................................................................. 43 

Figure 40 (Order Details) ....................................................................................................................... 44 

Figure 41 (order details but when its shipped) ....................................................................................... 45 

Figure 42 (order details but when its shipped & delivered) .................................................................... 46 

Figure 43 (Map- Tracking order) ............................................................................................................ 47 

Figure 44 (Chat between the driver and the customer) .......................................................................... 48 

Figure 45 (driver Home page) ................................................................................................................ 49 

Figure 46  (New Delivery req notification) .............................................................................................. 50 

Figure 47 (the modal with the delivery req details) ................................................................................ 51 

Figure 48 (Customer side when a driver accepts the order) ................................................................... 52 

Figure 49 (Drivers Packages) .................................................................................................................. 53 

Figure 50 (order details shipped) ........................................................................................................... 54 

Figure 51  (order details deliverd) .......................................................................................................... 56 

Figure 52 (order details shipped and delivered) ..................................................................................... 57 

Figure 53 (Driver Map) .......................................................................................................................... 59 

Figure 54(Driver Map) ........................................................................................................................... 60 

Figure 55 (driver Chat) ........................................................................................................................... 61 

Figure 56 ............................................................................................................................................... 63 

Figure 57 ............................................................................................................................................... 65 

Figure 58 ............................................................................................................................................... 66 

Figure 59 ............................................................................................................................................... 67 

Figure 60 ............................................................................................................................................... 67 

Figure 61 notification ............................................................................................................................ 68 

Figure 62 notification ............................................................................................................................ 69 

Figure 63 chat........................................................................................................................................ 69 

Figure 64 ............................................................................................................................................... 70 

Figure 65 ............................................................................................................................................... 70 



5 
 

Figure 66 ............................................................................................................................................... 71 

Figure 67 ............................................................................................................................................... 71 

Figure 68 ............................................................................................................................................... 72 

Figure 69 ............................................................................................................................................... 72 

Figure 70 Home Page. ............................................................................................................................ 73 

Figure 71 About Page. ........................................................................................................................... 74 

Figure 72 login ....................................................................................................................................... 74 

Figure 73 Admin Login Page. .................................................................................................................. 75 

Figure 74  Sign-Up Page. ........................................................................................................................ 76 

Figure 75 Password Recovery Page. ....................................................................................................... 77 

Figure 76 Password Recovery Page. ....................................................................................................... 78 

Figure 77 Password Recovery Page. ....................................................................................................... 78 

Figure 78Password Recovery Page. ........................................................................................................ 79 

Figure 79 Password Recovery Page. ....................................................................................................... 79 

Figure 80 ............................................................................................................................................... 80 

Figure 81Tracking Page. ......................................................................................................................... 80 

Figure 82 Tracking Page. ........................................................................................................................ 81 

Figure 83 ............................................................................................................................................... 82 

Figure 84 Profile Page. ........................................................................................................................... 82 

Figure 85 ............................................................................................................................................... 82 

Figure 86 ............................................................................................................................................... 83 

Figure 87 Request Page. ........................................................................................................................ 83 

Figure 88Request Page. ......................................................................................................................... 84 

Figure 89Request Page. ......................................................................................................................... 85 

Figure 90Request Page. ......................................................................................................................... 85 

Figure 91Request Page. ......................................................................................................................... 86 

Figure 92 Request Page. ........................................................................................................................ 86 

Figure 93 ............................................................................................................................................... 87 

Figure 94 ............................................................................................................................................... 87 

Figure 95Dashboard Page. ..................................................................................................................... 88 

Figure 96 ............................................................................................................................................... 88 

Figure 97 ............................................................................................................................................... 89 

 

 

 

 



6 
 

Abstract: 

A to B is a delivery system that streamlines the delivery process for 

customers and drivers. The app allows customers to place orders 

online, track their order on a map and monitor its status, and 

contact the driver directly within the app. These features make it 

easy for customers to receive their packages in a timely manner and 

for drivers to manage their delivery, show them on the map, update 

orders status and contact customers. The system is user-friendly 

and easily accessible for both customers and drivers, making it 

convenient for businesses and individuals alike. Additionally, the 

system includes a website that allows customers to place orders and 

track them from a platform of their preference either from the 

application or the website. Overall, the A to B system aims to 

provide a user-friendly and efficient solution for delivery services, 

providing real-time updates for customers and drivers through push 

notifications, and ensuring a seamless and efficient delivery 

experience. The application is built with React Native and Node.js, 

the website for customers and administration is built with React and 

Node.js and we use MongoDB for both. 

 

It is important to note that this system provides a solution for our 

daily lives as it caters to a wide range of delivery needs such as 

online shopping, restaurant, grocery store, and even personal 

deliveries for relatives. The increasing reliance on online shopping 

and food delivery services has made courier systems an essential 

aspect of our daily lives, and A to B aims to provide a convenient and 

efficient solution for these needs. 

 



7 
 

Chapter 1: Introduction  

Statement of the problem:  

 

The problem with traditional delivery systems is the lack of 

transparency and accountability. Customers often have difficulty 

tracking their packages and determining their exact location and 

placing new orders easily. A delivery app with tracking would solve 

this problem by providing real-time updates on the location and 

status of a package, giving customers peace of mind and the ability 

to plan accordingly. Additionally, businesses can benefit from the 

tracking feature as it allows them to optimize their delivery routes 

and improve customer satisfaction and give the customer the ability 

to place orders monitor them and contact the driver in the same 

place. 

So this project focused these problems: 

 The difficulty to reach delivery company and relies on social 

media or phone calls to place an order. 

 The ability to track the order and the order status. 

 The ability to contact driver on a delivery app not on phone or 

social media platform. 

 The recipient can track the order from the website. 

 

 

 

 

 

 



8 
 

1.2 Project Objective: 

 

This project is a delivery app and website for the customer side with 

tracking capabilities that improves transparency and accountability 

for customers and businesses. This will be achieved by providing 

real-time updates on the location and status of packages, as well as 

other features such as placing orders, contact the driver, and 

notifications. Additionally, the app is user-friendly and easy to 

navigate, and should a secure login system to protect customer 

information. The goal of this project is to create a valuable tool that 

improves the delivery experience for both customers and drivers. 

 

1.3 Project Scope: 

The app will allow customers to place orders and track the status of 

their deliveries in real-time and contact drivers within the app. It 

will also have a feature that allows drivers to open and navigate to 

their assigned orders using a map. The website will be accessible to 

customers only and will provide similar functionality as the app. The 

app will also have a secure login system to protect customer 

information. This project will improve the transparency and 

accountability of the delivery process for both customers and 

drivers. 

 

1.4 Project importance: 

The development of a delivery app with tracking capabilities is 

important for several reasons: 

 



9 
 

1- Although delivery apps with tracking feature are not new and 

many exist in the market, it is not widely available in Palestine, 

or it may only have one or two features, which limits its 

accessibility and functionality for the customers and drivers in 

Palestine. 

2- It improves transparency and accountability for customers by 

providing real-time updates on the location and status of their 

deliveries. This allows customers to plan accordingly and have 

peace of mind about the whereabouts of their package. 

 

3- It enhances the customer experience by providing an easy-to-

use, user-friendly app and website that allows customers to 

place orders, track deliveries, and access other relevant 

information. 

 

4- It allows businesses to differentiate themselves by offering a 

convenient and transparent delivery service that sets them 

apart from competitors. 

 

5- It can increase customer loyalty and retention by providing a 

valuable tool that improves the delivery experience. 

 

6- It provides drivers with tool that allow them to receive 

delivery that is near them and have the ability to accept or 

reject the offer. 

 

7- It provides the drivers with a map with suitable routes.  

Overall, the development of a delivery app with tracking capabilities 

is an important step towards providing a better delivery experience 



10 
 

for customers and improving the efficiency and competitiveness of 

businesses in the delivery industry, especially in Palestine. 

 

 

Chapter 2: Constraints and Earlier coursework. 

 2.1 Constraints: 

2.1.1 Programming Language:   

 

The team had chosen to use JavaScript, Node.js, React, and React 

Native to build the delivery app and website. However, the way the 

work was distributed among the team members resulted in isolated 

development efforts. Specifically, Ethar Suwan built the application 

using React Native and Node.js, while Entimaa Bushkar built the 

website using React and Node.js. This caused challenges in 

integrating and linking the website with the application. 

 

2.1.2 Remote Notification: 

During the development process, efforts were made to implement 

push notification functionality using various platforms such as 

Firebase, Pusher, Pubnub, OneSignal and Sendbird. However, 

compatibility issues with the React Native version and gradle-

related problems were encountered, causing delays and affecting 

the overall functionality of the app. 

The problem was eventually resolved by using sockets and local 

push notifications as an alternative solution which allowed for 



11 
 

successful implementation of the push notification functionality in 

the app. 

Chapter 3: Literature Review 

 

While Uber and DHL are well-known and successful companies in 

the logistics and transportation industry, they may not have the 

same level of recognition or availability in Palestine. DHL offers a 

wide range of logistics and transportation services including express 

delivery, freight transportation, and supply chain solutions. 

However, the company's global network may not be as easily 

accessible to individuals in Palestine. Similarly, Uber, known for its 

convenience, affordability, and efficient use of technology, may not 

have the same level of recognition or availability in the area. The 

company's transportation network and mobile app-based service 

may not be as well-suited to the unique needs and challenges of the 

Palestinian market. So to build a delivery system with the important 

features and make sure its user-friendly is important. 

 

 

 

 

 

 

 



12 
 

Chapter 4: Methodology  

4.1 Tools, Methods and Programming Languages:  

 

4.1.1 programming language:  

Our application was built using:   

• React Native Cli for the frontend.  

• Node-JS for the backend 

• MongoDB 

 

 

4.1.2 Tools:  

• Visual Studio Code  

• React Native 0.70.5 

• Node-JS v16.17.1 

• Real device to testing our project 

• Postman 

                     

 

 

 

 

 

 

 

 



13 
 

        4.1.3 Database: 

         We use MongoDb it was reliable and suitable for our project  

         Customers Schema: 

For the customer we store information about them like there 
username, phone, email, city, password and the reset Code is set null as 
default, we used it to temporarily store the reset code when the user 
forget there password.  

      
Figure 1 

 

Driver Schema: 

For the Driver we store information about them like there username, 
phone, email, city, password and the reset Code is set null as default, 
we used it to temporarily store the reset code when the user forget 
there password.  



14 
 

 

Figure 2 

Package Schema: 

For the Package we store the package id and the user who sent the 

order id and the name of the sender, sender Location, recipient 

Location and the driver location and their id add when the driver accept 

the delivery. 



15 
 

 

Figure 3 

Message Schema: 

For the message we store the conversation id and the sender id and the 

content of the message. 



16 
 

 

Figure 4 

Conversations Schema: 

For the conversation we store the id of the conversation and the ids of 

both the customer and the driver who are members of the 

conversation. 

 

Figure 5 

 



17 
 

 

4.2 System Features Implementation: 

4.2.1: Google Maps usage: 

In the application we used Google Maps and use a Google Map api key 

to determine the current location of both the customer and the driver, 

and we use it in the react-native-google-place-autocomplete to give the 

customer the ability to change their location and specify the recipient 

location. 

We use it as well on the maps that we used to track the order status 

and track the driver location on the customer side and we use it in the 

driver side so they can use it to show the orders sender and recipient 

location.  

 

 

Figure 6 



18 
 

 

Figure 7 

4.2.2: Notification: 

When a customer places an order a delivery request is sent to the 

nearby drivers, a socket.io client is used to build a reliable and real-time 

notification and then when the driver receive the notification a local 

push notification is fired an notify the driver that there is a new delivery 

request. 

 

Figure 8 

The code from the socket server: 



19 
 

This is used to connect both the driver and the customer to the socket 

and depindingon their role they are stored on drivers or customers 

Array. 

 

Figure 9 

Here is how the delivery request is handled from the server side: 

 



20 
 

 

Figure 10 

 

Here is the socket that handle the acceptance of the request: 

 

 

Figure 11 

 

 

 

Figure 12 



21 
 

4.2.3: Chat: 

The chat on the application is implemented between the driver and the 

customer. 

When the driver accepts the delivery a new conversation is created 

using the driver id and the sender id. 

 

 

Figure 13 

And then when the driver or the customer press the contact button this 

code is used to find that conversation and take the id and get the 

messages and display them. 



22 
 

 

Figure 14 



23 
 

 

Figure 15 

 

Figure 16 

 



24 
 

 

Figure 17 

 

And here is the code we used to send a message: 

 

 

Figure 18 

 

 

 

 



25 
 

 

 

4.3 Mobile application: 

  4.3.1: Authentication and Forget Password: 

The following pages (sign up and sign in and forget password, setting 

Tab) are the same for the customer side and the driver side (the 

difference on handling them on the backend) 

So I’ll put them once on this section: 

     4.3.1.1: Sign Up Page: 

 

 

Figure 19 (Sign Up) 



26 
 

 

 

Figure 20 (Sign Up) 

 

Figure 21(related to Sign up) 



27 
 

4.3.1.2 Forgot Password: 

In this page if the user forgets their password they can simply enter 

their email and a reset code will be received on their email the can use 

the reset code on the navigated page and add the new password. 

 

 

Figure 22(the user enter their email) 

 

Figure 23(the user received the reset code via email) 



28 
 

 

Figure 24(the user entered the new password and the reset code) 



29 
 

 

Figure 25(the password successfully updated!) 

4.3.1.3 Sign in: 

In this page the user enters their email and password to access their 

account. 



30 
 

 

Figure 26 (Sign in Page) 

 

 

 

 

 

 

 

 

 



31 
 

 

 

 

4.3.1.4: Setting tab: 

 

Figure 27 (Setting tab) 

 

• as it is shown there is three buttons on the setting  

• the first button Account is containing the information that 

the user filled when they signed up. 



32 
 

 

Figure 28 (Setting -Account-) 

• the second button About is a brief about the application 



33 
 

 

Figure 29 (Setting -About-) 

 

 

4.3.2: First Page: 

This is the first page that appear when the application is opened: 



34 
 

 

Figure 30(Customer or driver?) 

 

4.3.3: Customer Side: 

When the user press customer then the propose of their usage of the 

app is to send packages, track them and monitor their status.  

 4.3.3.1: Home Page: 

This page is used to search for a specific package and display it on a 

map to track the driver. 



35 
 

 

Figure 31(customer Home Page) 

This page navigates the user to the map with the sender, recipient and 

driver if there is a driver yet. 



36 
 

 

Figure 32 (Tracking order-customer-) 

This map can be accessed on two ways from this search or from orders 

page I’ll cover it on the following pages. 

4.3.3.2: Place a new Order: 

This page is used to send an order it contain multiple steps. 

• Sender Information: 

This page is auto filled by the information that the user 

provided when they signed up: 



37 
 

 

Figure 33 (place order(sender Info)) 

 

• Recipient Information: 

Here the sender fill these about the recipient. 



38 
 

 

Figure 34 (place order (recipient info)) 

 

• The next step is to fill the package information: 



39 
 

 

Figure 35 (place order (Package info)) 

Here when the user presses the date a date picker will 

show up and they can change the delivery date. 



40 
 

 

Figure 36 (Place order(Date picker)) 

 

• Then there is the final step before confirm the order is the 

receipt. 



41 
 

 

Figure 37(Place order (receipt)) 

• then when the customer confirms the order this modal 

while be shown. 

 



42 
 

 

Figure 38 (Success Modal) 

 

4.3.3.3: Display orders: 

• When the user press on the orders tab the first screen will 

be a list with all the orders the user has placed. 



43 
 

 

Figure 39 (current user orders) 

 

• When the customer press on one of the orders this screen 

will open with details about the order. 



44 
 

 

Figure 40 (Order Details) 

• Here the shipped and delivered are grayed that’s mean 

the order is not picked up nor dropped off. 

In the next two screenshots the order details when its 

picked up and then when its delivered. 



45 
 

 

Figure 41 (order details but when its shipped) 



46 
 

 

Figure 42 (order details but when its shipped & delivered) 

• When the customer press track the order a map with the 

sender, recipient and driver locations will be displayed 

and the diver location will be updated so the customer 

can track the drive in a real time location. 



47 
 

 

Figure 43 (Map- Tracking order) 

 

 

• When the customer press contact Driver a chat between 

the driver and customer will be open. 

 



48 
 

 

 

 

Figure 44 (Chat between the driver and the customer) 

 

4.3.4: Driver Side: 

4.3.4.1: Home Page: 

• The first tab is Homepage it contains a map with the driver 

current location displayed on it and a switch button if the 



49 
 

Driver switch it to on then their location will be shared 

with all the customers how the driver accepted their 

delivery. 

And if it is of it give the driver the privacy to not share 

their location when they don’t work. 

 

Figure 45 (driver Home page) 



50 
 

• When a new delivery request is made on the nearby area 

they got a notification if the user pressed the notification 

a modal with the order details will be displayed and there 

is two buttons Accept and reject. 

 

 

 

     Figure 46  (New Delivery req notification) 



51 
 

 

    Figure 47 (the modal with the delivery req details) 

 

• When the driver press accepts a notification with the 

name of the driver who accepted it. 



52 
 

 

 

Figure 48 (Customer side when a driver accepts the 
order) 

 

 

  

4.3.4.2: Driver Orders: 

This tab contains all the orders the driver had accepted it and it give 

them the ability to update the status of the package and display the 

sender recipient and their location on the map and they can contact the 

customer. 



53 
 

 

Figure 49 (Drivers Packages) 

 

• When the driver press on the one of the orders a new 

screen is navigates with details about the order and there 



54 
 

is two button shipped button and the Show on a map 

button. 

• When the driver presses the shipped button the status of 

the delivery is toggled to true and when the driver presses 

the arrived the order status toggled the delivered to true. 

 

Figure 50 (order details shipped) 



55 
 



56 
 

 

Figure 51  (order details deliverd) 



57 
 

 

Figure 52 (order details shipped and delivered) 

 

 



58 
 

 

• When the driver press on Show on map button a map is 

shown. 



59 
 

 

Figure 53 (Driver Map) 



60 
 

 

Figure 54(Driver Map) 

 

 



61 
 

 

• When the driver press on the Contact Customer button 

the chat between them will be opened and they can 

communicate. 

 

 

Figure 55 (driver Chat) 



62 
 

 

 

 

And as I explained on the 4.3.1.4 there is the setting tab that have the 

same functionality on both Customer and Driver Sides. 

 

4.4: Website: 

4.4.1: Tools, Methods and Programming Languages: 

4.4.2 programming language: 

Our website was built using two different languages: 

• React-JS for the frontend. 

• Node-JS for the backend. 

 

4.2.3 Tools: 

• Visual Studio Code 

• React 18.2.0. 

• Node-JS . 

• Real devices to testing our project. 

• Studio 3T Free for MongoDB. 

• Postman. 



63 
 

4.4.4: Database: 

We used MongoDB database and the needed collections as I mentioned 

on the application. 

 

Figure 56 

 

4.2 System Features Implementation: 

Chat 

Introduction: 

Almost every app and every website relies on chatting, and chatting has 

become an integral part of it. So it was necessary to include the chat in 

the website, as our site allows communication between the customers 

and the drivers.  

There are many ways to develop a chat and the programming 

languages used can also decide how it has to be done. The chats in our 

project are made possible by Socket.IO implemented in Node-JS and 

React.Socket.IO is a library that enables low-latency, bidirectional and 

event-based communication between a client and a server. 

 

implementation 



64 
 

To begin, we installed the required library on the Node-JS server. 

Following that, we wrote a code that waits for a connection to the IO 

server. Upon receiving the join request, the user socket will be added 

using the unique value that was sent from the client. When a message 

arrives the server searches for the receiver ID of the targeted user and 

sends the message to him. 



65 
 

 

Figure 57 

 

 

In the client side the connection with IO server was made.  



66 
 

When a change occurs to the variable sendMessage (when you send a 

new message), this message is sent to the socket. 

Then the message from the socket reaches the intended recipient user. 

Furthermore, the messages were all stored in the database so the user 

can see all the chat between them and the other users.

 

Figure 58 

The message was stored in the database with information about the 

user who sent it by senderId, the conversationId, the message content 

as shown: 



67 
 

 

Figure 59 

 

This code shows how messages are stored in the database:

 

Figure 60 

 



68 
 

5.1.3 Notification System: 

Introduction: 

Notification systems are designed to let users know when something 

related to them occurs even if they don't use the website right then. 

The majority of users do not find it convenient to constantly check what 

is happening in the website. This makes it necessary to create a 

notification system to keep them connected to the website without 

having to exert so much effort. 

 In our website, we using Socket-IO was used to make notifications 

happen.  

At first I used React-push-notification but later I replaced the method 

and used socket-IO. 

 

Figure 61 notification 

React-push-notification 



69 
 

 

Figure 62 notification 

 

Figure 63 chat 

Socket-IO 

 

implementation: 

 As I said earlier, I used the socket.IO, when the site isالتر
connected to the socket server , it takes the notification data from 
the socket server directly, and when it is not connected, we take 



70 
 

the notification data from the database. In both cases, the data 
coming from the socket server is stored in the database, and it is 
deleted when the user presses a button “mark as read ". 
 

 

Figure 64 

This is code from socket server side. 

 

In client side : 

 

Figure 65 

This code for send notification data to Socket Server. 



71 
 

 

Figure 66 

This code for get notification data from Socket Server. 

 

Figure 67 



72 
 

This is code for store notification data in database. 

 

Figure 68 

This is code for get notification data from database. 

 

Figure 69 

 

This is code for delete notification data from database. 

 

 

 

 

 



73 
 

 

 

 

 

 

4.4 The Website: 

The website was created using React.js. 

 

 

Figure 70 Home Page. 



74 
 

 

Figure 71 About Page. 

 

 

 

Figure 72 login 

 

 



75 
 

 

This page is to allow customers log In. The page shows warning 

messages if the entered values are wrong. 

 

Figure 73 Admin Login Page. 

This page is to allow admin log In ,and if the entered values are wrong, 

the page displays warning messages as show in picture. 



76 
 

 

Figure 74  Sign-Up Page. 

This page allows creating a new account for the customer, making sure 

that the username, email and phone number are unique. 



77 
 

 

Figure 75 Password Recovery Page. 

The account can be recovered in the event that the account password is 

forgotten, provided that the customer remembers the email that he 

used when creating the account, he enters it, and after that he receives 

a message on his email with a link to reset his account password, and 

once the password is reset, the link turns directly to a login page. 

The following pictures show the steps that I mentioned 



78 
 

 

Figure 76 Password Recovery Page. 

 

 

Figure 77 Password Recovery Page. 

 



79 
 

 

Figure 78Password Recovery Page. 

 

 

Figure 79 Password Recovery Page. 

To send the email with the password change link, I used nodemailer on 

the server side. 



80 
 

 

Figure 80 

 

 

Figure 81Tracking Page. 

Through this page, anyone who has the tracking number can carry out 

the tracking process and find out information about the order. In the 

event that the order is not approved by any driver, only the location of 

the sender and recipient will appear on the map, and in the event that 

there is a driver who approved the order, the driver's location can 



81 
 

appear on the map. With the order information if it was shipped or not, 

and if it reached the receiver or not. 

 

 

Figure 82 Tracking Page. 

 

To create a map I used "react-leaflet",after several attempts to get a 

key to use Google maps using several purchase cards. 

Leaflet is the leading open-source JavaScript library  . 



82 
 

 

Figure 83 

With this code I have created the map. 

 

 

Figure 84 Profile Page. 

Figure 85 



83 
 

 

Figure 86 

Through this page, the customer can view and modify his account 

information as well. 

 

Figure 87 Request Page. 



84 
 

Through this page, the customer can submit a delivery request that 

contains the information of the sender and recipient, as well as the 

information of the order itself. 

Where the customer's information is fixed, taken from the data base, 

except for his location, which can change. 

 

 

Figure 88Request Page. 

 



85 
 

 

Figure 89Request Page. 

 

Figure 90Request Page. 

 



86 
 

After sending the order, a message will be sent via e-mail to the 

recipient, bearing the tracking number, package description, price list, 

and tracking page link, so that he can track his package. 

 

Figure 91Request Page. 

 

 

Figure 92 Request Page. 

 



87 
 

 

Figure 93 

After that, it will go directly to the list orders page. 

Through this page, the customer tracks the information of the orders 

that he sends. 

 

Figure 94 

 

Admin: 

 



88 
 

 

 

Figure 95Dashboard Page. 

This is a dashboard page with a graph showing the status of orders, 

showing the number of orders in general and the number of both 

customers and drivers using the site. 

 

Figure 96 

Drivers data page, where the admin can use filtering, searching, 

modifying and deleting the data as required. It also has the ability to 

add a driver. 



89 
 

 

Figure 97 

Customers data page, where the admin can use filtering, searching, 

modifying and deleting the data as required. It also has the ability to 

add a customer. 

 

 

 

 

 

 

 

 

 

 

 

 



90 
 

Chapter 5: CONCLUSION & RECOMMENDATION  

5.1 CONCLUSION: 

 

In conclusion, the A to B delivery system is a user-friendly and efficient 

solution for delivery services. The system streamlines the delivery 

process for customers and drivers by allowing customers to place 

orders online, track their order on a map and monitor its status, and 

contact the driver directly within the app. Additionally, the system 

includes a website that allows customers to place orders and track 

them from a platform of their preference. 

Overall, the A to B delivery system provides an efficient solution for 

delivery services, while ensuring customer satisfaction. 

 

5.2 RECOMMENDATIONS: 

In order to improve the A to B delivery system, the following 

recommendations can be considered: 

 

• Implement a rating system for customers and drivers to 

provide feedback and improve the overall delivery 

experience. 

• Add a payment system. 

• Include voice records and voice calls on the chat between 

the driver and customer. 

 

 


	Figures of table:
	Abstract:
	Chapter 1: Introduction
	Statement of the problem:

	1.2 Project Objective:
	1.3 Project Scope:
	1.4 Project importance:
	Chapter 2: Constraints and Earlier coursework.
	2.1 Constraints:
	2.1.1 Programming Language:
	2.1.2 Remote Notification:


	Chapter 3: Literature Review
	Chapter 4: Methodology
	4.1 Tools, Methods and Programming Languages:
	4.1.1 programming language:

	4.1.2 Tools:
	4.1.3 Database:

	4.2 System Features Implementation:
	4.2.1: Google Maps usage:

	4.2.2: Notification:
	4.2.3: Chat:

	4.3 Mobile application:
	4.3.1: Authentication and Forget Password:
	4.3.1.1: Sign Up Page:
	4.3.1.2 Forgot Password:
	4.3.1.3 Sign in:
	4.3.1.4: Setting tab:

	4.3.2: First Page:
	4.3.3: Customer Side:
	4.3.3.1: Home Page:
	4.3.3.2: Place a new Order:
	4.3.3.3: Display orders:

	4.3.4: Driver Side:
	4.3.4.1: Home Page:
	4.3.4.2: Driver Orders:


	4.4: Website:
	4.4.1: Tools, Methods and Programming Languages:
	4.4.2 programming language:
	4.2.3 Tools:
	4.4.4: Database:

	4.2 System Features Implementation: (1)
	Chat
	5.1.3 Notification System:

	4.4 The Website:
	Admin:

	Chapter 5: CONCLUSION & RECOMMENDATION
	5.1 CONCLUSION: