https://github.com/syed-m-nofel/connectify
A sleek, real-time chat app powered by HTML, CSS, Node.js, and WebSocket.io. Connect instantly, communicate effortlessly.
https://github.com/syed-m-nofel/connectify
css html html5 json node-js nodejs websocket websocketio
Last synced: 4 months ago
JSON representation
A sleek, real-time chat app powered by HTML, CSS, Node.js, and WebSocket.io. Connect instantly, communicate effortlessly.
- Host: GitHub
- URL: https://github.com/syed-m-nofel/connectify
- Owner: Syed-M-Nofel
- License: mit
- Created: 2024-03-20T09:45:00.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-28T14:24:55.000Z (over 1 year ago)
- Last Synced: 2025-10-06T05:51:00.938Z (9 months ago)
- Topics: css, html, html5, json, node-js, nodejs, websocket, websocketio
- Language: HTML
- Homepage:
- Size: 1.09 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Connectify
A sleek, real-time chat app powered by HTML, CSS, Node.js, and WebSocket.io. Connect instantly, communicate effortlessly.
## Features
- **Real-Time Communication**: Experience instant messaging with WebSocket technology.
- **User-Friendly Interface**: Simple and elegant design with Bootstrap for easy navigation.
- **Dynamic User Handling**: Automatically updates users' connection status.
- **Responsive Design**: Optimized for both desktop and mobile devices.
## Technologies Used
- **HTML**: Structure of the chat application.
- **CSS**: Styling, including custom styles and Bootstrap integration.
- **JavaScript**: Client-side scripting and user interaction.
- **Node.js**: Server-side runtime environment.
- **WebSocket.io**: Real-time bidirectional communication.
## Installation
1. **Clone the repository:**
```sh
git clone https://github.com/your-username/connectify.git
```
2. **Navigate to the project directory:**
```sh
cd connectify
```
3. **Install dependencies:**
```sh
npm install
```
4. **Start the server:**
```sh
node server.js
```
5. **Open your browser and go to:**
```
http://localhost:3000
```
## Usage
- **Joining the Chat**: Enter your name when prompted and start chatting with others.
- **Sending Messages**: Type your message in the input field and press the "Send" button or hit Enter.
## Code Overview
### Client-Side
- **HTML**: Contains the structure of the chat interface.
- **CSS**: Defines the layout and styling, including Bootstrap and custom styles.
- **JavaScript**: Handles user interactions, message sending/receiving, and updates the UI.
### Server-Side
- **Node.js**: Manages the server and WebSocket connections.
- **WebSocket.io**: Facilitates real-time communication between the server and clients.
- **User Management**: Manages connected users and their statuses.
## Future Enhancements
- **User Authentication**: Secure login and registration.
- **Private Messaging**: Enable one-on-one conversations.
- **Chat History**: Save and display previous messages.
## Contributing
Contributions are welcome! Please fork this repository and submit a pull request for review.
## Acknowledgments
- [Bootstrap](https://getbootstrap.com/)
- [WebSocket.io](https://socket.io/)
- [Node.js](https://nodejs.org/)