COMSATS University Islamabad (CUI)

Software Design Description

(SDS DOCUMENT)

for

Pro Tracking
Version 1.0

By

Ahsan Ashraf CIIT/SP19-BSE-005/ISB

Areeba Akbar CIIT/SP18-BSE-012/ISB
Mohsin Zarar CIIT/SP20-BSE-047/ISB

Supervisor
Ma’am LAILMA JAVEED

Bachelor of Science in Software Engineering (2020-2024)

 2

Contents
1. Introduction..............................................................................................................................1
2. Design Methodology and Software Process Model...............................................................1
2.1 Design Methodology..................................................................................................................1
2.2 Process Methodology.................................................................................................................2
3. System Overview......................................................................................................................2
4. Design Models...........................................................................................................................2
4.1 Architectural Design...................................................................................................................2
4.1.1 Box and Line Diagram...........................................................................................................3
4.1.2 Architectural Diagram............................................................................................................4
5. Design Models...........................................................................................................................4
5.1 Activity Diagram........................................................................................................................4
5.1.1 Registration by Email.............................................................................................................5
5.1.2 Registration by Phone number...............................................................................................6
5.1.3 Login......................................................................................................................................7
5.1.4 Edit Profile.............................................................................................................................8
5.1.5 Edit Account Settings.............................................................................................................9
5.1.6 Register as Vet.....................................................................................................................12
5.1.7 View Vets.............................................................................................................................13
5.1.8 Set Appointment...................................................................................................................15
5.1.9 Register as Trainer...............................................................................................................16
5.1.10 View Trainers.......................................................................................................................17
5.1.11 Sell Pet.................................................................................................................................19
5.1.12 Buy Pet.................................................................................................................................20
5.1.13 Buy Pet Product....................................................................................................................21
5.1.14 Upload User/ Organization Review......................................................................................22
5.1.15 Upload Product Review........................................................................................................23
5.1.16 View Review........................................................................................................................24
5.1.17 Delete Review......................................................................................................................25
5.1.18 Search and View..................................................................................................................26
5.1.19 Follow/ Unfollow.................................................................................................................27
5.1.20 Add Post...............................................................................................................................28
5.1.21 Save Payment Info...............................................................................................................29
 3

5.2 Data Flow Diagram..................................................................................................................30

5.2.1 Level 0.................................................................................................................................30
5.2.2 Level 1.................................................................................................................................31
5.2.3 Level 2.1..............................................................................................................................32
5.2.4 Level 2.3..............................................................................................................................32
5.2.5 Level 2.4..............................................................................................................................33
5.2.6 Level 2.5..............................................................................................................................35
5.2.7 Level 2.6..............................................................................................................................36
5.2.8 Level 2.7..............................................................................................................................37
5.2.9 Level 2.8..............................................................................................................................38
5.3 State Transition Diagram..........................................................................................................39
5.3.1 Search Vets/Trainers............................................................................................................39
5.3.2 Buy Product..........................................................................................................................40
5.3.3 Edit Account........................................................................................................................41
5.3.4 Buy/ Sell Pets.......................................................................................................................42
6. Data Design.............................................................................................................................42
6.1 Data Dictionary........................................................................................................................42
7. Human Interface Design........................................................................................................44
7.1 Screen Images...........................................................................................................................44
7.2 Screen Objects and Actions......................................................................................................52

Revision History
Name Date Reason for changes Version
 4

Application Evaluation History

Comments (by committee) Action Taken

*include the ones given at scope time both in doc and
presentation

Supervised by
Supervisor’s Name

Signature______________
Software Design Description for Pet-Zone Page 1

1. Introduction
Pet is an any animal that is kept by humans as a source of pleasure and companionship. As pet
keeping has been practiced from the past to present, and is found in almost every culture and
society, it satisfies a deep and universal human need. People in Pakistan are buying more and more
pets day by day. The main problem is people are not getting right advice on how to keep and treat
their pets. As pet owners are very few in Pakistan, they don’t communicate and share their
experiences of pets with each other. We are developing a platform that will gather all the pet owners
at a single place where they can discuss their experiences and problems of pets. This will create
awareness of petting animals in a right way. Also, people will be able to buy and sell pets on this
platform after finding the right next owner for their pets. New pet owners go through a lot of
problems in taking care of their pets. Users on this platform will get guidance about their pet’s diet,
health, and other matters from professionals and experienced people. Users will also be able to buy
pet products from this platform.
People will be able to buy and sell pets on this platform. People including vets, trainers, and
experienced pet owners will guide about pet’s care, diet, health, and other matters to the newly
introduced people or pet owners with less experiences with pets in Pakistan. Vets and Trainers will
be able to set appointments with the users who want services from them. From this project we want
to facilitate the people who want to buy and sell a pet. People will communicate through real-time
chat. This platform will help people in communicating with vets and pet trainers. This system will
provide recommendations about clinics, vets and trainers which will viewed by users.
Firstly, Pet-Zone will allow people to socialize with each other, so people stay up to date
with the experiences of other pet owners with their pets online.
Secondly, using this platform, people will be able to buy and sell pets to the right owners.
The system will provide them a platform where they can buy pet products too.
Thirdly, users will be able to get services of vets and trainers easily by getting appointments
and meetups through this platform.
Vets, Trainers and other pet related organizations will also be able to provide their services
and make their profile without any hurdles.
In other words, people will not always have to go to the hospitals and do costly checkups.
This will save the time and money of user and they will be able to get all the pet services by sitting
in their homes.

