DEV Community

Mohamed Ibrahim
Mohamed Ibrahim

Posted on

💬 How to Build a Real-Time Chat App from Scratch with Node.js + Socket.IO

#webdev #programming #javascript #beginners

Have you ever wanted to build your own real-time chat app from scratch? In this post, I’ll show you how I built a simple and clean chat application using Node.js, Socket.IO, and a frontend built with HTML/CSS/JavaScript — no database required (at least for now 😉).

🔧 Technologies Used

  • Node.js + Express — backend server
  • Socket.IO — real-time communication (WebSockets)
  • HTML + CSS (Dark theme) — GitHub-like dark mode
  • Vanilla JavaScript — frontend logic

🖼️ App Preview

Users join a room by entering their name, and immediately join the live chat. Messages appear on the right for your own messages, and on the left for others. You’ll also see join/leave system notifications.

📦 Project Structure 

/public
  ├── index.html     # Join page (username input)
  ├── chat.html      # Main chat interface
  ├── styles.css     # Custom dark styling
  └── script.js      # Handles socket and UI logic

server.js            # Node.js server + Socket.IO logic
Enter fullscreen mode Exit fullscreen mode

🚀 How to Run Locally

  1. Clone the repository: 
git clone https://github.com/Mo-Ibra/simple-chat-app
cd your-repo-name
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies: 
npm install
Enter fullscreen mode Exit fullscreen mode
  1. Start the server: 
node server.js
Enter fullscreen mode Exit fullscreen mode
  1. Open in browser: 
http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

💡 Features

  • ✅ Real-time messaging between users
  • ✅ Notifications when users join/leave
  • ✅ Messages styled to indicate sender
  • ✅ Logout button that redirects to the join screen
  • ✅ No backend database needed for now (session-based)

🔒 No Database? No Problem

At this stage, all messages are held temporarily in memory and disappear on refresh. In the future, you can easily plug in MongoDB, PostgreSQL, or any database to persist data.

📁 Want the Code?

Here’s the GitHub repo:

🔗 Mo-Ibra/simple-chat-app

💬 Final Thoughts

This was a great exercise to understand WebSocket communication and Socket.IO in a very hands-on way. It’s perfect for beginners who want to get a feel for real-time apps.

Feel free to fork the project, add new features like emojis, typing indicators, private messaging, or even a database backend!

Thanks for reading! ❤️

If you found this useful, give it a ❤️ or leave a comment below.

Top comments (0)