Readme Update

This commit is contained in:
apiboomer
2025-08-27 03:17:49 +03:00
parent 4bd3c48010
commit c9237bb5e5
2 changed files with 132 additions and 36 deletions

2
.env
View File

@@ -1 +1 @@
PORT=7010
PORT=3000

166
README.md
View File

@@ -1,58 +1,154 @@
# Realtime Chat App with Node.js and WebSockets
# Modern Chat App
## Overview
A real-time chat application built with Node.js, Express, and Socket.IO. Experience seamless communication with a modern, responsive interface.
This Realtime Chat App is a simple yet powerful application built with Node.js and WebSockets, allowing users to join different chat rooms and communicate with each other in real-time.
## ✨ Features
## Features
- **Real-time Messaging**: Instant message delivery using WebSocket technology
- **Multi-room Support**: Join different chat rooms for organized conversations
- **Modern UI**: Clean, responsive design with smooth animations
- **User Management**: See who's online in your current room
- **Connection Status**: Real-time connection indicator
- **Keyboard Shortcuts**: Quick actions for better user experience
- **Mobile Responsive**: Works perfectly on all devices
- **Real-time Communication:** Utilizes WebSockets to enable instant messaging between users.
- **Multiple Rooms:** Users can join different chat rooms.
- **User-friendly Interface:** Provides an intuitive and clean user interface for an enjoyable chat experience.
## 🚀 Tech Stack
## Prerequisites
- **Backend**: Node.js, Express.js
- **Real-time Communication**: Socket.IO
- **Frontend**: Vanilla JavaScript, HTML5, CSS3
- **Styling**: Modern CSS with CSS Variables and Flexbox
- **Icons**: Font Awesome
- **Fonts**: Inter (Google Fonts)
Before running the application, make sure you have the following installed:
## 📋 Prerequisites
- Node.js: [Download and install Node.js](https://nodejs.org/)
Before running this application, make sure you have the following installed:
## Getting Started
- [Node.js](https://nodejs.org/) (version 14 or higher)
- npm (comes with Node.js)
1. Clone the repository:
## 🛠️ Installation
1. **Clone the repository**
```bash
git clone https://github.com/your-username/realtime-chat-app.git
git clone https://github.com/your-username/modern-chat-app.git
cd modern-chat-app
```
2. Navigate to the project directory:
2. **Install dependencies**
```bash
npm install
```
3. **Start the server**
```bash
# Development mode (with auto-restart)
npm run dev
# Production mode
npm start
```
4. **Open your browser**
Navigate to `http://localhost:3000`
## 🎯 Usage
1. **Join a Chat Room**
- Enter your username
- Choose a room name
- Click "Join Chat"
2. **Start Chatting**
- Type your message in the input field
- Press Enter or click the send button
- Use Ctrl/Cmd + Enter for quick sending
3. **Room Features**
- See active users in the sidebar
- Real-time connection status
- Automatic message scrolling
## 🎨 Features in Detail
### Real-time Communication
- Instant message delivery
- Live user presence
- Connection status monitoring
- Automatic reconnection
### Modern Interface
- Gradient backgrounds
- Smooth animations
- Responsive design
- Clean typography
- Intuitive navigation
### User Experience
- Welcome messages
- Loading states
- Error notifications
- Keyboard shortcuts
- Auto-scroll to new messages
## 📁 Project Structure
```
modern-chat-app/
├── src/
│ ├── index.js # Main server file
│ └── utils/
│ ├── messages.js # Message utilities
│ └── user.js # User management
├── public/
│ ├── index.html # Join page
│ ├── chat.html # Chat interface
│ ├── css/
│ │ └── styles.css # Modern styling
│ └── js/
│ └── chat.js # Frontend logic
├── package.json
└── README.md
```
## 🔧 Configuration
The application uses environment variables for configuration:
```bash
cd realtime-nodejs-chat-app
# .env file (optional)
PORT=3000
HOST=0.0.0.0
```
3. Install dependencies:
## 🚀 Deployment
### Local Development
```bash
npm install
npm run dev
```
4. Start the server:
```bash
nodemon src/index.js or node src/index.js
```
5. Open your web browser and go to http://localhost:3000 to access the Realtime Chat App.
## Usage
1. Enter a username.
2. Choose a chat room to join.
3. Start chatting with other users in real-time.
## 🤝 Contributing
## File Structure
- **src/index.js**: The main server file that handles WebSocket connections and serves the HTML page.
- **public/index.html**: The HTML template for the chat application.
- **public/style.css**: The stylesheet for styling the chat application.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## Dependencies
- `express`: Web framework for Node.js.
- `socket.io`: WebSocket library for Node.js.
## Contributing
Feel free to contribute to the development of this Realtime Chat App by creating issues or submitting pull requests. Your feedback and contributions are highly appreciated!
## 🙏 Acknowledgments
- [Socket.IO](https://socket.io/) for real-time communication
- [Express.js](https://expressjs.com/) for the web framework
- [Font Awesome](https://fontawesome.com/) for icons
- [Inter Font](https://rsms.me/inter/) for typography
## 📞 Support
If you have any questions or need help, please open an issue on GitHub.
---
**Built with ❤️ using Node.js and Socket.IO**