Mesaj - Real-time Messaging Application

A modern, real-time messaging web application built with Node.js, Express, Socket.io, and TailwindCSS.

Features

Security & Authentication

• PIN-based Authentication: Users must enter PIN 190125 to access the chat
• Anonymous Sessions: Each user gets a unique anonymous identifier (e.g., "User#1234")
• Secure Session Management: Sessions persist for 24 hours

Real-time Communication

• WebSocket Integration: Real-time message synchronization using Socket.io
• Live Typing Indicators: See when other users are typing
• Online Status: Real-time online user count and status
• Message Delivery Confirmation: Track message delivery status

User Interface

• Modern Design: Clean, intuitive interface using TailwindCSS
• Fully Responsive: Optimized for desktop and mobile devices
• Material Design: Modern UI components and animations
• Touch-friendly: Optimized for mobile interactions

Core Functionality

• Single Public Channel: All users communicate in one shared space
• Message Timestamps: Display when messages were sent
• Auto-cleanup: Messages are automatically deleted after 24 hours
• Cross-browser Compatibility: Works on all modern browsers

Mobile Optimization

• Progressive Web App: Native-like experience on mobile
• Adaptive Layout: Responsive design for all screen sizes
• Touch Interactions: Optimized for touch devices
• Performance: Fast loading and smooth animations

Quick Start

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone <repository-url>
   cd mapp

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Access the application

   • Open your browser and navigate to http://localhost:3000
   • Enter PIN: 190125
   • Start messaging!

Production Deployment

1. Install dependencies

   npm install --production

2. Set environment variables (optional)

   export PORT=3000
   export NODE_ENV=production

3. Start the server

   npm start

API Endpoints

Authentication

• POST /api/verify-pin - Verify PIN and create session
• GET /api/session - Check current session status

Messages

• GET /api/messages - Get recent messages (last 24 hours)

WebSocket Events

Client to Server

• authenticate - Authenticate user with Socket.io
• sendMessage - Send a new message
• typing - Send typing indicator

Server to Client

• newMessage - Receive new message
• userJoined - User joined notification
• userLeft - User left notification
• onlineUsers - List of online users
• userTyping - Typing indicator from other users
• messageDelivered - Message delivery confirmation

Technical Architecture

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• Socket.io - Real-time communication
• Express-session - Session management
• CORS - Cross-origin resource sharing

Frontend

• Vanilla JavaScript - No framework dependencies
• TailwindCSS - Utility-first CSS framework
• Font Awesome - Icons
• Socket.io Client - Real-time communication

Data Storage

• In-memory Storage - Messages stored in memory (for demo)
• Session Storage - User sessions with cookies
• Auto-cleanup - Messages automatically deleted after 24 hours

Security Features

• PIN Authentication - Required for access
• Session Management - Secure session handling
• Input Sanitization - XSS protection
• CORS Configuration - Cross-origin security
• Anonymous Users - No personal data collection

Performance Optimizations

• Efficient Message Loading - Only recent messages loaded
• Auto-cleanup - Automatic message deletion
• Optimized Animations - Smooth CSS transitions
• Mobile Optimization - Touch-friendly interface
• Lazy Loading - Efficient resource management

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

Development

Project Structure

mapp/
├── server.js          # Main server file
├── package.json       # Dependencies and scripts
├── public/           # Static files
│   ├── index.html    # Main HTML file
│   └── app.js        # Frontend JavaScript
├── README.md         # This file
└── .gitignore        # Git ignore rules

Available Scripts

• npm start - Start production server
• npm run dev - Start development server with nodemon

Deployment

For mesaj.musabustun.xyz

1. Set up your server with Node.js
2. Clone the repository to your server
3. Install dependencies: npm install --production
4. Configure your web server (nginx/Apache) to proxy to port 3000
5. Set up SSL for HTTPS
6. Start the application: npm start

Environment Variables

• PORT - Server port (default: 3000)
• NODE_ENV - Environment (development/production)

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

MIT License - see LICENSE file for details

Support

For issues and questions, please create an issue in the repository.

---

Built with ❤️ for real-time communication