Modern Chat App
A real-time chat application built with Node.js, Express, and Socket.IO. Experience seamless communication with a modern, responsive interface.
✨ 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
🚀 Tech Stack
- 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)
📋 Prerequisites
Before running this application, make sure you have the following installed:
- Node.js (version 14 or higher)
- npm (comes with Node.js)
🛠️ Installation
-
Clone the repository
git clone https://github.com/your-username/modern-chat-app.git cd modern-chat-app -
Install dependencies
npm install -
Start the server
# Development mode (with auto-restart) npm run dev # Production mode npm start -
Open your browser Navigate to
http://localhost:3000
🎯 Usage
-
Join a Chat Room
- Enter your username
- Choose a room name
- Click "Join Chat"
-
Start Chatting
- Type your message in the input field
- Press Enter or click the send button
- Use Ctrl/Cmd + Enter for quick sending
-
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:
# .env file (optional)
PORT=3000
HOST=0.0.0.0
🚀 Deployment
Local Development
npm run dev
🤝 Contributing
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
🙏 Acknowledgments
- Socket.IO for real-time communication
- Express.js for the web framework
- Font Awesome for icons
- Inter Font 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