Chatroom

Welcome to Chatroom! This is a simple web application that allows users to chat in real-time. Below are instructions on how to execute and use this application.

How to Execute

To run this application locally, follow these steps:

1. Clone this repository / Download all source code files to your local machine.
2. Navigate to the project directory in your terminal.
3. Run npm install to install all dependencies.
4. Run npm start to start the development server.
5. Open http://localhost:3000 in your web browser to view the application.

Introduction

Chatroom is a real-time chat application where users can create chat rooms, join existing rooms, and chat with other users in the room. It provides a simple and intuitive interface for seamless communication.

How to use

• Login Page

Users can choose to login, sign up, or login with Google by clicking the respective buttons on the page.

• ChatRoom Page Here's the chatroom page, there is a default public room which is available for all users. The chatroom page displays all available chat rooms. Users can click on a room in the navbar to join the conversation.

Create Chat Room

Users can create private chat rooms and invite friends to join by clicking the "Create Chat Room" button on the navbar.

After typing the name of the room, the chat room will be created successfully.

Change User Photo

Users can change their profile photo by clicking the default user photo on the navbar and selecting a new photo from their device.

Notification

By clicking the bell icon besides the user profile, it will enable the notification. Once granted, users will receive notification when someone text them.

Send Message & Delete Message

Users can send messages by typing in the input bar and clicking the send button or pressing Enter on the keyboard.

Users can delete a message by clicking the trashcan icon next to the message.

Send Photo

Users can send photos in the chatroom by clicking the picture button.

Add people

Users can add others to the chat room by clicking the "Add People" button on the navbar and entering their email.

Technologies Used

• React: Frontend framework for building the user interface.
• Firebase: Backend service for real-time database, user authentication, and file storage.
• Tailwind CSS

Page link

https://chatroom-39552.web.app/