MessageWave

A modern, real-time chat application built with the MERN stack

📋 Overview

MessageWave is a full-stack real-time messaging application that enables instant communication between users. Built with modern web technologies, it provides a seamless chat experience with authentication, real-time message delivery, and online status tracking.

✨ Key Features

• Real-time Messaging: Instant message delivery powered by Socket.io
• User Authentication: Secure JWT-based authentication and authorization
• Online Status: Real-time user presence detection and status indicators
• Modern UI/UX: Responsive design with TailwindCSS and Daisy UI
• State Management: Efficient global state handling with Zustand
• Error Handling: Comprehensive error management on both client and server
• Optimized Performance: Fast and efficient message loading and delivery

🛠️ Technology Stack

Frontend

• React - UI library for building interactive interfaces
• TailwindCSS - Utility-first CSS framework
• Daisy UI - Component library for Tailwind
• Zustand - Lightweight state management
• Socket.io Client - Real-time bidirectional communication

Backend

• Node.js - JavaScript runtime environment
• Express.js - Web application framework
• MongoDB - NoSQL database
• Socket.io - Real-time engine
• JWT - Secure token-based authentication
• Bcrypt - Password hashing

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• MongoDB database
• npm or yarn package manager

Environment Configuration

Create a .env file in the root directory with the following variables:

PORT=5000
MONGO_DB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
NODE_ENV=development

Installation

1. Clone the repository

   git clone <repository-url>
   cd messagewave

2. Install dependencies

   npm install

3. Build the application

   npm run build

4. Start the application

   npm start

The application will be available at http://localhost:5000

Development Mode

To run the application in development mode with auto-reload:

npm run server

📁 Project Structure

messagewave/
├── backend/
│   ├── controllers/      # Request handlers
│   ├── models/          # Database schemas
│   ├── routes/          # API routes
│   ├── middleware/      # Custom middleware
│   ├── socket/          # Socket.io configuration
│   ├── db/              # Database connection
│   └── utils/           # Utility functions
├── frontend/
│   ├── src/
│   │   ├── components/  # React components
│   │   ├── pages/       # Page components
│   │   ├── hooks/       # Custom React hooks
│   │   ├── context/     # React context providers
│   │   ├── zustand/     # State management
│   │   └── utils/       # Helper functions
│   └── public/          # Static assets
└── package.json

🔒 Security Features

• Password encryption using bcrypt
• HTTP-only cookies for token storage
• JWT token validation on protected routes
• Input validation and sanitization
• Secure WebSocket connections

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built as part of learning full-stack development
• Inspired by modern messaging applications
• Thanks to the open-source community

📞 Support

For questions or support, please open an issue in the repository.

---

Made with ❤️ by Hiroshi