Ideas on how to go about with the development of the ZubHub mobile application

[alicendeh]

Hi am called Alice, An Outreachy applicant and this is how I think we can go about the development of the mobile application

1. UI Design. Firstly we bring out wireframes for the entire system so as to have an overview of what it will look like. I have experience with Figma and I can begin with the design based on what the current web app looks like. But to do this, I will need authorization from the mentors to proceed)

2. Setting up a project for the mobile app.
   a. We can use React native(I suggest we use EXPO so we can easily test on both android and ios).
   b. Redux for state managment
   c. React navigation for routing within the system.
   d. I18n with light and dark theme defined for the project
   e. Axois for making requests to the server

3. After setting up the project we can build some custom components to be used(eg buttons,modals, text. etc..)

4. Jump into building the wireframes(I propose we go in a modular manner: meaning we get a module, build, consume the API, test and proceed with the next module)

[Morai-C]

Hello my name is Chukwudi, This is a good suggestion i stand with that.. using React Native with expo works fine, in addition to that to minimize the errors and mistakes we could also use Typescript if it won't be a problem.

[Morai-C]

Hello @tuxology in addition to this, for the Mobile app setup and development, we could use,
1 React Native with Expo Client for the App
2 Use graphQl for making requests instead of REST API due to the fact that REST API has problems with Over and Under querying.
3 for the state management we could use React context API as it is react own inbuilt management system
4 We could also use typescript to type check and limit the amount of errors and make it precise
5 We could start the project by creating dynamic, re-usable components and Globals.

About the sharing of codes you asked about, it could be possible when using react native for web.

[tuxology]

This is a decent approach @alicendeh 👍 Thanks for your ideas! We were also thinking about React Native as a natural progression from the current web app to mobile app. Is there a way code can be shared between the two apps?

Another thing we would like to do is see how the web app currently looks in the mobile view for different pages (signup, login, projects etc.) and see what areas might change when we create a mobile app. You may also begin creating a few UI/UX sketches for some initial interactions to get a feel of it and maybe like a one/two page app using the technologies you mentioned. This way we can see if this approach is feasible.

[alicendeh]

Hi @tuxology. Thank you for the positive feedback.
Below are the answers to your questions

1. Yes there's a way for code to be shared. React webview will enable us to bundle the web app to give it the look and feel of a mobile app. But it is always better to build the app with some native components provided by react native.
2. Okay sure I will create the UI/UX of the mentioned screens and bring out the implementation as well.

[godsakani]

This is a decent approach @alicendeh 👍 Thanks for your ideas! We were also thinking about React Native as a natural progression from the current web app to mobile app. Is there a way code can be shared between the two apps?

Another thing we would like to do is see how the web app currently looks in the mobile view for different pages (signup, login, projects etc.) and see what areas might change when we create a mobile app. You may also begin creating a few UI/UX sketches for some initial interactions to get a feel of it and maybe like a one/two page app using the technologies you mentioned. This way we can see if this approach is feasible.

Hello @tuxology
It is possible to share the same code with the web app and react native through the following:
#This can be done using API call to avoid duplication of code.

1. Yarn workspaces:
   it is a package that enable us to share code between react and react Native. Since react does not support this we install using Expo yarn workspaces.
2. Expo yarn Workspaces: helps to install yarn workspaces
   This is made possible by using disfunctions and hooks in the code base to
   share content between react and react native project
3. Using this package we can share function across react and react Native
4. Add the package to package.json file
5. Also use API call such as Graphql:
   Using graphql code generator, it easily generate the hooks and disfunctions to share the code.

[alicendeh]

Hello @tuxology and other mentors. Below is the link to the proposed designs I just created. Please take a look at it so we can discuss on the. And as instructed, I will code these screens and generate an apk or maybe an expo QR Code so we all can run the MVP on our various mobile devices.

LINK TO THE DESIGN: https://www.figma.com/file/DCXsIK2XBQnRFbHoYFa3Nk/ZUBHUB?node-id=0%3A1

PREVIEW OF THE DESIGN

Please find the other screens on the Figma file(Link sent above).

