ChatHub - Real-Time Chat Application 🌐💬

Welcome to ChatHub—a real-time, feature-rich chat application that makes staying connected easier and more interactive! Powered by Socket.io and React, this chat room app enables seamless communication with a smooth, user-friendly interface. Perfect for both casual and professional uses, ChatHub is designed to provide a dynamic messaging experience.

🚀 Features

• Real-Time Messaging: Instantly send and receive messages using WebSockets.
• Room-Based Chat: Join or create rooms for specific groups or topics.
• User Authentication: Enter a username to personalize your chat experience.
• Interactive UI: Modern, responsive interface built with Tailwind CSS and Lucide Icons.
• Message Notifications: Get alerts for important updates via toast notifications.
• Smooth Scroll: Scrolls automatically when new messages arrive, keeping recent chats visible.

🛠️ Tech Stack

• Frontend: React, Tailwind CSS
• Backend: Node.js, Express, Socket.io
• Notifications: react-toastify for alerting users
• Icons: Lucide-react for customizable icons

🚧 Future Enhancements

• Direct Messaging: Private, one-on-one conversations.
• Media Sharing: Send images, videos, and files.
• Read Receipts: See who has viewed your messages.
• User Presence: Know when users are online or typing.
• Admin Controls: Tools for room moderators.

Getting Started💥

Fork the repository

Frontend Installation

1. Clone the repository:

   Recording.2025-02-22.235245.mp4

      git clone https://github.com/<your-github-username>/ChatHub.git

2. Navigate to the client directory:

    cd ChatHub/client
   

3. Install dependencies:

    npm install
   

4. Set up environment variables: Create a .env file in the client directory and add if any.

5. Run the frontend application:

   npm run dev
   

6. You can view the website in localhost: http://localhost:5173

Recording.2025-02-22.234939.mp4

Backend Installation

1. Navigate to the server directory:

   cd ChatHub/server
   

2. Install dependencies:

   npm install
   

3. Set up environment variables: Create a .env file in the server directory and add if any.

4. Run the backend application:

   npm start
   

How to make a Pull Request?

1. Start by forking the ChatHub repository. Click on the symbol at the top right corner.

2. Clone your forked repository:

git clone https://github.com/<your-github-username>/ChatHub

3. Navigate to the new project directory:

cd ChatHub

4. Set upstream command:

git remote add upstream https://github.com/Prithwi32/ChatHub

5. Create a new branch:

git checkout -b YourBranchName

or

git branch YourBranchName
git switch YourBranchName

6. Sync your fork or local repository with the origin repository:

• In your forked repository click on Fetch upstream.
• Click Fetch and merge.

Alternatively, Git CLI way to Sync forked repository with origin repository:

git fetch upstream

git merge upstream/main

Github Docs for Syncing

7. Make your changes to the source code.

8. Stage your changes and commit:

⚠️ Make sure not to commit package.json or package-lock.json file

⚠️ Make sure not to run the commands git add . or git add *. Instead, stage your changes for each file/folder

git add file/folder

git commit -m "<your_commit_message>"

9. Push your local commits to the remote repository:

git push origin YourBranchName

10. Create a Pull Request!

Congratulations! You've made your first contribution! 🙌🏼

Project Admin⚡

Prithwi Hegde

Contributing is fun🧡

Show some ❤️  by giving to this repository.