Create a live chat application using NodeJS, ReactJS, and ChatEngine.io

In this tutorial, we'll be creating a comprehensive, full-stack, live chat application using Node JS, React JS, and ChatEngine.io.

This application will boast a variety of features including: user authentication, socket connections for instant communication, real-time messaging, the ability to attach images and files, the creation of group chats and direct messages, read receipts, and much more!

prefer watching click here.

1. SETTING UP BACKEND

To create the backend you need to first create the folder to use them in the folder create a backend folder to separate our frontend and backend.

• Create Overrall folder

• Create backend folder

• Create the backend

• Install all required Packages

1. cors

• Purpose: CORS stands for Cross-Origin Resource Sharing. It's a security feature enforced by web browsers to prevent malicious websites from accessing resources and data from another domain without permission. When building a web application, we often have our frontend (ReactJS in this case) running on one domain (e.g., localhost:3000) and our backend (NodeJS/Express) on another (e.g., localhost:5000). To allow these two to communicate freely in development (and production with proper configuration), we need to enable CORS.

2. axios

• Purpose: Axios is a promise-based HTTP client for making requests to external APIs from both the browser and Node.js. It simplifies sending asynchronous HTTP requests to REST endpoints and performing CRUD operations.

3. dotenv

• Purpose: Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology. It's useful for hiding sensitive information such as API keys, database passwords, and other credentials.

4. express

• Purpose: Express is a minimal and flexible Node.js web application framework that provides a robust set of features to develop web and mobile applications. It facilitates the rapid development of Node-based web applications and APIs.

• Finally you need nodemon for development

The command npm install --save-dev nodemon is used to install nodemon as a development dependency in your Node.js project. Let's break down what nodemon is and why it's useful, especially for beginners working on Node.js applications.

What is nodemon?

nodemon is a utility that monitors for any changes in your source code files in a Node.js application and automatically restarts the server. This tool is incredibly useful during development because it saves you from the manual task of stopping and restarting your Node.js server every time you make a change to your code.

Why use nodemon?

When you're developing an application, you often make frequent changes to the code. Without nodemon, you'd need to manually stop your Node.js server (usually with Ctrl+C in the terminal) and start it again for every change you want to test. This process is time-consuming and can disrupt your development flow. nodemon automates this process, improving your productivity and focus.

How does --save-dev fit in?

The --save-dev flag adds nodemon to your project's package.json file under devDependencies. This distinction is important because it indicates that nodemon is only needed for development purposes, not when your application is running in production. Separating development dependencies from production dependencies helps keep your production environment optimized and clean from unnecessary packages.

To use nodemon make sure to make this changeto your package.json

• Connect your nodejs app to chatengine
  If you don’t have an account visit this link https://chatengine.io/

• Create an account then create a project to get the keys

• Grab the private key and place it in the .env file
  

Start the backend

2. CREATE FRONTEND

We will create the frontend using vite.

Once you have the frontend you will need the following packages

From here we go ahead and create our frontend files and clean up the default vite

Main.jsx

Customize your app.jsx

This code is a simple React component named App that manages user authentication and displays different pages based on whether a user is logged in or not. Here’s a breakdown:

1. Import Statements:

   • import { useState } from "react";: This imports the useState hook from React, which allows you to keep state in your function components.

   • import "./App.css";: This imports CSS styles specific to this component.

   • import AuthPage from "./AuthPage"; and import ChatsPage from "./ChatsPage";: These import two components, AuthPage for authentication and ChatsPage for displaying chat messages.

2. Function Component App:

   • Inside the App component, useState(undefined) initializes a state variable named user with a default value of undefined. This means initially, there is no user logged in.

   • The App component checks if the user variable is set (if (!user)). If user is not set (meaning no user is logged in), it returns the AuthPage component. This component is responsible for handling user authentication. The AuthPage takes a prop onAuth, which is a function that updates the user state with the logged-in user's information.

   • If there is a user (after successful authentication), the App component returns the ChatsPage component, passing the user information as a prop. This page is where the authenticated user can see and interact with chat messages.

3. Conditional Rendering:

   • This code demonstrates a basic but powerful React pattern for conditional rendering based on the application's state. It switches between showing an authentication page and a chat page based on whether the user is logged in.

4. Exporting App:

   • export default App; makes the App component available for use in other parts of the application, like rendering it in the DOM.

In simple terms, this App component shows a login page if the user isn't logged in. Once the user logs in, it switches to show a page where the user can see and send chat messages.

AUTH PAGE

CHAT PAGE

In concluding our guide on creating a real-time chat app, we hope you've found the process both educational and rewarding. This project not only bolsters your portfolio but also deepens your understanding of ReactJS, NodeJS, and ChatEngine.io.

As you continue to explore and enhance your chat application, remember that each step forward is a valuable learning experience. We look forward to seeing how you apply these skills in future projects and encourage you to share your journey with our community. Keep experimenting, learning, and growing. Happy coding until our next adventure!