NOTE THAT
I designed two different views for the project's screen. So I propose we look at view1 and view2 and select which is better.

[alicendeh]

Hey @Morai-C. The content of the tab bar changes based on if the user is authenticated or not. Like now, we have just projects,search and authentication screens. When the user will be authenticated, we can then have his profile,his projects and other.

Now the reason i added the menu icon is so as to have

1. language toggler
2. share projects
3. Explore ideas.

NB: I tried adding the icons directly but it did not really look good

[Morai-C]

we could work together and get something good out of that.. about the icons, walk me through as your doing it.. i'll open your figma link and look through.. we could lace better icons too.. lets have a vast option.. have you used framer before to design?

[alicendeh]

we could work together and get something good out of that.. about the icons, walk me through as your doing it.. i'll open your figma link and look through.. we could lace better icons too.. lets have a vast option.. have you used framer before to design?

No, I haven't used framer. I am mostly versed with Figma.
As for the collaboration, it's a good idea but I think our mentors need to first take a look at what was done and give us their authorization so we can go ahead.

[Morai-C]

we could work together and get something good out of that.. about the icons, walk me through as your doing it.. i'll open your figma link and look through.. we could lace better icons too.. lets have a vast option.. have you used framer before to design?

No, I haven't used framer. I am mostly versed with Figma. As for the collaboration, it's a good idea but I think our mentors need to first take a look at what was done and give us their authorization so we can go ahead.

okay that would be great, i also left some comments on the figma you could check it out

[Jumeb]

hello Alice this looks nice but we could do a little bit of work on it.. The bottom tabs are not supposed to be shown on a registration screen or login screen, it should be shown after a user is logged in.. the i guess the tab bar should contain a home, project, search and account navigation. the hamburger menu could also be removed from there. what do you think?

Hello everyone, I agree with @tuxology where the tab should have the home, project, search and account navigation. Then in the account navigation we could then put an option to select languages as in the future we may likely increase reach out of this resources in other languages.

[tuxology]

Hi @alicendeh I went through the mockups. Good efforts till now 🙏 Here are a few comments:

• While the location of "Home", "search" and "accounts" is interesting, the current UX is a larger break from what we have on ZubHub web. It could be Ok to have a new UX on the dedicated app, but we should incorporate elements from the existing Zubhub Web wherever possible. An example is the hamburger menu and its items. I see that the menu exists post login, but is it same as clicking account tab below? After login, what is the indicator for the user that they are logged in? On Zubhub, we show their Robohash Avatar. So just at a glance the user knows they are either logged in or need to log in.
• Its ok to keep the 3 tabs below even when not logged in. users when they get to the main screen should be greeted with the home page (which is default page you visit when you go to Zubhub even when you are not logged in) with projects of everyone so they can explore.
• There needs to be a clear CTA somewhere about "Create Project" so that user can begin engaging with the site. It could even be a separate Tab below (called Add ➕ ) or under the account tab. Think how can we add this.
• We need some more colors from Our ZubHub palette. The top nav bar should be Zubhub Red. The Zubhub logo is ideal for darker backgrounds. Tabs below could also be either Zubhub Red or Zubhub Teal-ish
• Its better to keep the card and navigation of project as it is for now (exactly same as responsive mobile view of Zubhub Web) to reduce any more complexity in design at this stage. We can revisit this later The current one you suggested needs a lot of iterations and it will waste many cycles. So lets skip that part of design for now :) I'm also attaching our color palette for your reference for your next iteration!

ZubHub Color Palette

[alicendeh]

Hi @alicendeh I went through the mockups. Good efforts till now pray Here are a few comments:

