Waves is a modern, real-time chat application that offers both global and network-based chat rooms. Built with React, Node.js, and Socket.IO, it features a beautiful, responsive UI and seamless real-time communication.
- Join a global chatroom accessible to all users
- Real-time message updates
- User presence indicators
- Beautiful, modern UI with gradient effects
- Automatic room assignment based on IP subnet
- Connect with users on the same network
- Real-time message updates within network rooms
- Member list with user status
- Anonymous login with randomly generated names
- Custom account creation
- Persistent user colors
- Secure authentication with JWT
- Modern, responsive design
- Beautiful gradient animations
- Dark theme optimized for readability
- Real-time typing indicators
- Message timestamps
- Auto-scroll to latest messages
- Character counter and limit warning
- Send button disables and rate-limits
- Error toasts for empty/long/too-fast messages
- Node.js (v14 or higher)
- MongoDB
- npm or yarn
- Clone the repository
git clone https://github.com/wavey-waves/waves.git
cd waves- Install dependencies for both frontend and backend
# Install backend dependencies
cd backend
npm install
# Install frontend dependencies
cd ../frontend
npm install- Create environment files
Backend (.env):
PORT=3000
MONGODB_URI=your_mongodb_uri
JWT_SECRET=your_jwt_secret
NODE_ENV=development- Start the development servers
Backend:
cd backend
npm run devFrontend:
cd frontend
npm run dev- React (Vite)
- Socket.IO Client
- Axios
- TailwindCSS
- React Router
- react-toastify
- Node.js
- Express
- Socket.IO
- MongoDB with Mongoose
- JWT Authentication
-
Global Chat
- Click "Join Global Room" on the home page
- Choose anonymous login or create an account
- Start chatting with users worldwide
-
Network Chat
- Click "Join Network" on the home page
- You'll be automatically assigned to a room based on your IP subnet
- Chat with users on your network
-
User Account
- Create a custom account with username and password
- Or use anonymous login with auto-generated username
- Your color will be preserved across sessions
- JWT-based authentication
- HTTP-only cookies
- Password hashing with bcrypt
- CORS configuration
- Input validation and sanitization
Contributions are welcome! Please feel free to submit a Pull Request.
- 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