Outreachy Internship: Development of Zubhubs Mobile application

[alicendeh]

Below are answers based on questions are by @srish and @tuxology on the Zulip chat:

1. Where will the code live
   1.1 We can either create a folder in the existing project where the code will reside or
   1.2 We create a repo for the mobile app under the unstructured studio org and the mobile app exists as a standalone repo(I think this is best).

2. What web features are doable for the mobile application for a 3 month project? Let's make a priority list.
   2.1 Authentication
   2.1 (Home page) which includes fetching all projects and displaying to the user(Same as on the web app)
   2.3 Dashboard module which includes

   • View currently logged in user profile
   • Edit/delete account
   • View all projects

3. Project creation

4. Commenting

5. Following/Unfollowing creators/Likes and unlike/bookmarks

6. Translation

[alicendeh]

REFINING THE ABOVE ANSWERS

The very first module is the Authentication module.
The Authentication module is divided into two sub-modules(LOGIN and SIGNUP)

SUB MODULE 1: SIGN IN

• From the web app, the signin has the following fields(email, password).
• We can continue using email and password to login users. This is because the current web app uses this means and a lot of users are used to login in through this way already.
• I personally think we don't need to track users who are signing in from the web app or from the mobile app unless we will need that data for analytics purposes.
• Since it's a mobile app, we don't need to log out the users when they close the app. Rather whenever the users come to the app, we check if it's their first time or not. If it's their first time, we prompt them to log in else we route them to the login screen.
• For backend-oriented modifications, The API will need to grant access to the IP from where the mobile app is emitted so as to enable requests to be made.

SUB MODULE 2: SIGN UP
From the web app, the sign-in has the following fields(username, location, dob, phone, email, password, confirm password, and bio)

• For the location, I suggest we use

1. react-native-country-picker-modal. This package provides a list of countries, their flags, and country code
2. React Native Phone Number Input: This will help us in managing the phone number formatting and ensuring the number is valid based on the country
3. After sending the data to the backend server, we need to handle all cases of error(incorrect password, empty fields and all. The rest.)
4. We can use a toast to display all errors returned (As on the web app)

[tuxology]

This is good progress. Things are getting clearer now! I also suggest you create tiny sketches (can be hand drawn/rough - doesn't matter) and annotate them with individual points when required. You can refer some work done by previous interns on a very similar project in their planning phase: https://meta.wikimedia.org/wiki/WikiContrib/Proposed_implementation General suggestion IMO, is that we need to be almost 70% sure of what we are building (requirement specification) and how it may look (mockups) and how it would function (functional specification). Only then can/should we begin actual coding.

A few comments:

I personally think we don't need to track users who are signing in from the web app or from the mobile app unless we will need that data for analytics purposes.

OK, fair enough, we can skip this for now. However, we should have some way in backend to identify the incoming request may want some mobile specific info. We may modify APIs as and when required I would say.

For backend-oriented modifications, The API will need to grant access to the IP from where the mobile app is emitted so as to enable requests to be made.

I didn't understand this one. Can you elaborate? Rest all looks quite nice 👍

[alicendeh]

DEEP DIVE INTO THE AUTHENTICATION MODULE

1. AUTHENTICATION MODULE MOCKUPS
I did some sketches on how the Authentication module will look like

A. LOGIN

B. REGISTER

C. FORGET PASSWORD

D. BOTTOM TAB
My idea is, when the user comes to the app for the first time we have a bottom tab bar with two tabs
i. The home tab were we have all projects
ii. Authentication tab were the users can either login or signup

2. END POINTS AND DATA NEEDED

A. LOGIN
ENDPOINT: /api/rest-auth/login/
Required data: Username and Password

B. SIGNUP
ENDPOINT: /api/creators/register/
Required data:
username,
email,
phone,
dateOfBirth,
location,
password1,
password2,
bio,
subscribe,

C. FORGET PASSWORD
To be added..

[tuxology]

@alicendeh Good ideas, well organized! 👍 Just a few comments. Rest all looks good so far!

• So we had some good ideas here : Ideas on how to go about with the development of the ZubHub mobile application #348 (comment) We discussed the behavior of an unauthenticated user visiting the app for the first time. In that case, maybe the bottom bar should have a Home Button + search button + Add Project? Clicking home/search takes you to "Projects" view (which you will eventually mockup I presume) and Clicking "Add Project" takes you to "Login" or "Sign Up"
• The reason is that we want users not authenticated to still browse Zubhub and projects, but we periodically nudge them to sign up. We can do this by
  • Showing them a sliding down element on top of the app which persists after being shown the first time until login/signup is complete. When they click that, they go through the auth workflow you sketched
  • We also take them to auth workflow anytime they try to leave a comment, clap, bookmark etc.
  • The top right corner circle shows a generic human image. Clicking that open up login/signup workflow
  • Send Push notifications from time to time. We just need to be make sure we don't spam. Just slight nudges every few days.

[alicendeh]

@tuxology I have a suggestion to make.Can we do it in a way that when the users arent logged in yet, we dont show them a bottom tab bar. Rather we show to them a top tab bar containing an avater,the search and language toggler and when they click on the avater,we bring them to the authentication flow.Example here.

And when they login,we can then introduce the bottom tab bar

[alicendeh]

And also i want to ask which is prefferable. Should we leave the white background as it is above or we should go witha yellowish background.As shouwn below

[tuxology]

I am inclined to suggest a gradient yellow view like we have on our current responsive mobile web view

[alicendeh]

Hello @tuxology and @srish here is the link to the design file containing the Authentication flow.(Without the bottom bar) https://www.figma.com/file/yRY88ub5V8F20JWY7dTvMl/ZUBHUB_MOBILE_APP?node-id=0%3A1

[kamthamc]

I have some feedback

• Regarding language selection menu, users won't change it frequently. I think only frequent items should be quickly accessible. So move it to profile or hamburger menu?
• The buttons color should be same red color or the primary color the host chose.
• Two text fields on same line in a mobile screen might not be a good idea?

[alicendeh]

Thanks for the feedback @kamthamc.

1. For the language, we can take the device language and if the users want to change it, they can then do that in their settings. Very good suggestion thanks
2. I buy the idea that the color of the button should be read as well. I gave them the teal color because that was what I saw on the current web app. @tuxology please what do you think about this?
3. I will rectify that.
   Thanks a lot for the feedback @kamthamc

[tuxology]

@alicendeh These are some great mockups! 👏 I specially like the Sign Up nudge from below! I've left some comments in the mockups. Nothing major except just one thing - we can think about creating a wizard style navigation for account creation instead of just a single page form? I don't have any strong preference - feel free to use what feels best for you.

I've left comments on some individual components in the UI.

I buy the idea that the color of the button should be read as well. I gave them the teal color because that was what I saw on the current web app. @tuxology please what do you think about this?

I think lets keep the teal color for now for visual consistency!

[alicendeh]

Thanks for the feedback @tuxology I will do the necesary modifications and work on the next feature