• While the location of "Home", "search" and "accounts" is interesting, the current UX is a larger break from what we have on ZubHub web. It could be Ok to have a new UX on the dedicated app, but we should incorporate elements from the existing Zubhub Web wherever possible. An example is the hamburger menu and its items. I see that the menu exists post login, but is it same as clicking account tab below? After login, what is the indicator for the user that they are logged in? On Zubhub, we show their Robohash Avatar. So just at a glance the user knows they are either logged in or need to log in.
• Its ok to keep the 3 tabs below even when not logged in. users when they get to the main screen should be greeted with the home page (which is default page you visit when you go to Zubhub even when you are not logged in) with projects of everyone so they can explore.
• There needs to be a clear CTA somewhere about "Create Project" so that user can begin engaging with the site. It could even be a separate Tab below (called Add heavy_plus_sign ) or under the account tab. Think how can we add this.
• We need some more colors from Our ZubHub palette. The top nav bar should be Zubhub Red. The Zubhub logo is ideal for darker backgrounds. Tabs below could also be either Zubhub Red or Zubhub Teal-ish
• Its better to keep the card and navigation of project as it is for now (exactly same as responsive mobile view of Zubhub Web) to reduce any more complexity in design at this stage. We can revisit this later The current one you suggested needs a lot of iterations and it will waste many cycles. So lets skip that part of design for now :) I'm also attaching our color palette for your reference for your next iteration!

ZubHub Color Palette

Thank you @tuxology ill do those modifications.

[alicendeh]

Hi @tuxology . Thank you for the feedback. The design i provided was considering the fact that the user wasnt authenticated yet. Let me provide another view based on the feedback you gave.

[alicendeh]

Hello @tuxology, I did the modifications you requested, I added some more screens and made the designs more explicit.
I left the bottom navigation since it's a mobile app, I believe it'll be good so users can access some screens with a single click. I added the projects tab and removed the search.
Please take a look at it and tell me what you think https://www.figma.com/file/DCXsIK2XBQnRFbHoYFa3Nk/ZUBHUB?node-id=0%3A1

And I would also like to ask if you'd want me to provide a coded MVP so we see what it looks like.

[Morai-C]

@alicendeh this looks goo thought i've left some comments too... about the login check the images i just posted, i was saying the bottom tabs should only be available when logged in.. it wont be showing on the login or register page.. take a look at these

![Screenshot (136)](https://user-images.github


usercontent.com/77807331/161450598-bae51225-d294-4c8d-8b9e-821b84f2ae6a.png)

[alicendeh]

@alicendeh this looks goo thought i've left some comments too... about the login check the images i just posted, i was saying the bottom tabs should only be available when logged in.. it wont be showing on the login or register page.. take a look at these

![Screenshot (136)](https://user-images.github

usercontent.com/77807331/161450598-bae51225-d294-4c8d-8b9e-821b84f2ae6a.png)

Okay I get it. I'll modify that. Thanks for the feedback

[Morai-C]

you're welcome @alicendeh

[alicendeh]

Hello @tuxology. As you told me the other day to provide one or two pages with the technologies i mentioned to see how the app will look like,I did that and this is what i reproduced based on the design i made.

Instructions to run the project

