toth2000/chatbit

A real-time chat room application built using ReactJs, NodeJs and ExpressJs

Hello, I'm Tothagata Bhattacharjee 👨‍💻

Full Stack Developer

---

👨‍💼 About Me

• Working : Web Development 💻 | Android App Development 📱| Full stack Development
• Education : Completed B.Tech (Bachelor of Technology) in Computer Science and Engineering (2019-2023)
• Hobbies : Gaming 🎮 | Movies 🎥 | TV shows 📺
• Pronouns : He/Him/His 😇

---

My skills include

📊 Profile stats

---

chatbit's Issues

Create CSS for Input Component

Create CSS for Input Component.

Src/components/Input/Input.css

The Input component has an input field that takes the message text as input and a button for sending the message.
The Input.css should apply to this component only.

Responsive CSS update

Is your feature request related to a problem? Please describe.
Currently, the website is not responsive and does not work well on mobile devices.

Describe the solution you'd like
Update the CSS to make it look good on mobile devices.

Create CSS for Messages Component.

Create CSS for Messages Component.

src/components/Messages/Messages.css

Change Page Title

Describe the bug
Currently, the Page Title is React App (the default). Change it our project name, i.e ChatBit

Steps to fix the issue:

1. Open public/index.html
2. Change <title>React App</title> to <title>ChatBit</title>

Wrong url redirect

On clicking the close image on '/chat' route it redirects to https://toth2000.github.io/ instead of https://toth2000.github.io/chatBit/

Add close button image to InfoBar

Describe the bug
The info bar is missing a close button image, add the image and fix the bug.

Add image to file:
src/components/InfoBar/InfoBar.jsx

if CSS modification is required then add CSS to file
src/components/InfoBar/InfoBar.css

To Reproduce
Steps to reproduce the behavior:

1. Go to repo URL
2. Join a room
3. See at Top close button image is missing
4. See error

Expected behavior
Should display an image with cross

Import CSS

CSS should be referenced
Currently there is no import reference for CSS classes for each component.

Add Import CSS for:

• Messages
• Message
• Input

Changes:

In their related directories / files, e.g: components/{component}/{component}.jsx
add import './{component}.css'

Design a Logo

Design a Logo for the App and:

• Update the Favicon
• InfoBar Component (Logo Img)

Chatroom freeze due to same username of users.

Describe the bug
Chatroom freezes when a user with the same username joins

To Reproduce
Steps to reproduce the behavior:

1. Go to Repo URL
2. Join the same room twice with the same username
3. See the error

Expected behavior
Show the 2nd user an error message that the username is already taken.

Create CSS for Message Component.

Create CSS for Message Component.

Src/components/Message/Message.css

The Message component holds the message text and sender name.
The Message.css should apply to this component only.

Re-design Homepage

Is your feature request related to a problem? Please describe.
Redesign the look of the homepage.

Create CSS for Chat Component

Describe the solution you'd like
Create CSS for Chat Component.
Src/components/Chat/Chat.css

The Chat component contains three other components i.e InfoBar, Messages, and Input Component.
The Chat.css should apply to the Chat Component only. It can deal with the positioning of child components as each other component have their own CSS.