/ChatBox

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

Primary LanguageJavaScript

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)

Features and Interfaces

  1. Home Page

    HomePage

    Services



  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

      Authentication



  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.

      Chats



  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.

    Messages



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.

    Group



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.

    Group



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.

    Group



Demo

Group

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:

  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

Need help?

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

Twitter