1. Download the expo go app on your mobile phone.
   If you are on android, use this link to download(https://play.google.com/store/apps/details?id=host.exp.exponent)
   If you are on ios, use this link to download(https://apps.apple.com/fr/app/expo-go/id982107779?l=en)

2. After downloading the app, open your phone's camera and scan the QR code below

.

Expected output

Please go through and tell me what you think. I also added more screens on the designPlease take a look at the design file.

[Jumeb]

Hello @tuxology. As you told me the other day to provide one or two pages with the technologies i mentioned to see how the app will look like,I did that and this is what i reproduced based on the design i made.

Instructions to run the project

1. Download the expo go app on your mobile phone.
   If you are on android, use this link to download(https://play.google.com/store/apps/details?id=host.exp.exponent)
   If you are on ios, use this link to download(https://apps.apple.com/fr/app/expo-go/id982107779?l=en)
2. After downloading the app, open your phone's camera and scan the QR code below

.

Expected output

Please go through and tell me what you think. I also added more screens on the designPlease take a look at the design file.

@alicendeh I have a minute suggestion, in the splash screen could you increase the horizontal padding, I think the logo is too close the edge of the screen.

[alicendeh]

Thanks you the feedback @Jumeb let me modify that

[tuxology]

@alicendeh Great work so far! I am reviewing this 🙏

[alicendeh]

Thank you @tuxology. Let me know if theres something i should modify. ill do that right away.

[Morai-C]

this is nice @alicendeh

[alicendeh]

Thank you @Morai-C

[Morai-C]

hello @alicendeh i need to send you a personal message how can i do that?

[alicendeh]

Hello @tuxology,@srish, and other mentors. I have refined the designs. I Am trying to bring different designs so we can choose which is best.
Please take a look at the design file here. While open to all feedback, ill continue working and adding the different views so we have the best UI possible.

PREVIEW

1. Home screen with a different card design and without the background color on the header bar
   

2. Home screen with a different card design and with the background n the header bar
   

[godsakani]

Hello @tuxology
It is possible to share the same code with the web app and react native through the following:
#This can be done using API call to avoid duplication of code.

1. Yarn workspaces:
   it is a package that enable us to share code between react and react Native. Since react does not support this we install using Expo yarn workspaces.
2. Expo yarn Workspaces: helps to install yarn workspaces
   This is made possible by using disfunctions and hooks in the code base to
   share content between react and react native project
3. Using this package we can share function across react and react Native
4. Add the package to package.json file
5. Also use API call such as Graphql:
   Using graphql code generator, it easily generate the hooks and disfunctions to share the code.

[tuxology]

Thanks for this info @godsakani We'll keep this in mind. I didn't understand your comments about disfunctions - what are these? Can you provide some links about the info and suggestions you gave?

[godsakani]

Thanks for this info @godsakani We'll keep this in mind. I didn't understand your comments about disfunctions - what are these? Can you provide some links about the info and suggestions you gave?

Hello @tuxology
disfunctions are reacts codes that are written as functions which enables the sharing of code between react and React Native .
Below are some of the links of packages and documentation I mentioned above :

1. Graphql : https://www.graphql-code-generator.com/
2. Workspaces : https://classic.yarnpkg.com/en/docs/workspaces/:
   That allow us to share code between React and React Native that is between web and our application.
   Note:
   1 With React Native it is tricky to configure workspaces reason being that symlinks are not supported yet.
   2 This problem is solve by using another package call Expo Yarn Workspaces.
   3 How to configure Expo Yarn workspaces is found here: https://github.com/expo/expo/tree/master/packages/expo-yarn-workspaces

Example of a project that share same code with web and app we have devhubapp we can check out their repo: https://github.com/devhubapp/devhub

[tuxology]

Thanks for this info @godsakani 🙏

[godsakani]

Thanks for this info @godsakani 🙏

Thank You to @tuxology for the feedback am gratefull

[alicendeh]

Hello @tuxology. Below is feedback on what I have been able to achieve so far regarding the mobile application.

1. Coded a new home screen with React Native. This design is based on what I provided on the design board

PREVIEW BELOW

3. I then consumed the Django API and displayed the information on the UI I built

PREVIEW BELOW

OVERAL PREVIEW
Below is a screen record I made on my phone to show the overall interaction
https://user-images.githubusercontent.com/58989178/162672305-3f3d3e6d-49dc-4a34-b2ce-17eff18105fa.mp4

Please @tuxology @srish @NdibeRaymond what do you all think about this. Am open to all feedback,suggestions and modifications

[tuxology]

Hey @alicendeh, thanks for testing multiple variations in the design. Here are a few comments

1. Generally the white color-only styling is not looking that great to me. While it may be ok for more older audiences, we should remember that young children from grades 6-9 are the target demographics. we tested our colors with a few kids before and they prefer to have colored designs (strongly favouring our palette we have), but I would recommend for now we stick to as much visual consistency in colour as in Zubhub web.

2. I generally liked the direction we had in Ideas on how to go about with the development of the ZubHub mobile application #348 (comment) which had a good balance between introducing a new bottom tab (which helps in navigation using thumbs on a mobile device) as well as standard top navigation bar (identifying zubhub and telling users that you are logged in as they see their avatar)

3. Using same card style as we have on web also make the browsing experience more centered to the project and media (large title, media first, quick description and interactions) and less on the user and story (as is in your followup design here: Ideas on how to go about with the development of the ZubHub mobile application #348 (comment)).

4. Another reason for similar styling as Zubhub Web in terms of card design etc is that it becomes easy and fast to implement and carry over code/ideas. Creating a completely new style would make it difficult to maintain in the long run and would need some more UX work.

5. Please note the subtle issues in design such as consistency in design and spacing of elements. Here are a few links to learn from. Do give a close look at it if possible: https://medium.com/dwarves-design/the-principle-of-spacing-in-ui-design-part-1-3354d0d65e51 and https://medium.com/dwarves-design/the-principle-of-spacing-part-2-e3cf31b909fa

In conclusion, here is a possible high-fidelity mockup of the home page I created for some more inspiration. It keeps current ideas while introducing new ones. Eventually we may replace the card styling, but we may do it incrementally. Do note that a few elements in the card are also changing as other folks in the team are working on them. With a more ZubHub Web inspired approach, we would benefit from UX changes happening there as well 😸

[alicendeh]

Very well noted @tuxology . Please I'd like to ask this screen you provided, should we go with that for the Home Screen?

2. Also do we want the mobile app to have exactly thesame look as the web app?
   Or it mustn't be 100% same?

[tuxology]

Very well noted @tuxology . Please I'd like to ask this screen you provided, should we go with that for the Home Screen?

This could be a starting point. It is worth prototyping a home screen like this in React. And not just that, at least one level deep individual screens for "Home", "Search", a "Notification" (upcoming feature as noted here: #298) and "Add Project" view. I see the home screens very similar to what we have currently but with a colored title bar on Android as well as iPhone. Something like this you did earlier:

Take inspirations from the responsive "mobile web" designs liked in the #298 issue shared above. Note how elements are spaced, how cards look etc. The use of the lower navigation bar is mostly what is new new in my mind (this is mostly important because of a focus on thumb based navigation when a full mobile app is being used now). Of course things from the top menu will get removed (such as search) as we bring them below and maybe new things get added (settings etc)

2. Also do we want the mobile app to have exactly thesame look as the web app?
   Or it mustn't be 100% same?

It won't be 100% same, but we would like the designs to be as close as the "mobile web" we have for now. As noted before, this is mostly because of code portability + uniformity in design as people switch from mobile to web and back to mobile. Some elements need to remains familiar

[alicendeh]

Noted @tuxology. I will firsty bring wireframes for the screens to be prototyped (If they arent present on the deign board yet) and after that, I'll go ahead and provide the prototype.

[alicendeh]

Hello @tuxology, As you requested, I provided the prototype for each main layer (Home, Projects, profile).

BELOW ARE SCREENSHOTS OF THE OUTPUT

BELOW IS A SHORT VIDEO DEMO
https://user-images.githubusercontent.com/58989178/164023002-ef5ba160-e04e-400c-9b56-2a21e1e7fcf5.mp4

Please tell me what you think and if there are any corrections I will do it right away

[godsakani]

Hello @tuxology, As you requested, I provided the prototype for each main layer (Home, Projects, profile).

BELOW ARE SCREENSHOTS OF THE OUTPUT

BELOW IS A SHORT VIDEO DEMO https://user-images.githubusercontent.com/58989178/164023002-ef5ba160-e04e-400c-9b56-2a21e1e7fcf5.mp4

Please tell me what you think and if there are any corrections I will do it right away

@alicendeh cool 😎 I really love this.
@alicendeh please look at the icons beside the upload buttons if you can add some space between them?

[alicendeh]

Sure i will

[tuxology]

Good work so far @alicendeh 👍

[godsakani]

Sure i will

Thank you

[alicendeh]

Good work so far @alicendeh +1

THank you @tuxology 🙏🏻

[godsakani]

@tuxology , @alicendeh

In addition to this I did some findings on sharing code base of react Js and react native . I already mentioned some above

1. UI rendering:
   When it comes to UI rendering we can't share react JS and React Native so the solution that I came up with this , the UI you are doing can be implemented with React Native and it will be same as the react web view. Meaning the UI implementation won't be a problem
2. Config files:
   I found out that we are able to share the config files between React Native and React Js. This makes the process easier.
3. Bloc:
   The business logic of the react web view can be configured to work same as that of react native

With this it is possible to share some functions in React Js and react native