2. Design Methodology and Software Process Model

2.1 Design Methodology

We will be using Functional approach for this project. Since we are working on is React JS, which
is based on Java Script Programming language, as React uses both functional and class-based
approach but we do not prefer using class-based approach which is the complex tree of nested
components that can increase the complexity. We will be using functional components which
Software Design Description for Pet-Zone Page 2

provides more ergonomic way to build components because we can reuse the stateful logic without
changing the component hierarchy.

2.2 Process Methodology

Incremental Process Methodology (IPM) will be used for this project. Because this methodology
will divide the functionalities of the systems into increments, Hence, in each increment, we first
implement partial design in the first phases and then add more design functionality in the next
phase. Hence, it is easy to develop the project if we divide the project into phases. It helps in
validation and modification of the system. And, as you know, requirements change over time when
developing software, and changes are made to conform to these new changes. Therefore, an
incremental approach would be a good fit for our project. We can easily handle the necessary
changes and test our system to deal with errors during each increment. Another rationale for using
the incremental model is that we want to start small with smaller by-products, then develop up to a
high level, and finally to complete it.

3.  System Overview
Pet Zone is a web-mobile based social and e-commerce application that helps user who want pet
related services in Pakistan in various ways. Firstly, it helps people in getting vet, trainer and pet
hospitals appointments online. Secondly, people will be able to buy and sell pets through Pet Zone.
Thirdly, people will be able to find and buy products for their pets. And at last people will be able to
use socializing services like blogs, posts, and stories that will help them in sharing their experiences
of pets with the other users of this platform.

4. Design Models
We will use activity diagram, data flow diagram and state transition diagram as design models.

4.1 Architectural Design

Software Design Description for Pet-Zone Page 3

4.1.1 Box and Line Diagram

Figure 1 Box and Line Diagram of Pet-Zone

Software Design Description for Pet-Zone Page 4

4.1.2 Architectural Diagram

Figure 2 (2 Tier) Architecture Diagram of Pet-Zone

5. Design Models
5.1 Activity Diagram
Software Design Description for Pet-Zone Page 5

5.1.1 Registration by Email

Figure 3 Activity Diagram of User Sign up

Software Design Description for Pet-Zone Page 6

5.1.2 Registration by Phone number

Figure 4 Activity Diagram of User Sign up

Software Design Description for Pet-Zone Page 7

5.1.3 Login

Figure 5 Activity Diagram of User Login

Software Design Description for Pet-Zone Page 8

5.1.4 Edit Profile

Figure 6 Activity Diagram of Edit Profile

Software Design Description for Pet-Zone Page 9

5.1.5 Edit Account Settings

Figure 7 Activity Diagram of Edit Account Settings

Software Design Description for Pet-Zone Page 10
Software Design Description for Pet-Zone Page 11
Software Design Description for Pet-Zone Page 12

5.1.6 Register as Vet

Software Design Description for Pet-Zone Page 13

Figure 8 Activity Diagram of Vet Register

5.1.7 View Vets

Software Design Description for Pet-Zone Page 14

Figure 9 Activity Diagram of View Vets

Software Design Description for Pet-Zone Page 15

5.1.8 Set Appointment

Figure 10 Activity Diagram of Set Appointment

Software Design Description for Pet-Zone Page 16

5.1.9 Register as Trainer

Software Design Description for Pet-Zone Page 17

Figure 11 Activity Diagram of Trainer Register

Software Design Description for Pet-Zone Page 18

5.1.10 View Trainers

Figure 12 Activity Diagram of View Trainers

Software Design Description for Pet-Zone Page 19
Software Design Description for Pet-Zone Page 20

5.1.11 Sell Pet

Figure 13 Activity Diagram of Sell Pet

Software Design Description for Pet-Zone Page 21

5.1.12 Buy Pet

Figure 14 Activity Diagram of Buy Pet

Software Design Description for Pet-Zone Page 22

5.1.13 Buy Pet Product

Software Design Description for Pet-Zone Page 23

Figure 15 Activity Diagram of Buy Pet Produc

Figure 8 Activity Diagram of Edit Event

Software Design Description for Pet-Zone Page 24

5.1.14 Upload User/ Organization Review

Figure 16 Activity Diagram of Upload Review

