Project WO — Product Backlog v.1.0.

0
15.07.2019

Table of Content
1. General Notes ............................................................................................................ 6
2. General Requirements ................................................................................................ 6
3.1 Login ........................................................................................................................... 8
Current..................................................................................................................................... 8
Frontend .......................................................................................................................................................... 8
Backend............................................................................................................................................................ 8

Desired..................................................................................................................................... 8
Frontend .......................................................................................................................................................... 8
Backend............................................................................................................................................................ 8

3.2 Reset Password ........................................................................................................... 9

Current..................................................................................................................................... 9
Frontend .......................................................................................................................................................... 9
Backend............................................................................................................................................................ 9

Desired..................................................................................................................................... 9
Frontend .......................................................................................................................................................... 9
Backend............................................................................................................................................................ 9

3.3 Sign Up ..................................................................................................................... 10

Current................................................................................................................................... 10
Frontend ........................................................................................................................................................ 10
Backend.......................................................................................................................................................... 10

Desired................................................................................................................................... 10
Frontend ........................................................................................................................................................ 10
Backend.......................................................................................................................................................... 11

3.4 Home ........................................................................................................................ 11

Current................................................................................................................................... 11
Frontend ........................................................................................................................................................ 11
Backend.......................................................................................................................................................... 11

Desired................................................................................................................................... 11
Frontend ........................................................................................................................................................ 11
Backend.......................................................................................................................................................... 12

3.5 Search ....................................................................................................................... 12

Current................................................................................................................................... 12
Frontend ........................................................................................................................................................ 12
Backend.......................................................................................................................................................... 12

Desired................................................................................................................................... 12
Frontend ........................................................................................................................................................ 12
Backend.......................................................................................................................................................... 13

Mert Gözel 1 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

3.6 City Screen ................................................................................................................ 14

Current................................................................................................................................... 14
Frontend ........................................................................................................................................................ 14
Backend.......................................................................................................................................................... 14

Desired................................................................................................................................... 14
Frontend ........................................................................................................................................................ 14
Backend.......................................................................................................................................................... 14

3.7 Explore: Pictures ........................................................................................................ 15

Current................................................................................................................................... 15
Frontend ........................................................................................................................................................ 15
Backend.......................................................................................................................................................... 15

Desired................................................................................................................................... 15
Frontend ........................................................................................................................................................ 15
Backend.......................................................................................................................................................... 15

3.8 Camera ..................................................................................................................... 16

Current................................................................................................................................... 16
Frontend ........................................................................................................................................................ 16
- ...................................................................................................................................................................... 16
Backend.......................................................................................................................................................... 16

Desired................................................................................................................................... 16
Frontend ........................................................................................................................................................ 16
Backend.......................................................................................................................................................... 16

3.9 Edit ........................................................................................................................... 17

Current................................................................................................................................... 17
Frontend ........................................................................................................................................................ 17
Backend.......................................................................................................................................................... 17

Desired................................................................................................................................... 17
Frontend ........................................................................................................................................................ 17
Backend.......................................................................................................................................................... 17

3.10 Notification (Activities) ............................................................................................ 18

Current................................................................................................................................... 18
Frontend ........................................................................................................................................................ 18

Backend ................................................................................................................................. 18
Desired................................................................................................................................... 18
Frontend ........................................................................................................................................................ 18
Backend.......................................................................................................................................................... 19

3.11 Notification (Notifications) ...................................................................................... 19

Current................................................................................................................................... 19
Frontend ........................................................................................................................................................ 19

Backend ................................................................................................................................. 19

Mert Gözel 2 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

Desired................................................................................................................................... 19
Frontend ........................................................................................................................................................ 19
Backend.......................................................................................................................................................... 19

3.12 Profile (Photo View)................................................................................................. 20

Current................................................................................................................................... 20
Frontend ........................................................................................................................................................ 20
Backend.......................................................................................................................................................... 20

Desired................................................................................................................................... 20
Frontend ........................................................................................................................................................ 20
Backend.......................................................................................................................................................... 21

3.13 Profile (Map View)................................................................................................... 22

Current................................................................................................................................... 22
Frontend ........................................................................................................................................................ 22
Backend.......................................................................................................................................................... 22

Desired................................................................................................................................... 22
Frontend ........................................................................................................................................................ 22
Backend.......................................................................................................................................................... 23

3.14 Profile: Types ........................................................................................................... 23

3.15 Pop Over ................................................................................................................. 24
Current................................................................................................................................... 24
Frontend ........................................................................................................................................................ 24
Backend.......................................................................................................................................................... 24

Desired................................................................................................................................... 24
Frontend ........................................................................................................................................................ 24
Backend.......................................................................................................................................................... 25

