opencodeiiita/geek-chat

GeekChat

What is GeekChat?

GeekChat is a simple bi-directional communication app where users can join rooms and have live text messaging with other users present in the room. It works on the functionalities of Web Sockets and simple HTTPS requests.Visit here

And don't forget to star ⭐ the repo, it helps ^^.

Tech Stack

• Nodejs
• Express
• Socket.io
• HTML
• CSS(SCSS)
• Javascript

Local Setup

Pre-Requisites

• Git
• Node.js
• SCSS Live Compiler(Only if you are changing the styling of the website)

How to Setup?

• Fork the repo.
• Clone it to your local setup by using the command git clone <repo link>
• Run the following command in the root directory of the project npm install
• After the process is completed run the command node app.js
• The website will be live on localhost:3000

Brief Project Structure

/
|-- public/			
    |-- css/           #Contains the scss styling files
    |-- images/        #Contains images used in the project
    |-- js/            #Contains client side js files
    |-- index.html     #First webpage of the project
    |-- main.html      #Main chatting page of the website
|    
|-- utils/
    |-- message.js     #Contains all functions and variables concerning Chat Messages.
    |-- users.js       #Contains all functions and variables concerning Users
|    
|-- app.js             #Main Server file that setups and runs the node server.

Guidelines

Please help us follow the best practice to make it easy for the reviewer as well as the contributor. We want to focus on the code quality more than on managing pull request ethics.

• Single commit per pull request and name the commit as something meaningful, example: Adding <-your-name-> in students/mentors section.

• Reference the issue numbers in the commit message if it resolves an open issue.Follow the PR template strictly.

• In case you want to change the styling of the website do not change the .css files instead change the .scss files and then compile them.More details

• Do not use unneccesary variables or functions and follow a easy and understandable code structure with proper comments.

• Provide the link to live heroku pages from your forked repository or relevant screenshot for easier review.

• Pull Request older than 3 days with no response from the contributor shall be marked closed.

• Do not make PR which is not related to any issues. You can create an issue and solve it once we approve them.

• Avoid duplicate PRs, if need be comment on the older PR with the PR number of the follow-up (new PR) and close the obsolete PR yourself.

• Be polite: Be polite to other community members.

Communicate

Whether you are working on a new feature or facing a doubt please feel free to ask us on our discord channel. We will be happy to help you out.

geek-chat's Issues

Add a sound effect on messages send and recieved.

Add suitable and subtle sound effects to both messages send and received. Also, make sure the user is able to differentiate between both the sounds i.e. of send a message and received message.

Add auto scroll feature.

Currently, the Chatting page cannot scroll to the bottom automatically when new messages are added. You need to implement this feature.FYI: It can be done with just one line of code!

Add a dark mode feature.

Implement a dark and light theme feature. The dark mode should look good, not just the inversion of colours, also store the mode preference in the local storage also.

Style the messages send and received differently

Currently all the messages are styled in the same way. I want you to differentiate the styling between the messages send and those received by the User. Make the styling for both light and dark mode. End result should be like this

.

Custom scroll bar for the Messages panel and for the Users panel.

Design a custom scroll bar that fits the current UI of the chat app, make the scroll bar for both, dark and light themes. You have to design the scroll bar for the Messages panel as well as the Users panel.

Apply MVC architectural pattern

Apply the standard MVC pattern and differentiate the app.js code into its separate files.

Show typing status of Users.

In this Issue, you have to find a way so that if a user is typing a message, then it shows that XYZ is typing ... with slight animation of three dots. Also if more than one user is typing a message it should show User1, User2 are typing ...
For more than 3 Users it should show Many people are typing ... just like in discord. Implement this feature with a nice UI and understandable code.

Styling of the front page button.

Style the front page button Submit to match the theme of the WebPage!

Fix captcha not loading Issue

In the Heroku deployment sometimes the Recaptcha is not loading. This happens when an HTTPS connection is made. check the console logs for more details on this.

Make front page responsive

Currently, the page is overflowing in mobile view. FIx the webpage so that it can be responsive!

Change formatting text messages

Currently Users can send HTML tags as text messages and they are rendered in that way.I want you to change that to allow markdown formatting in the messages and not HTML text formatting.Send a live heroku deployment link when you add your PR for the Issue

Show every User's name with a different colour.

Show every Users name in the chat with a different random color.

Setup project and add yourself in contributors.md

Setup the project and attach a screenshot of the chatting page in the PR. Also, add yourself to the CONTRIBUTORS.md file !
P.S. No need to claim the issue just create a PR for this and it will be merged!

Add reply to message feature

Add a feature where users can reply or quote other User's messages. You can take examples of UI implementation from Whatsapp or Discord. Add this feature with a fitting UI improvement also.Also, keep in mind to use an effective coding algorithm in this make sure the UI is good too.

Add delete message feature

Allow Users to Delete messages sent by them, these messages will be deleted across all Users present in the room. You have to think of a nice UI to implement this feature in the current UI.

Remove extra padding in chat container

There is a lot of extra padding int the chat container of the main page. Fix that.

Fix background loading in front page.

If you load the webpage then the background images take a few seconds to load, and that too linearly. Fix the issue.

Implement feature for avatars.

Things to do in this Issue-

• Implement a choose avatar screen on the front page.
• In the User section of the chat page show the avatar along with the Username.
• In the chatting section display the avatar with every message of the User.
• The UI should be clean and perfect, which should match the current UI of the app.
• Crop the avatars from the below image.
  