Software Design Description for Pet-Zone Page 25

5.1.15 Upload Product Review

Figure 17 Activity Diagram of Upload Product Review

Software Design Description for Pet-Zone Page 26

5.1.16 View Review

Figure 18 Activity Diagram of View Review

Software Design Description for Pet-Zone Page 27

5.1.17 Delete Review

Figure 19 Activity Diagram of Delete Review

Software Design Description for Pet-Zone Page 28

5.1.18 Search and View

Figure 20 Activity Diagram of Search and View

Software Design Description for Pet-Zone Page 29

5.1.19 Follow/ Unfollow

Figure 21 Activity Diagram of Follow/ Unfollow user

Software Design Description for Pet-Zone Page 30

5.1.20 Add Post

Figure 22 Activity Diagram of Add Post

Software Design Description for Pet-Zone Page 31

5.1.21 Save Payment Info

Figure 23 Activity Diagram of Add Payment Details

Software Design Description for Pet-Zone Page 32

5.2 Data Flow Diagram

5.2.1 Level 0

Figure 24 DFD L-0

Software Design Description for Pet-Zone Page 33

5.2.2 Level 1

Figure 25 DFD L-1

Software Design Description for Pet-Zone Page 34

5.2.3 Level 2.1

Figure 26 DFD L-2.1

5.2.4 Level 2.3

Software Design Description for Pet-Zone Page 35

Figure 27 DFD L-2.3

5.2.5 Level 2.4

Software Design Description for Pet-Zone Page 36

Figure 9 DFD L-2.4

Software Design Description for Pet-Zone Page 37

5.2.6 Level 2.5

Figure 10 DFD L-2.5

Software Design Description for Pet-Zone Page 38

5.2.7 Level 2.6

Figure 11 DFD L-2.6

Software Design Description for Pet-Zone Page 39

5.2.8 Level 2.7

Figure 12 DFD L-2.7

Software Design Description for Pet-Zone Page 40

5.2.9 Level 2.8

Figure 13 DFD L-2.8

Software Design Description for Pet-Zone Page 41

5.3 State Transition Diagram

5.3.1 Search Vets/Trainers

Figure 14 State Transition 1

Software Design Description for Pet-Zone Page 42

5.3.2 Buy Product

Figure 34 State Transition 2

Software Design Description for Pet-Zone Page 43

5.3.3 Edit Account

Figure 15 State Transition 3

Software Design Description for Pet-Zone Page 44

5.3.4 Buy/ Sell Pets

Figure 16 State Transition 4

6. Data Design
The database that will be used for our project is firebase. The data of the users will be stored in the form of
JSON objects.

6.1 Data Dictionary

Admin
{

"admin_id": "String",
"admin_name": "String",
"email": "String",
"password": "String",
Software Design Description for Pet-Zone Page 45

}
User
{
"first_name": "String",
"surname": "String",
"email": "String",
"phone_number":"String",
"password": "String",
"role":"String"
}

Vet
{
"first_name": "String",
"surname": "String",
"email": "String",
"phone_number":"String",
"password": "String",
"qualification":"String"
}

Trainer
{
"first_name": "String",
"surname": "String",
"email": "String",
"phone_number":"String",
"password": "String",
"experience":"String"
}
Software Design Description for Pet-Zone Page 46

7. Human Interface Design

7.1 Screen Images

Figure 17 Login Screen of Pet Zone

Software Design Description for Pet-Zone Page 47

Figure 18 Registration Screen of Pet Zone

Software Design Description for Pet-Zone Page 48

Figure 19 Login/Signup Page

Software Design Description for Pet-Zone Page 49

Figure 20 About us page

Software Design Description for Pet-Zone Page 50

Figure 21 Loading Screen

Software Design Description for Pet-Zone Page 51

Figure 22 Main Screen

Software Design Description for Pet-Zone Page 52

Figure 23 Home Screen

Software Design Description for Pet-Zone Page 53

Figure 24 Buy/Sell Pet Screen

Software Design Description for Pet-Zone Page 54

Figure 25 Adoption Screen

7.2 Screen Objects and Actions
 Figure 57: Pet Zone Login screen where user put their credentials to login into the system.
 Figure 58: Pet Zone Registration screen where user signups for Pet Zone.
 Figure 59: Pet Zone Signup/ Login Screen where user choose whether to register for new
account or login into an existing account.
 Figure 60: About us page of Pet Zone where people can learn about the services that Pet
Zone provides.
 Figure 61: Loading Screen where the main screen loads and user logs into the system.
 Figure 62: Main Screen provides all the functions that Pet Zone provides to the user.
 Figure 63: Home Screen shows the posts from other users.
 Figure 64: Buy/ Sell Pet Screen where user is able to put an ad for their pet for sale and can
buy other pets as well.
 Figure 65: Adoption Screen where user is able to see pets available for adoption.