The chat app allows users to connect with each other and chat in real-time. There are two main features of the app:
Random chat - Users can connect to a random user and chat with them. Chat rooms - Users can create or join chat rooms with a unique room ID and chat with other users who are also in the same room. Backend The backend of the chat app is built using Node.js, Express, and Socket.IO. Socket.IO is a library that enables real-time, bidirectional and event-based communication between the browser and the server.
To install the backend dependencies, run the following command:
npm install express socket.io
The backend server can be configured in the server.js file. Here are the main configurations:
Socket.IO enables real-time communication between the browser and the server using events. The following events are used in the chat app:
connection: Triggered when a user connects to the server. disconnect: Triggered when a user disconnects from the server. join-room: Triggered when a user joins a chat room. leave-room: Triggered when a user leaves a chat room. message: Triggered when a user sends a message in a chat room.
The frontend of the chat app is built using React and Next.js. The app is designed to be responsive and work on both desktop and mobile devices.
To install the frontend dependencies, run the following command:
npm install react next react-dom socket.io-client
The app has the following pages:
index.js: The landing page of the app. Allows users to choose between random chat or chat rooms. random.js: The page for one-on-one random chat. [id]/index.js: The page for creating or joining chat rooms.
The app has several reusable components that are used across the pages:
Header: The header of the app, which contains the logo and navigation links. UserList: A list of users in a chat room. ChatBox: The box where messages are displayed and new messages are typed.
The Socket.IO client is used to connect to the backend server and listen for events. The following events are used in the chat app:
connect: Triggered when the client connects to the server. disconnect: Triggered when the client disconnects from the server. join-room: Triggered when the client joins a chat room. leave-room: Triggered when the client leaves a chat room. message: Triggered when a message is received in