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.
FastAPI and ReactJS chat app with Chat Engine.
mkdir chat-app
cd chat-app
mkdir backend
cd backend
npm init # Hit enter for every step
npm i express cors axios
npm i --save-dev nodemon
"scripts": {
"start": "nodemon index.js"
}
// 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);
npm run start
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);
}
});
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
npm install axios
// 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;
npm install react-chat-engine-pretty
// 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;
VITE_CHAT_ENGINE_PROJECT_ID=XXX