3.16 Comments ............................................................................................................... 26

Current................................................................................................................................... 26
Frontend ........................................................................................................................................................ 26
Backend.......................................................................................................................................................... 26
Desired................................................................................................................................... 26
Frontend ........................................................................................................................................................ 26
Backend.......................................................................................................................................................... 26

3.17 Followers ................................................................................................................. 27

Current................................................................................................................................... 27
Frontend ........................................................................................................................................................ 27
Backend.......................................................................................................................................................... 27

Desired................................................................................................................................... 27
Frontend ........................................................................................................................................................ 27
Backend.......................................................................................................................................................... 27

3.18 Following ................................................................................................................ 28

Mert Gözel 3 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

Current................................................................................................................................... 28
Frontend ........................................................................................................................................................ 28
Backend.......................................................................................................................................................... 28

Should .................................................................................................................................... 28
Frontend ........................................................................................................................................................ 28
Backend.......................................................................................................................................................... 28

3.19 Details ..................................................................................................................... 29

Current................................................................................................................................... 29
Frontend ........................................................................................................................................................ 29
Backend.......................................................................................................................................................... 29

Desired................................................................................................................................... 29
Frontend ........................................................................................................................................................ 29
Backend.......................................................................................................................................................... 30

3.20 Post ......................................................................................................................... 31

Current................................................................................................................................... 31
Frontend ........................................................................................................................................................ 31
Backend.......................................................................................................................................................... 31

Desired................................................................................................................................... 31
Frontend ........................................................................................................................................................ 31
Backend.......................................................................................................................................................... 31

3.21 Settings ................................................................................................................... 32

Current................................................................................................................................... 32
Frontend ........................................................................................................................................................ 32
Backend.......................................................................................................................................................... 32

Desired................................................................................................................................... 32
Frontend ........................................................................................................................................................ 32
Backend.......................................................................................................................................................... 33

3.22 Profile Settings ........................................................................................................ 33

Current................................................................................................................................... 33
Frontend ........................................................................................................................................................ 33

Backend ................................................................................................................................. 33
Desired................................................................................................................................... 33
Frontend ................................................................................................................................ 33
Backend.......................................................................................................................................................... 34

3.23 Change Password .................................................................................................... 35

Current................................................................................................................................... 35
Frontend ........................................................................................................................................................ 35
Backend.......................................................................................................................................................... 35

Desired................................................................................................................................... 35
Frontend ........................................................................................................................................................ 35
Backend.......................................................................................................................................................... 35

Mert Gözel 4 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

3.24 Connected Accounts................................................................................................. 36

Current................................................................................................................................... 36
Frontend ........................................................................................................................................................ 36
Backend.......................................................................................................................................................... 36

Desired................................................................................................................................... 36
Frontend ........................................................................................................................................................ 36
Backend.......................................................................................................................................................... 36

3.25 Push Notifications.................................................................................................... 37

Current................................................................................................................................... 37
Frontend ........................................................................................................................................................ 37
Backend.......................................................................................................................................................... 37

Desired................................................................................................................................... 37
Frontend ........................................................................................................................................................ 37
Backend.......................................................................................................................................................... 37

Mert Gözel 5 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

