Abhigna-arsam/ChatBox

Experience the official messaging app's seamless real-time communication

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 Comming 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: https://github.com/SamarthKadam/ChatBox

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

Useful Links

• Project Demo

Need help?

Feel free to contact me on Twitter or LinkedIn, know more about me at samarthkadam.vercel.app