[C4GT] Implement authentication and chat interface for the mobile app according to the designs

[mdshamoon]

Product Explanation

Glific is a WhatsApp based open source 2-way communication platform for NGOs to have conversations with their community.

We want to solve the problem of NGOs’ program delivery through this chatbot, that NGOs use to engage with their beneficiaries, distribute content, provide useful information at their pace & get feedback.

It enables them to launch their programs in a chatbot format quickly, cost-effectively and at scale.

Features to be Implemented

We will be building a mobile version for our web interface in this project. The end result will be an IOS/Android application built on React Native that will help NGO staff members to check and easily communicate with their beneficiaries using their mobile devices.

This request has come up many times by a lot of NGO organizations that we work with and we feel that it would really help easy managing of daily operations.

We will create a POC and work with several Glific NGO to enhance/update the features of the app. Design file for the app: https://www.figma.com/file/SbP0ru8kiB2l334ieX1ESe/Mobile-app?type=design

The first version will contain the following features:

• A login screen that uses the same credentials as Glific web app.
• A chat interface similar to the Glific web app that contains:
  • Sliding sidebar with the list of contacts and ability to search and select the contacts.
  • All messages of the selected contact.
  • An input box similar to the web interface for sending a text message.
• Simple notification for errors like Update gupshup balance while not on the app.

Learning Path

Category	Rating
Difficulty	Medium
Risk/Exploratory	High
Skills	Javascript, React Native, Typescript
Possible mentors	@mdshamoon
Project size	6-8 weeks

Product Set Up:

To set up the project on a system, follow the guidelines in Readme of the project.

Additional resources:

• Join our discord channel to communicate with team members and take help: https://discord.gg/rcBxTA4wnf
• API documentation : https://api.glific.com/
• User documentation : https://glific.github.io/docs
• Staging/test-site: https://staging.tides.coloredcow.com/login
• Credentials:
  • URL: https://staging.tides.coloredcow.com/api
  • Phone: 7834811114
  • Password: secret1234

Acceptance Criteria:

The acceptance criteria for this project are:

• A platfrom user can successfully authenticate in the mobile app
• After the user logs in, they will be able to see a chat screen with a list of contacts and messages
• A notification should appear on the phone if its triggered by the server

Out of Scope Elements:

The following elements are out of scope for this project:

• Adding backend APIs
• Pixel perfect design

[SrijanShovit]

Hi @mdshamoon I checked at https://github.com/glific/mobile But there is no readme file. I am new to react native but have been using react for about 2 years. So I feel I can contribute here. I implemented these features in Flutter earlier. Kindly guide how shall I proceed.

[mdshamoon]

@SrijanShovit I am adding a README soon here. Meanwhile just follow the basic react native installation steps and you should be good to go.

After cloning the repo: Run yarn install and then yarn start. Let me know if you face any issues there. You can also join our discord channel to get immediate help from other team members.

[VishalZ123]

Hello @mdshamoon I have setup the project. Though I am new to React Native, I am into App development for around a year and have worked on projects using Flutter and Kotlin. I know React pretty well. So I think I would be able to make meaningful contributions. Looking forward to this.

[mdshamoon]

@VishalZ123 Awesome. Want to start on this https://github.com/glific/mobile/issues/3. Let me know in case you have any questions.

[ArkaPrabhaChowdhury]

Hey @mdshamoon. I would like to work on this issue. I have some experience in working with ReactJS and have built complete work flows including login, registration and dashboard. Implementing react native should be quite simple too!

[mdshamoon]

Welcome @ArkaPrabhaChowdhury. Sure you can start with #16. Let me know if you have any questions.

[ArkaPrabhaChowdhury]

Welcome @ArkaPrabhaChowdhury. Sure you can start with #16. Let me know if you have any questions.

I see that someone else has taken up that work. Should I work on the same or something else?

[mdshamoon]

Hi @ArkaPrabhaChowdhury you can start with #21. Please add a comment there and I will assign it to you

[Adii-5442]

Hello @mdshamoon , I've gone through the application and have setup my project. I've experience in react-native app development and looking forward to to contribute in this project. I've even worked on similar real-life projects in react-native. Please let me know from which particular task I shall proceed.

[AbhiiNaithani]

Hey @mdshamoon , I've found this project great and would like to contribute in this. I've some earlier experience in react-native app development and want to improve my skills through this project. Please guide me.

[chandra-pro]

Hi @mdshamoon , would you guide me regarding this project? I have experience in typescript and react native as well. Please assign me some good first issues so that I can understand the project better

[harshu1611]

Hi @mdshamoon . I am a react native and node js developer with experience in android applications. Looking forward to the contribution. Please tell me further steps to go.

[mustafaazad03]

Hi @mdshamoon , I am Mustafa Azad. Currently, I am MERN Stack Developer with experience in React Native. As I have build many such projects in the past and learned many efficient techniques to implement functionality. This project grabs my interest and I would love to contribute in this.

[turingAlan]

@mdshamoon I am React native for more than 2 years having built several android and IOS application for my clients. Now I want to contribute to the open-source community, and this seems a really noble cause I think I can a add a ton of value to project.

[dishant-yadav]

Hello @mdshamoon, I am well versed in technologies like React Native, React and Redux. I am good experience in developing apps with React Native. I believe that I can complete the tasks and features mentioned above as I have already worked on a chat application in React Native. I find this project interesting and I would love to contribute to this.

[TYCN129]

Hello @mdshamoon, though I am new to React Native, I have good experience working with the MERN stack. I have also developed a chat application using React, and I believe I can implement the app features mentioned above. I am interested in contributing to this project. Looking forward to hearing from you.

[nishant25062002]

Hello @mdshamoon , I have set up the project. I have been working with React Native for over 2 years and have built apps using with React Native. Therefore, I believe I will be able to make meaningful contributions.

[KrishnaDwibhashi2]

@mdshamoon i have observed that the "Unread" number is not getting updated even after the message being read. Sharing 2 screenshots taken at the same time in mobile app & web app after an unread message was read

Please let me know if you want me to raise an issue regarding the same

[Antriksh1305]

Hello @mdshamoon I am Antrikesh Gupta, I have a good expertise in React Native and design enhancement of the app, I believe I will be able to make quite a significant number of contributions to this project.