ChatBox-Web App🌟

Welcome to Chatbox, your go-to platform for effortless and engaging conversations. Connect with friends, family, and new acquaintances in real-time with our user-friendly interface.Share messages in a secure and vibrant environment.Chatbox fosters seamless communication with its intuitive design and robust features. Stay connected, express yourself, and build meaningful connections with ease.(Desktop Application Coming Soon)

• Demo

• About Project

• Features and Interfaces

  • Home
  • Login and Authentication
  • Chats
  • Messages
  • Groups
  • Search
  • Settings

• Tech Stack

  • Front-end
  • Backend
  • Other Tools

• Getting Started Instructions

• Links

• Contact

Features and Interfaces

1. Home Page

   • Landing Page which lists all the features of the app
     
     
   
   
   
   
   

2. Login/Signup Page (Authentication)

   • Fast and secure authentication
   • JWT tokens used to persist the authentication state
   • Enable swift and secure access with Google Sign-In/Login, seamlessly authenticating users using their Google credentials
     
     

   
   
   

3. Chats

   • Conversation History: View a comprehensive list of all your past chats, including details about whom you've chatted with and the timestamps of each conversation.

   • One-Click Conversations: Initiate conversations effortlessly by simply clicking on any chat thread from the list, allowing instant connection and seamless interaction.
     
     

   
   
   

4. Messages

   • Effortless Chatting: Easily communicate with others through Socket.IO's seamless functionality.

   • Voice-Based Input: Enjoy hassle-free messaging with voice-based text input capabilities.

   • Typing Indicator: Stay informed with a typing indicator that signals whether the other person is currently typing.

   

5. Groups

• Group Creation: Effortlessly create group chats with the people you need.

• Admin Control: Admin privileges allow for group updates, including changing the group's name or managing user additions and deletions.
  
  

6. Search

• Robust Search Functionality: Powerful search feature to easily find people within the application.

• Selection Capability: Select individuals from the search results to initiate conversations seamlessly.

  

7. Settings

• Credential Updates: Easily modify your credentials such as email, name like information.

• Profile Picture Upload: Upload your profile picture to personalize your account within the application.

  

Demo

The illustration above showcases a conversation between two separate tabs opened in Chrome, simulating two seperate accounts chatting with each other. It demonstrates the transmission of messages along with the typing effect."

Tech stack

Frontend

• ReactJS
• Javascript
• Redux
• MaterialUI
• TailwindCSS

Backend

• Nodejs
• Express
• MongoDB

Other Tools

• Socket IO
• NPM Packages

Instructions

1. Clone the project:

   • Firstly, clone the project using the command:

   git clone https://github.com/SamarthKadam/ChatBox.git
   

2. Install Packages:

 - Install the required packages by navigating to the backend directory: cd backend and then run npm install.
 - Similarly, move to the frontend directory: cd frontend and execute npm install.

3. To set up the frontend

 - Create a `.env` file in the frontend directory.

 - Add the following values to the `.env` file:
   REACT_APP_API_URL=http://127.0.0.1:4000
   REACT_APP_SOCKET_URL=http://127.0.0.1:4000

4. For configuring the backend:

 - Establish your applications connection with MongoDB using following environment variables as key with your own values.
 - Create a `config.env` file in the backend directory.
 - Set the following environment variables in the `config.env` file:

 DBPASSWORD=<-yourmongodbpassword->
 DB=<-yourmongodbconnectionuri->
 PORT=4000
 DOMAIN=127.0.0.1
 JWTEXPIRES=90d
 JWTSECRET=<-giveanysecretkey->
 JWT_COOKIE_EXPIRES=90

5. Start Backend Server:

- Start the backend server using the command: cd backend and then npm start.

6. Start Frontend:

- Finally, initiate the frontend with the command: cd frontend and then npm start.

7. Open `http://localhost:3000` with your browser to see the app


## Quick-Setup
If you want to eliminate the backend setup then head to .env file in frontend. Replace your values with this

REACT_APP_API_URL=https://chatbox-api-bj21.onrender.com REACT_APP_SOCKET_URL=https://chatbox-api-bj21.onrender.com

<a id="links"> </a>

## Useful Links

- [Project Demo](https://chat-box-samarthkadam.vercel.app/)

<a id="contact"> </a>

## Need help?

Feel free to contact me on [Twitter](https://twitter.com/Samarth69908166) or [LinkedIn](https://www.linkedin.com/in/samarth-kadam-119a25209/), know more about me at [samarthkadam.vercel.app](https://samarthkadam.vercel.app/)


[![Twitter](https://img.shields.io/badge/Twitter-follow-blue.svg?logo=twitter&logoColor=white)](https://twitter.com/Samarth69908166)