Chatbox – Localhost Real-Time Chat Application

A minimal real-time online chatbox built with Node.js and Socket.IO, intended for local use.
Users can connect in multiple browser tabs to exchange messages in real time via WebSockets.

Congrats! My website had successfully deployed on Koyeb(Which is a deploy platform have supported on WebSocket), and waiting to do more enhance on the function. You can access simply by clicking the link below. :)

Click here to get on Online Version: grateful-francene-maynoothuniversity-7d5783cc.koyeb.app/

Table of Contents

• Features
• Technologies
• Getting Started
  • Prerequisites
  • Installation & Running
• Project Structure
• Usage
• Configuration
• Future Enhancements
• License

Features

• Real-time bidirectional communication between server and clients
• Simple chat interface served via local HTTP server
• Easily testable by opening multiple tabs/windows locally
• Lightweight and minimal dependency footprint

Use Steps

_{1.Enter the website and you can find a place for entering your username.}

_{2.Enter your name and you can get connected into the chat room.}

Technologies

• Node.js – JavaScript runtime
• Express – web server
• Socket.IO – real-time WebSocket library
• React + Vite – frontend app
• Tailwind CSS + shadcn/ui – UI components and styling

Getting Started

Handshake Logic diagram

Prerequisites

You’ll need:

• Node.js (v14 or later, v20 as a stable version will be recommended)
• npm (Node Package Manager)

Installation & Running

1. Clone the repository:

   git clone https://github.com/Hajime-No-Ippo/-----Project-Realtime-ChatBox-----
   cd ./realtime-chatbox/
   

2.Install all dependencies

npm install

3. Install client dependencies

   npm --prefix client install

4. Running the code in your terminal (two terminals)

   npm run dev:server
   npm run dev:client

5. Open the app

   http://localhost:5173/

Production build

npm run build
npm start

Project-Structure

 ├── server.js          ← Express + Socket.IO server
 ├── client/            ← Vite + React frontend
 │   ├── src/
 │   ├── index.html
 │   └── vite.config.js
 └── package.json       ← server scripts