Realtime Chat App with Node.js, React.js, and ChatEngine.io

Welcome to my Realtime Chat App project! In this application, we'll be building a feature-rich chat experience with user authentication, socket connections, real-time messaging, image and file attachments, group chats, direct messages (DMs), read receipts, and more. My tech stack includes Node.js, Express for the backend, React.js for the frontend, and ChatEngine.io for hosting chats and providing APIs and Socket channels.

Features

• User Authentication: Users can sign up, log in, and securely authenticate themselves.
• Real-time Messaging: Experience seamless real-time messaging with the power of ChatEngine.io.
• Image and File Attachments: Share images and files effortlessly within the chat.
• Group Chats and DMs: Engage in both group conversations and private one-on-one messaging.
• Read Receipts: Know when your messages have been read by others.

Tech Stack

• Backend:

  • Node.js
  • Express

• Frontend:

  • React.js
  • ChatEngine.io NPM components for building the chat UI

Getting Started

Follow these steps to set up and run the application on your local machine.

Backend Setup

1. Clone the repository:

   git clone https://github.com/your-username/realtime-chat-app.git
   

2. Navigate to the backend directory:

   cd backend
   
   

3. Install dependencies:

   npm install
   
   

4. Configure ChatEngine.io credentials in the .env file.

5. Run the backend server:

   npm start
   
   

Frontend Setup

1. Open a new terminal and navigate to the frontend directory:

   cd frontend
   
   

2. Install dependencies:

   npm install
   
   

3. Start the React development server:

   npm start
   
   

4. Open your browser and go to http://localhost:3000 to access the application.