Since in the current one the size of the textboxes are very big. so it is becoming for user to chat .
Please assign me to change it so that I start working on it. @DhairyaBahl

Thanks
Himika Mishra

Android layout of this app must be fixed as soon as possible.

Description

We are currently having fixed width of Message Box although height is varying . Fixed width was done so that It will look neater. But now we are having timestamps, so how about the responsive width also. I mean If a certain width is crossed then, increase its height. I am not totally sure about this idea.

So suggestions open !!

I am adding picture of current status of the web-app.

Description

This project is currently using "Facebook messenger logo" and having name just "messenger" .

Suggestions Open for new name and logo

ISSUE

There should be a white border in the dark mode at the bottom of the header and at the top of the footer. This is because we are unable to differentiate header and footer in the dark mode due to dark background.

Picture of the issue

How This Can Be Resolved ?

• Add the border at bottom of header and top of footer using CSS.

Hey @DhairyaBahl, the text input field along with the color combination in the footer looks really dull. Please, assign me to fix these issues.

Hi @DhairyaBahl ,
I think the font size of the updated time while sending the message is too big as its distracting while reading the messages .
I think u got my point. If you will assign me I will start working on it and will communicate too if I get Stuck somewhere.
Thanks

Current colors of the app not look very professional. Suggestion Open for better UI colors.

We can add an emoji picker in this chat app. Besides light and dark theme we could add multicolor themes based on users choice to this.I would like to work on this issue as a GSSOC 21 participant.Please assign me this.

Can I start to work on this issue?

In Safari:

In Chrome:

@DhairyaBahl I would like to fix it as a gssoc`21 participant. 😁

All the messages looks very messy. There should be padding ( space between messages and border ) .

• Add padding of 10-20 px in the messages.

Currently, the "write your message" bar does not look that appealing, it can be improved.

Description

Currently the app is using whatsapp background images In light mode and also in the dark mode . Suggestions Open for background image for this App.

The message box should be responsive or not i.e. it's size should vary according to the message length or box should have a static size ??

Suggestions Open !!

I wanted to setup the mobile app for the same app

Header title should reduce font size for mobile devices (medium to small screens)

Currently the Messenger title covers up the entire header


Need to make the title font responsive.

This App is created by keeping the phone view in mind and because of that some features broke in the desktop view.

• "Messenger" heading and its logo should be in center
• dark mode icon should be in the right corner.

For Reference look at the android view of the app.

Description

Currently this app shows full messages, it doesn't matter how long they are, chat will show full message. How about read more kind of a thing which will be great for the app.

Example Picture

1.The colour combination of the page can be improved a lot.
2.The Name and logo can also be changed and also the styles of the message can also be improved a lot.
3.Choosing the matching font.
4.Firebase Authentication can also be added.

Currently we can just send messages to the database. There should be a way through which we can upload something else like images or documents.

Devise a feature or method through which we can upload something else than just the text messages. either it should be shown or it should be downloadable.

Hey @DhairyaBahl !
I just noticed that we are still using the default the site title and favicon provided with the React boilerplate code.
I think we should change it to something matching our site's objective. [GSSOC`21 participant]

Description

Text overflows out of the box on writing long text .

Tips to solve

Box should be responsive.

@abhijeet007rocks8 Kindly lead this issue.

Hi,
@DhairyaBahl I want to make some changes to the textboxes while hovering onto them to make them look trendy.
It will become somewhat different from all the other messaging apps.
I think u got my point .
Kindly assign me this issue so that I can work on it ASAP.
thanks,
Himika Mishra