Add a captcha verification at the starting page.

To prevent bots from phishing (As we saw on discord 😆 ). Add a Recaptcha feature that filters all the bots at the starting page.

Format chat messages options

Currently, as we hover over the message it shows three options reply, edit and delete, this has made the message very crowded and makes the UI very difficult. Fix this by adding three dots on which you can hover to find all the three options in a nice manner. Be sure to match the current app UI

Refactoring the code

In this Issue, you are required to-

• Remove all the console.log
• Remove unnecessary comments
• Give all the code proper structuring and add a format script to format all the javascript in the code using prettier.
• Add comments wherever necessary.

Style GeekChat bot messages differently

Currently the messages send by the Geek-Chat bot are styled in the same way as all the other messages.Implement a way to style it differently and in a better UI.
This Issue will be assigned to the first 3 people to claim it.You all will be required to submit your PRs before 10 October 10:00pm.The PR with the best styling will only be merged and given points, rest will be rejected.

Add Active Users and room name in mobile view.

Find a UI implementation to add Active Users in room name in mobile view of the application. Currently in mobile view the div for that becomes hidden, fix that.

Allow Users to attach photos in the chat.

In this feature, you have to implement a way to allow users to send photos in the chat.
Hint: user the markdown feature to figure out how it can be done!

Show name of user when on entering the room

As of now it shows that A User has entered the chat Change it to show the name of the user.

Test

test

Fix delete button position in send messages

There is a bug in the chat app where when you hover over a message to delete it, the button comes out of the box. Fix that.Also, provide a live Heroku link for the PR.

Remove blank message bug.

Currently, on adding a space or few spaces, we are able to send the messages. This creates a blank message in the room. Fix that.

Fix theme transition

The transition on the first page is not consistent, the background changes faster than the text and thus the transitions look weird. Also when changing front dark to light mode the background changes abruptly without any effect. Fix that.

Continuous messages causing overflow in x axis.

Save User data in local storage.

Implement local storage and show the last joined room on the front page dropdown list. Also, auto-fill the last used username on the front page form.

Change the message sending div.

Currently, the message sending input box and the send button is square-shaped and of an old theme. I want you to turn it more trendy. Turn the send button into a Floating Action Button with an arrow symbol and make the input element rounder.Use the Material UI FAB buttons only.Also make sure you implement the colours for dark mode also.

Correct time on heroku deployment

Don't comment

Show online Users at the front page

Show the number of online users in a room at the front page in front of the respective room name in the drop-down menu.Also don't forget to share a live heroku link when you create the PR.

Suggest new Issues here.

Suggest some bugs or new features that can be added here!

Truncate long messages to 50 letters or less.

Truncate long messages to 50 letter or less and add a Read more with the message on which the User can click and read the full message easily.

Report bugs here!

Report some bugs here and get a chance to work on them!

Add suitable animations for messages received and sent.

Add suitable animations for both messages send and messages received. The animations should look good and match the UI of a chat app. Also, animate the GeekChat bot messages differently.

Add Edit Message Feature

Allow users to edit the messages sent by them, also, update the time of the message with the update time and add a small (edited) text along with the message. Implement this feature keeping in mind the current UI of the webApp.

Filter offensive words out.

Filter out offensive or abusive words out of the chat message.

Improve front page layout

Improve the Frontpage layout. Make the front page layout better and more styled. If the work done is good Points can be increased too.

Improve dark to light theme toggle button

Use a better and good-looking button with animations for the toggling of the theme, in place of the simple toggle theme button.

Allow Users to create new rooms.

In the Issue, you have to allow Users to create new rooms. These rooms will be temporary and will remain active on the website until there is no one in the room.

Implement rooms feature.

Currently, different rooms functionality is not present in the chat app. The final result should be that one person that enters the room can talk and chat with only those people that are present in the same room, also display the room name in the Room Name section of the main page. Implement that feature with proper code structuring.

Allow Users to add custom avatars.

Allow Users to add custom avatars to the already provided set of avatars, these can be any png, jpg, jpeg images that can be set by the User as custom avatars.

Add transition in light to dark mode and vice versa

Currently when user goes from light to dark mode the transition is abrupt. Implement a gradual transition in all the elements of the webApp.

Fix alignment of Input box and Username in front page.

Fix the alignment of the four components on the front page, namely the input boxes and the choose room box. They are not imperfect alignment to each other, fix that. And also add some padding to them

Show online users in a specific room.

Currently the left side panel has only some placeholder text and doesn't show the active users in the room. Implement the feature, also create a live heroku link when you add your PR.

Redesign the complete UI of the GeekChat app

In this Issue, you have to redesign the complete UI of the GeekChat app, this includes both the front page and the main page. You have to redesign it using Figma. Check the Design folder for the tempate.json file.

You have to follow the template and create a file named <GITHUB_USERNAME>.json. In the PR that you will create, include screenshots of the redesign also.

• Designs need to be minimal and intuitive.
• You have to make designs for both dark and light mode.
• Only the top 3 designs will be merged.
• The deadline to submit your PR is 16th Oct.
• This is a open for all issue so no need to claim it.
  All the best!

Correct time on heroku deployment

As of now the time showing in the Heroku deployment of the web App is wrong. Fix that issue. Provide a live Heroku link with the PR.