Fullstack Chat Project

This project allows you to create a chat application with a full-stack setup for any combination of frontend and backend, smoothly connecting React, Vue, or Angular with your preferred backend. The real-time chat app is built using Node JS, React JS, and ChatEngine.io. It offers various features such as user authentication, socket connections, real-time messaging, image and file attachments, group chats, direct messages, read receipts, and more.

What We'll Build

FastAPI and ReactJS chat app with Chat Engine.

Step 1: Setting up a NodeJS server

Create a new project for the backend and frontend.

mkdir chat-app
cd chat-app
mkdir backend
cd backend

Initiate a new NodeJS project.

npm init # Hit enter for every step

Install dependencies.

npm i express cors axios
npm i --save-dev nodemon

Update package.json with start script.

"scripts": {
    "start": "nodemon index.js"
}

Create index.js with basic server setup.

// index.js
const express = require("express");
const cors = require("cors");

const app = express();
app.use(express.json());
app.use(cors({ origin: true }));

app.post("/authenticate", async (req, res) => {
  const { username } = req.body;
  return res.json({ username: username, secret: "sha256..." });
});

app.listen(3001);

Start the server.

npm run start

Step 2: Connecting Node JS to ChatEngine.io

Go to ChatEngine.io, sign up, and create a project. Note down the Project ID and Private Key.

Update the /authenticate function in index.js to connect to Chat Engine.

// index.js
const axios = require("axios");

app.post("/authenticate", async (req, res) => {
  const { username } = req.body;
  try {
    const r = await axios.put(
      "https://api.chatengine.io/users/",
      { username: username, secret: username, first_name: username },
      { headers: { "Private-Key": "XXXX" } }
    );
    return res.status(r.status).json(r.data);
  } catch (e) {
    return res.status(e.response.status).json(e.response.data);
  }
});

Step 3: Set up a React JS frontend

Create a React JS project using Vite.

npm create vite@latest

Update the frontend/src/main.jsx and frontend/src/App.jsx files.

Create AuthPage.jsx and ChatsPage.jsx files.

Run the React JS app.

npm install
npm run dev

Part 4: Connect React to Node JS and Chat Engine

Install axios in the frontend.

npm install axios

Update AuthPage.jsx to connect with the NodeJS server.

// AuthPage.jsx
import axios from "axios";

const AuthPage = (props) => {
  const onSubmit = (e) => {
    e.preventDefault();
    const { value } = e.target[0];
    axios
      .post("http://localhost:3001/authenticate", { username: value })
      .then((r) => props.onAuth({ ...r.data, secret: value }))
      .catch((e) => console.log("Auth Error", e));
  };

  // Rest of the code
};

export default AuthPage;

Install the react-chat-engine-pretty component.

npm install react-chat-engine-pretty

Update ChatsPage.jsx to connect your React App to your Chat Engine project.

// ChatsPage.jsx
import { PrettyChatWindow } from "react-chat-engine-pretty";

const ChatsPage = (props) => {
  return (
    <div className="background">
      <PrettyChatWindow
        projectId={import.meta.env.VITE_CHAT_ENGINE_PROJECT_ID}
        username={props.user.username}
        secret={props.user.secret}
      />
    </div>
  );
};

export default ChatsPage;

Add VITE_CHAT_ENGINE_PROJECT_ID to frontend/.env.local and use your own Project ID.

VITE_CHAT_ENGINE_PROJECT_ID=XXX