Hey @DhairyaBahl !
I just noticed that the button to change the theme is not aligned properly in the navbar.
I would like to align it with the messenger logo. [GSSOC`21 participant]

Description

Currently messages are looking very light so it would be great to increase the font-weight of the messages.

Current Status

Don't Forget

After fixing the issue or making a pull request for the issue. don't forget to add a ScreenShot of the new look.

New features should be added to the dark mode to enhance the effectiveness of that mode. Following is the list of the features to be added. Suggestions open for more features for the dark mode.

• Change Background image to this on toggling dark mode
• If new image makes the text invisible, then choose the new UI color appropriately
• Take screen-shot of new appearance

In order to reply to or use previous message as reference.
Need to add feature to tag the Message.

If We install the App , we See some Onboarding Screen , I will Design it using and Code in React Native , the thing is it Comes only once after install ing the app

You can Check my Samples from here
https://github.com/bhubesh757/React-Native-Tuts/tree/main/socialapp/onboardingreactnative

Hey! I noticed that the text inside the message box overflows in case of long messages. I'd like to work on this issue and remove the overflow. I'm a GSSOC'21 participant.

Can I make PR for favicon and app title ?

This component will render on successful login.
The layout will be similar to that of the web version-: Refer Website
Additional Feature-: the sender profile pic will be visible beside the message.

(Do not Focus on CSS too much in earlier phases)

hey I am GSSoC 21 participant and would like to add a new feature to this app like adding an authentication system with an option for creating personal chat channels which will be fully secured

I would like to work on this new feature
thanking you
looking forward to your reply

Currently the app takes name in the beginning to verify the user. devise a way to add some sort of phone or google authentication.

Currently, when we scroll the messages the background image too gets scrolled along with the messages. I was thinking this app should have a fixed background image. i.e. Background image shouldn't get scrolled along with the messages (like for example in WhatsApp), also later we can add a feature of providing an option to the user to change the background image.

I think there should be a delete feature for individual messages so that user can delete the message they don't want. It should be a deletion from database or just from the client side that's the question !!

Suggestions Open !! 😄

Here, I want to modify the text input field and send button at the footer. Please assign me these issues. I am a GSSOC'21 participant.

The profile pic of the sender should be beside the message he/she sends.
As in facebook messenger

Screen shows messages from top by default. It should show the messages from the bottom when the page refreshes. So that we don't have to go to the bottom of the page manually like we do now.

• Add new feature so it refreshes at the bottom of the page by default.

Hii @DhairyaBahl I want to work on this issue .Kindly assign this to me

I will like to add a feature this will update contributor list in read me automatically !! Will start to work on this issue as soon as i get assigend !!

Description

Devise a method to show the timestamps.

Suggestion

They should be at the right bottom of the box. which should contain only the time the message was sent ( not the day and date )

Related Images

As we can see in this whatsapp example. There are timestamps at the end of messages. 🤔

There should be android support for the application. Suggested to use react native because this is a react messenger application but suggestions open for other android development tools i.e. flutter , etc

The messages block could be changed to get a better feel of text messages as shown in the picture below.

It would be great if you could let me know any feedback on this.

I'm a participant of GSSOC'21. Can you please assign me this issue.

Thank you. Waiting to hear from you.

Show "xyz" is typing !

When someone is typing then it should show that xyz person is typing. This "xyz" is the name which the user will enter in the prompt at the time of opening the website. Also suggest alignment to show this message. Discussion open for the issue.

Hey! I feel the header can be improved a bit by changing the alignment and the fonts.

I'm a GSSO'21 participant could you assign this to me.

Looking forward to your response. Thank you!

Create Firebase connection and login/signup feature.

1- Create a functional authentication feature.
2- Login screen will have 2 input fields namely email and password as
3- Sign up screen will have 3 fields email, password and image (for now)

(do not focus on css too much try to make functional)
Design the layout and update so that we can test with firebase connection.

I would like to work on this issue. Kindly assign this to me @DhairyaBahl

Hey! Currently we use a simple browser prompt to ask the user for their name. I would like to add a dialog box in place of the default prompt. I'll be using Material UI for this. Please let me know if I can work on this issue. I'm a GSSOC'21 participant.