Tired of boring APIs and static frontends? Let’s build something that talks back — instantly.

In this tutorial, you’ll create a sleek real-time chat application using:

• ⚙️ Node.js + Express (server)

• 📡 Socket.IO (real-time communication)

• ⚛️ React (client UI)

By the end, you’ll have a fully functional chat app where users can join, send messages, and see them pop up live.

🛠️ 1. Set Up the Backend (Node.js + Socket.IO)

Install dependencies:

mkdir chat-app-server && cd chat-app-server
npm init -y
npm install express socket.io

Create index.js:

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server, {
  cors: { origin: '*' }
});

io.on('connection', (socket) => {
  console.log('🟢 New user connected:', socket.id);

  socket.on('chat message', (msg) => {
    io.emit('chat message', msg); // broadcast
  });

  socket.on('disconnect', () => {
    console.log('🔴 User disconnected:', socket.id);
  });
});

server.listen(3001, () => {
  console.log('🚀 Server listening on http://localhost:3001');
});

🎨 2. Build the Frontend (React + Socket.IO-client)

Create the React app:

npx create-react-app chat-app-client
cd chat-app-client
npm install socket.io-client

Modify App.js:

import React, { useEffect, useState } from 'react';
import { io } from 'socket.io-client';

const socket = io('http://localhost:3001');

function App() {
  const [message, setMessage] = useState('');
  const [chat, setChat] = useState([]);

  useEffect(() => {
    socket.on('chat message', (msg) => {
      setChat((prev) => [...prev, msg]);
    });

    return () => socket.off('chat message');
  }, []);

  const sendMessage = (e) => {
    e.preventDefault();
    if (message.trim()) {
      socket.emit('chat message', message);
      setMessage('');
    }
  };

  return (
    <div >={{ padding: 20 }}>
      <h2>💬 Real-Time Chat</h2>
      <form onSubmit={sendMessage}>
        <input 
          value={message} 
          onChange={(e) => setMessage(e.target.value)} 
          placeholder="Type your message..." 
        />
        <button type="submit">Send</button>
      </form>
      <ul>
        {chat.map((msg, i) => <li key={i}>{msg}</li>)}
      </ul>
    </div>
  );
}

export default App;

🚀 3. Test It

1. Run the backend:

   node index.js
   

2. Start the React frontend:

   npm start

3. Open the app in two browser tabs and start chatting 🎉

🧠 What You Learned

• Setting up a real-time server with Socket.IO

• Connecting React to a WebSocket server

• Managing real-time messages with React state

Want to level it up? Add usernames, chat rooms, or persistent message history with MongoDB.