1. General Notes
• Current Backend is working for our prototype made with Swift. Does this Backend also work
for React Native?
• All wireframes are finished. Please implement the frontend as the wireframes.
• Technical data to our webhosting; Web Hosting 2000
(https://www.netcup.eu/hosting/#vergleich)
• Some screens will be provided as repos at GitHub
• Please work with GitHub in a clean way
• All design elements will be provided to you
• Design specs will be provided to you

2. General Requirements
• Multilanguage for UI and messages support: German and English
o Library: https://github.com/AlexanderZaytsev/react-native-i18n
o JSON files for English and German will be provided
• Current using database (MySQL) will be provided as database scheme. The following points
need to be discussed and the solution need to be implemented:
o How to add the new features into the existing DB scheme?
o Do we need to do changes for optimization?
• picture/video/sound posts should not be distorted
• Backend: Should be able to handle errors
• Frontend: Should be able to show the errors from the backend
• Keyboard
o K1: Next
▪ Select the next textbox element by clicking on “Next”

o K2: Go
▪ Execute the requested action by clicking on “Go”

Mert Gözel 6 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

o K1 & K2 support multilanguage (German & English)

• Navbar
o Title:
▪ Shows the current screen name
▪ Multilanguage
o Functions:
▪ Share Button
• Described in the following
▪ Finish Button
• Described in the following
▪ Back Button
• Goes to the previous screen
o Library: https://github.com/wix/react-native-navigation
• Tabbar
o Navigates to:
▪ Item 1: Home screen
▪ Item 2: Explore: Pictures screen
▪ Item 3: Camera screen
▪ Item 4: Notification screen
▪ Item 5: Profile screen
o Selected item
▪ Icon gets blue
▪ Otherwise grey
o Library: https://reactnavigation.org/docs/en/tab-based-navigation.html
• Tag Solution for pictures/videos/sound: https://clarifai.com/

Mert Gözel 7 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

3.1 Login
Current
Frontend
• Logo
• Labels (Text)
• Textbox
• Buttons (Also Eye)
• If login credentials are not valid: Show error messages
Backend
• Username and password transferred securely.
• Login credentials checked if valid or not.
• Password is stored secure

Desired
Frontend
• UI elements should be multilanguage.
• Messages should be multilanguage
• Elements should be responsive for Android and iOS devices
• Eye:
o You need to keep it pressed to show the password in clear
text
• Your Username:
o K1
• Your Password:
o K2
• Reset Password:
o Open Reset Password screen by clicking
• Login:
o If login credentials are valid and confirmed, open Home screen by clicking
• Sign Up:
o Open Sign Up screen by clicking
Backend
• Check if user has confirmed his account or not

Mert Gözel 8 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

3.2 Reset Password

Current
Frontend
• Defined UI Elements:
o Background
o Labels
o Textinput
o Button
• Wordwraps are marked
• If successfully send: Show message
Backend
• OK: Send reset password link to given Mail
• Resend: Send reset password link to given Mail

Desired
Frontend
• UI elements should be multilanguage.
• Messages should be multilanguage
• Implementation of Nav Bar
• Elements should be responsive for Android and iOS devices
• Your Mail Address:
o K2
• UI need to be made:
o OK: Button text
o Explanation text: Center and two lines
o Resend Link: center
o Note: Center and two lines
• OK/Resend Link:
o If successfully send:
▪ Show Note text
o If mail is not valid, show message: Mail is not valid. Please check your entry.
Backend
• -

Mert Gözel 9 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

3.3 Sign Up
Current
Frontend
• Defined UI elements:
o Labels
o Textinput
o Button
o Radiobutton
Backend
• Sign up:
o Checks if the mail and/or username is already taken
o Checks if everything is filled
o all information will be saved into the database:
▪ Mail
▪ Username
▪ Password

Desired
Frontend
• UI elements should be multilanguage.
• Messages should be multilanguage
• Implementation of Nav Bar
• Elements should be responsive for Android and iOS devices
• Gender:
o Radio Button design like the wireframe
o Selected: Purple
o Unselected: White
• For Backend: Gender, Date of Birth and Nationality
• Terms and Privacy Policy designing
• Signup button designing
• For every sign-up form element:
o K1
o Your Date of Birth
▪ K2
• Eye: You need to keep it pressed to show the password in clear text
• Nationality:
o Library: https://www.npmjs.com/package/react-native-country-picker-modal-sa
o Open the library by clicking
o Selecting by clicking on a nation
o After selecting: Close the selection screen and replace Your Nationality
• Date of birth:
o Datapicker Library: https://github.com/xgfe/react-native-datepicker
▪ Syntax: DD-MM-YYYY
• Also, as result for the textbox

Mert Gözel 10 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

• Signup:
o If the age is under 13, show message: “Sorry, you have to be at least 13 years old to
sign up.”
▪ Signup Button gets disable
• Terms:
o Should open the default web browser and opens a specific website.
• Privacy Policy:
o Should open the default web browser and opens a specific website.
Backend
• Check if age is under 13 or not
o User cannot sign up if his age is under 13
• Transfer Gender, birthday and Nationality
• Transfer Gender and Nationality in English.
• After confirmation, user can login and use the app.

3.4 Home
First tabbar item
Current
Frontend
• Listview with the information from a JSON file
Backend
-

Desired
Frontend
• UI elements should be multilanguage.
• Messages should be multilanguage
• Implementation of Nav Bar
• Implementation of Tab Bar
• Elements should be responsive for Android and iOS
devices
• UI elements need to be defined
• Search bar:
o By clicking open Search Screen
o Library: https://react-native-training.github.io/react-
native-elements/docs/searchbar.html the second grey
one
• Profile Picture:
o Shows the users profile picture related to the profile
o Opens the related Profile screen by clicking on it

• Username:
o Shows the users name related to the post

Mert Gözel 11 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

o Opens the related Profile screen by clicking on it

• City/Country:
o Shows the located city/place and the country
o Opens City screen by clicking on it
• POST:
o Shows the picture/video/sound with the related thumbnail icon
o Shows the related post on Pop Over screen by clicking
• Screen shows ever new post of the following users from the past 2 month (Performance
need to be discussed)
Backend
• Receipt of the information of the following users:
o Profile Picture
o Username
o City/Place, Country
o POST: Picture, Video and Sound with thumbnail icon

3.5 Search
Current
Frontend
-
Backend
-

Desired
Frontend
• UI elements should be multilanguage.
• Messages should be multilanguage
• Implementation of Nav Bar
o Library: https://github.com/react-native-
community/react-native-tab-view
• Implementation of Tab Bar
• Elements should be responsive for Android and iOS
devices
• UI elements need to be defined
• Search results should be shown in real-time
• Searchbar:
o K2

Mert Gözel 12 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

• Search results:
o Depends on the nav bar selection
o If user:
▪ Lists all the users with username (username) & profile pictures (Profile
Pictures) related to the search
▪ By clicking on the profile picture or username, open the Profile of the related
user
o If City and Places:
▪ Gets the searched city name or place
▪ Cities/Places have the city-icon
▪ By clicking on the icon or name, open the City Screen to the related
city/place
• If there is no result, show message: No result can be found.
Backend
• Fast and robust search of:
o Cities/Places with Mapbox
o Users
• Receipt of user information:
o Profile Picture: the related profile picture of the user
o Username: the related username of the user
o Shows every user related to the search key

Mert Gözel 13 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

3.6 City Screen

Current
Frontend
-
Backend
-
Desired
Frontend
• UI elements need to be defined
• Implementation of the tab bar
• Messages should be multilanguage
• Elements should be responsive for Android and iOS
devices
• Searchbar:
o Same functions as Search Screen
• MAP:
o Shows the searched city/place on the map with an
arrow
o Map SDK: Mapbox
▪ API Key for the custom design will be provided
• Details:
o Opens Details Screen
• IMAGE:
o Shows the picture/video/sound with the related
thumbnail icon related to the city or place location
o Posts are from every public account
• Swipe to right to go back to Home Screen

Backend
• Fast and robust localization of the searched city or place
• Fast and robust receipt of the IMAGE information

Mert Gözel 14 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

3.7 Explore: Pictures

Second tabbar item
Current
Frontend
-
Backend
-

Desired
Frontend
• UI elements should be multilanguage.
• Messages should be multilanguage
• Implementation of Tab Bar
• Elements should be responsive for Android and iOS
devices
• UI elements need to be defined
• Searchbar:
o Same functions as Search Screen
• Explore New Places:
o Snap-Carousel Library:
https://github.com/archriss/react-native-snap-carousel
o Layout: <Carousel layout={'default'} />
o IMAGE: Placeholder will be provided (snap-
placeholder)
o City: replace with the city name
o By clicking on the IMAGE or city: Open City Screen
with related information
• Explore Your Community:
o IMAGE:
▪ Picture/Video/Sound posts
▪ You can click on every picture/video/sound post to open Pop Over Screen to
see the related post
▪ with the related thumbnail icons for video and sound
Backend
• Explore New Places: Need to be discussed
o Shows the crawler results with snap-placeholder and the city names
• Explore Your Community:
o Shows random uploaded pictures/videos/sound from public accounts
o Need to be discussed: Random pictures/videos/sound are based on tags the user has
liked in other posts.
• Explore New Places/Your Community:
o Fast and robust loading of the crawler results and pictures/videos/sound
• Explore New Places/Your Community:
o Load all related information of the picture/videos/sound for Pop Over screen

Mert Gözel 15 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

3.8 Camera
Third tabbar item
Current
Frontend
-
Backend
-

Desired
Frontend
• Elements should be responsive for Android and iOS
devices
• UI elements need to be defined.
• Screen:
o the default view should be the back-camera view
o Library: https://github.com/react-native-
community/react-native-camera
• Close:
o Closes the screen
o Navigates to Home Screen
• Gallery:
o Opens Edit Screen
• Take:
o Takes a photo
o Video: Need to be discussed
o After photo is taken: Open Edit screen
• Swipe:
o Switches between front and back camera
Backend
• Functions need to be discussed

Mert Gözel 16 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

3.9 Edit
Current
Frontend
-
Backend
-

Desired
Frontend
• Elements should be responsive for Android and iOS
devices
• Messages should be multilanguage
• UI elements need to be defined.
• Library (Optional): https://github.com/prscX/react-
native-photo-editor
o Library (Optional): https://github.com/react-native-
community/react-native-image-picker
• Close:
o Closes the screen and navigates to Home Screen
• Continue:
o Opens the Post Screen with the selected
picture/video and the selected aspect ratio
• SELECT:
o Default:
o Shows a preview of the picture/video
• Ratio:
o Should detect if picture/video is in Landscape or portrait
o Default: Square
▪ Size: 1080x1080px
▪ Aspect Ratio: 1:1
o If landscape:
▪ Size: 1080x608px
▪ Aspect Ratio: 1.91:1
o If portrait:
▪ Size: 1080x1350px
▪ Aspect Ratio: 4:5
o IMAGE:
▪ The items from the main photo gallery of the smartphone
▪ ScrollView
Backend
• Functions need to be discussed

Mert Gözel 17 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

3.10 Notification (Activities)

Fourth tabbar item
Current
Frontend
-
Backend
-

Desired
Frontend
• Elements should be responsive for Android and iOS
devices
• UI elements need to be defined.
• UI elements should be multilanguage.
• Messages should be multilanguage
• Implementation of Nav Bar
• Implementation of Tab Bar
• Show 25 notification items
• Activities/Notifications:
o Slide between the two
o Library: https://github.com/react-native-
community/react-native-tab-view
• Orange circle:
o Shows the profile picture related to the profile
o Navigates to the profile by clicking
• lbUser-a
o Shows the users name related to the profile
o Navigates to the profile by clicking
• lbLocation:
o Shows the location of the post (can also be a place)
o Navigates to City Screen with the related information, by clicking
• POST:
o Shows the thumbnail of the picture/video/sound
o Opens the picture/video/sound on Pop Over Screen by clicking on it
• lbUser-a Post:
o lbUser-a: Shows the users name related to the profile
o lbUser-a: Navigates to the profile by clicking
• post:
o Navigates to the post at Pop Over Screen
• Liked X:
o Amount of liked posts
o POST: shows the last four liked posts
• Notifications are:

Mert Gözel 18 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

o See mockup

Backend
• Fast and robust receipt of the notification data (The cases from above)
• If account is private:
o Activities are only visible for users who follows the private account
• If account is public:
o User can see the interaction between his following user and other public accounts

3.11 Notification (Notifications)

Fourth tabbar item
Current
Frontend
-
Backend
-

Desired
Frontend
• Same as Notification (Notifications)
• lbUser-a like/comment:
o Shows the last user who liked/commented your post
• Your post/Post:
o Navigates to your post/post at Pop Over screen
• If account is private:
o If a user wants to follow you, show btA and btD
• btA:
o Accepts the request
o Change the notification to: <lbUser-a> is following
you now.
o Add one Follower
• btD:
o declines the request
o Remove the notification

• Notifications are:
o See mockup
• X liked/ Xcomments posts:
o X: amount of like/comments for the post

Backend
• Same as Notification (Notifications)
• Receipt of the X data

Mert Gözel 19 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

• Follower request systems

• If Account is private:
o You can accept/decline a follower request
o If accept:
▪ Add as follower

3.12 Profile (Photo View)

Fifth tabbar item
Current
Frontend
-
Backend
• Receipt:
o Username
o btFollow or btUnfollow
o Follow/Unfollow
o Profile Picture
o Description
o lbPost
o lbFollowers
o lbFollowing
o IMAGE
o MAP VIEW: Locations

Desired
Frontend
• Elements should be responsive for Android and iOS
devices
• Messages should be multilanguage
• UI elements need to be defined.
• Implementation of Tab Bar
• Implementation of Nav Bar
• username:
o Shows the users name related to the profile
• Settings:
o Opens Settings Screen by clicking
• Profile Picture:
o Shows the profile picture related to the profile
• btFollow/Unfollow:
o Follow: Followers add 1 and change button design to unfollow button
▪ If private: Change button design to request button
▪ After request accepted: Followers add 1 and change button design to
unfollow button
o Unfollow: Followers remove 1 and change button design to follow button

Mert Gözel 20 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

• Flag:
o Works only for own profile:
▪ Open: Action sheet with “Add Nation” and “Delete Nation” by clicking on a
flag item
• Library: https://github.com/expo/react-native-action-sheet
▪ Add Nation:
• Open https://www.npmjs.com/package/react-native-country-picker-
modal-sa
• Selecting by clicking on a nation
• After selecting: Close the selection screen and fill in the clicked box
and save to database
▪ Delete Nation:
• Delete the saved nation from the nation item and save to database
o Empty flags will not appear for other users
• Description:
o Shows the profile description related to the profile
• lbPost:
o Shows the amount of posts related to the profile
• lbFollowers:
o Shows number of followers related to the profile
o Open Followers screen by clicking
• lbFollowing:
o Shows number of following users related to the profile
o Opens Following screen by clicking
• btTile:
o Shows the default profile view where the images are listed in tiles
• btList:
o Shows the profile view in list view where the images are listed in a list where you can
scroll up and down
o Shows the same as Pop Over screen with the same functions
• IMAGE:
o Shows every uploaded picture/video/sound related to the profile with the thumbnail
icon
o Three images per row
o Order by posting date (from young to old)
o Open Pop Over screen with the related information by clicking
o with the related thumbnail icons for video and sound
• MAP/PHOTO VIEW:
o Default: MAP VIEW
o MAP VIEW:
▪ Switches to Map View and change Button to: PHOTO VIEW
o PHOTO VIEW:
Backend
• Upload:
o Flag information
• Receipt:

Mert Gözel 21 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

o Flag information
o Information about private or not
• Load optimization: Need to be discussed

• Private
o Private System
▪ If profile is private:
• Show Private screen
• To Follow:
o User need to send Following Request by clicking on Follow
button, which the profile owner need to accept then
o If accepted:
▪ Show the profile
▪ Add to Following
o If not accepted:
▪ Show Private screen
o If pending:
▪ Show Profile Requested screen

3.13 Profile (Map View)

Functions and requirements are as same as “Profile (Photo
View)”. This section only describes the MAP VIEW function
Current
Frontend
-
Backend
• Shows the located location on a map

Desired
Frontend
• Default view:
o World view
• Every country where the user located himself is filled with
color code: 08BBFE
• MAP: Mapbox zooms into the country where the user clicked
o Country color gets white
o The states or provinces gets filled with color code: 08BBFE
• Mapbox zooms into the state or province where the user
clicked
o State or province color gets white
o The city gets filled with color code: 08BBFE
Mert Gözel 22 / 37 15.07.2019
Project WO — Product Backlog v.1.0.0
15.07.2019

• When there is one picture/video/sound:

o Open Pop Over screen with the picture/video/sound related to the location
• When there is more than one picture/video/sound:
o Open PHOTO VIEW with only the picture/video/sound related to the location

Backend
• Receipt of the locations
• Fast and robust filling out
• When user navigates to MAP VIEW, the countries should already fill out
• Note: Design for this purpose is not done. Needs to be done from the developer

3.14 Profile: Types

Figure 3: Profile Follow Figure 2: Profile Unfollow Figure 1: Profile Private

Mert Gözel 23 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

3.15 Pop Over

Current
Frontend
-
Backend
• Receive:
o blue cylce
o lbUser
o IMAGE
o APPLAUSE: Amount
o COMMENTS: Amount
o lbDescription
o lbUsername
o lbViewComments: X
o lbUsername
o lbComment
• Like function
• Comment function

Desired
Frontend
• Elements should be responsive for Android and iOS
devices
• UI elements need to be defined.
• Implementation of Tab Bar
• Implementation of Nav Bar
• UI elements should be multilanguage.
• Messages should be multilanguage
• Buttons, lbDescription, lbViewComments, lbUsername and lbComment position can verify to
the image type (landscape or portrait)
• Blue circle:
o Shows the profile picture of the image owner
o Opens profile of image owner by clicking
• lbUser
o Shows the username of the image owner
o Opens profile of image owner by clicking
• IMAGE:
o Shows the picture/video/sound in portrait, landscape or square aspect ratio
o Sound:
▪ sound-thumbnail
o Video:
▪ Video preview with video-thumbnail
▪ Play by clicking

Mert Gözel 24 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

• APPLAUSE:
o If not liked: Grey
o If liked: Purple
o Shows amount of likes
o Like/Unlike by clicking
• Comments:
o Shows the amount of comments
o Opens Comments screen to comment by clicking (Need to be discussed)
• btInteraction:
o Open Action Sheet with delete function
o Library as mentioned
• lbDescription:
o Shows the description of the uploaded image
• lbUsername:
o Latest username who commented the image
o Opens the users’ profile by clicking
• lbComment
o Shows only the latest comment from a user
• lbViewComments
o Open Comments screen by clicking
o Text: Show all X comments
o X = amount of comments
• If sound only:
o Show sound-thumbnail
o Plays by clicking
Backend
• Fast showing of:
o Profile picture of the owner
o Username of the owner
o IMAGE
o Applause amount
o Comment amount
o lbDescription
o lbUsername
o lbComment
• Delete image and all information related to it

Mert Gözel 25 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

3.16 Comments
Current
Frontend
-
Backend
• Load
o All Comments
o Username
o Profile picture
o Add comment

Desired
Frontend
• Elements should be responsive for Android and iOS devices
• UI elements need to be defined.
• Implementation of Tab Bar
• Implementation of Nav Bar
• UI elements should be multilanguage.
• Messages should be multilanguage
• Grey circle:
o Shows the profile picture related to the user
o Opens the profile on Profile Screen by clicking
• username:
o Show the username related to the comment
o Opens the Profile on Profile Screen by clicking
• Lorem ipsum:
o Show the comment related to the user
• Image owner and Comment owner:
o Can delete the comment by swiping
o Library: https://www.npmjs.com/package/react-native-swipeout
• If user clicked on comment icon at Pop Over screen:
o Add your comment:
▪ Textbox to comment the picture
▪ User can mention another user starting with “@”
▪ Library: https://github.com/harshq/react-native-mentions
▪ K2
▪ Send comment by clicking on the comment icon
Backend
• Delete comment
• Mention System: Need to be discussed (How to save in DB)

Mert Gözel 26 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

3.17 Followers
Current
Frontend
-
Backend
• Load:
o Followers
o Username
o Profile picture
• Can follow/unfollow users

Desired
Frontend
• Elements should be responsive for Android and iOS devices
• UI elements need to be defined.
• Implementation of Tab Bar
• Implementation of Nav Bar
• User can navigate to the others user profile by clicking on the
grey circle or username
• Username:
o Shows every follower user
• If you are following the user:
o Show unfollow button
• If you are not following the user:
o Show the follow button
• Click follow/unfollow button to follow/unfollow the user
• Grey circle:
o Show the users profile picture
• Three dots
o Open Action Sheet with unfollow function, so that the follower user is unfollowing
the profile
o Only visible for users’ own profile
o Library as mentioned
Backend
• Three dots unfollow function
o To unfollow the user

Mert Gözel 27 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

3.18 Following
Current
Frontend
-
Backend
• Load:
o Following
o Username
o Profile picture
• Can follow/unfollow users

Should
Frontend
• Elements should be responsive for Android and iOS devices
• UI elements need to be defined.
• Implementation of Tab Bar
• Implementation of Nav Bar
• User can navigate to the others user profile by clicking on the
grey circle or username
• Username:
o Shows every following user
• If you are following the user:
o Show unfollow button
• Click follow/unfollow button to follow/unfollow the user
• Grey circle:
o Show the users profile picture
Backend
-

Mert Gözel 28 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

3.19 Details
Current
Frontend
• lbX are defined
Backend
-

Desired
Frontend
• Elements should be responsive for Android and iOS
devices
• UI elements need to be defined.
• Implementation of Nav Bar
• UI elements should be multilanguage.
• Messages should be multilanguage
• lbVisa:
o There are four types:
▪ Visa Required: “Visa Required” – Background: D40000
▪ Visa Free: “Visa-Free / X days” – Background: 00C500
▪ Visa On Arrival: “Visa on Arrival / X days” –
Background: 009AD4
▪ eVisa: “eVisa” – Background: 009AD4
▪ Type depends on user’s nationality
• WEATHER:
o Library: https://github.com/indiespirit/react-native-
chart-kit
o Should show the historical weather data in a diagram
o Temperature:
▪ Chart: Bezier Line Chart
▪ Y-axis: Show temperature for one year in a line
▪ X-axis: Month
▪ Dots for coldest/hottest month on the line
▪ Line: #6D37FD
o Rain/Snow
▪ Chart: Bar Chart
▪ Show number of day rains for one year with the days above the bar
▪ Line: # 08BBFE
• lbColdest
o Shows the coldest month
• lbHottest
o Shows the hottest month
• lbRainiest
o Shows the rainiest month
• lbSnowiest

Mert Gözel 29 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

o Shows the snowiest month

• lbDaySun
o Shows amount of sunny days
• lbDayRain
o Shows amount of rainy days
Backend
• Receive:
o Visa information related to the user’s nationality from
https://github.com/ilyankou/passport-index-dataset
o Weather information for WEATHER related to the searched city/place
o Weather information for lbX related to the searched city/place
o Weather API: https://darksky.net/dev (Actually no API key)

Mert Gözel 30 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

3.20 Post
Current
Frontend
-
Backend
• Upload:
o Picture
o Location via Google Maps
o Description

Desired
Frontend
• UI elements should be multilanguage.
• Messages should be multilanguage
• Elements should be responsive for Android and iOS devices
• UI elements need to be defined.
• X (Left corner):
o Cancel upload process
o Go back to Home screen
• Grey circle:
o Shows the selected picture/video from Camera screen as
preview (Don’t play the video)
• SHARE TO:
o Only visible, when you click at the icon on the right corner
o The selected social media channel gets purple
▪ Otherwise, dark grey
o Share Function: Need to be discussed.
• Select Location:
o Automatically locates
o By clicking: Can be changed manually: need to be discussed.
• Add a description:
o User can add a description by clicking
o K1: Close the key board
• Post Sound:
o If checked:
▪ Checkbox gets purple
▪ Upload as sound with sound-thumbnail as thumbnail
▪ Works only when user has uploaded a video
• Upload:
o Upload the picture/video/sound with Location, Description and Tags
o Share picture/video/sound to the selected channel
Backend
• Sharing to
o Facebook

Mert Gözel 31 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

o Instagram
o Twitter
o Vkontakte
• Localization:
o with Mapbox
o longitude / latitude
• Post Sound
o Save only the sound of the video
o Thumbnail: sound-thumbnail
• Upload:
o Video max. 30sec. with video-thumbnail
o Sound max. 30sec.
o Location via Mapbox
o Tags from Clarifai: Need to be discussed

3.21 Settings
Current
Frontend
-
Backend
• Sign out from the app

Desired
Frontend
• UI elements should be multilanguage.
• Elements should be responsive for Android and iOS devices
• UI elements need to be defined.
• Implementation of Nav Bar
• Implementation of Tab Bar
• Profile Settings:
o Opens Profile Settings screen
• Change Password:
o Opens Change Password screen
• Connected Accounts:
o Opens Connected Accounts
• Push Notifications:
o Opens Push Notifications screen
• Private Account:
o Switch between Public and Private Account
o Shows the current privacy status of the profile
o Set account to private/public by swiping
• Sign Out:
o Logout and show Login screen

Mert Gözel 32 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

Backend
• Private Account:
o Switch between Private and Public account
o Database adjustment
• Sign Out:
o Secure sign out from the app

3.22 Profile Settings

Current
Frontend
-
Backend
• Receive:
o Profile Picture
o Username
o Description
o Mail
o Gender
• FINISH:
o Upload
▪ Profile picture
▪ Username (also checking if already exist)
▪ Description
▪ Gender

Desired
Frontend
• UI elements should be multilanguage.
• Messages should be multilanguage
• Elements should be responsive for Android and iOS devices
• UI elements need to be defined.
• Implementation of Nav Bar
• Implementation of Tab Bar
• Your username:
o user can change his username by clicking
o K1
• Your description:
o user can change his description by clicking
o K1
• Your Mail:
o user can change his mail by clicking
o K1
• Gender (Male/Female/Diverse):

Mert Gözel 33 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

o user can change it by clicking

o Design: As Signup Screen
• Finish:
o If no error: Open Settings screen
o Upload everything to database
• Show error message when:
o User wants to change the username and the username is already taken: The
username is already taken. Please take another one.
o User wants to change the mail and the mail is already taken: The mail address is
already taken. Please take another one.
• If user has changed the mail address, show message: Please check your mail to confirm your
new mail address.
• Pencil: Open Camera screen to choose a profile picture
• Gender: User can only choose between one of these
Backend
• Change:
o If user has changed his mail address, he needs to confirm that mail address as in the
signup process
o Checking if already existing (username and mail)
• Upload:
o Gender
o Nationality
• Receive:
o Nationality

Mert Gözel 34 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

3.23 Change Password

Current
Frontend
-
Backend
• Change Password
• Check if current password is valid or not

Desired
Frontend
• UI elements should be multilanguage.
• Elements should be responsive for Android and iOS devices
• Messages should be multilanguage
• Password should not be in clear text
• Eye: You need to keep it pressed to show the password in
clear text
• Your current password:
o K1
• Your new Password:
o K1
• Confirm Password:
o K2
• Show error message, when:
o Current password is wrong
o “New password and confirmation password are not matching “
o “No internet connection to change the password”
• Show message, when:
o “Your password has been changed.”

Backend
• Secure password change by clicking on OK

Mert Gözel 35 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

3.24 Connected Accounts

Current
Frontend
-
Backend
-

Desired
Frontend
• UI elements should be multilanguage.
• Elements should be responsive for Android and iOS devices
• UI elements need to be defined.
• List:
o Facebook
o Instagram
o Twitter
o Vkontakte

Backend
• Connect app account with user social media channels: Need
to be discussed.

Mert Gözel 36 / 37 15.07.2019

Project WO — Product Backlog v.1.0.0
15.07.2019

3.25 Push Notifications

Current
Frontend
-
Backend
-

Desired
Frontend
• UI elements should be multilanguage.
• Elements should be responsive for Android and iOS devices
• UI elements need to be defined.
• Every option is clickable
• User can only choose one from every section

Backend
• Send push notifications regarding to the settings the user has
made
• Push notifications for:
o Likes
o Comments
o Follower Request
o Accepted Follower Request
o Library: https://github.com/zo0r/react-native-push-notification

Mert Gözel 37 / 37 15.07.2019