Experience seamless communication with WhatsApp/Telegram-like features, stunning animations, and mobile-first design.
- Instant Communication: Socket.io powered real-time messaging
- Message Status: Read receipts with double-tick indicators
- Online Status: Live user presence indicators
- Message History: Persistent chat history with infinite scroll
- Date Separators: WhatsApp-style date dividers between conversations
- Edit Messages: Click-to-edit with main input field integration
- Delete Messages: Remove sent messages with confirmation
- Message Timestamps: Bottom-right corner time display like WhatsApp
- Visual Feedback: Dark overlay during editing mode
- Keyboard Shortcuts: Enter to save, Escape to cancel
- User Profiles: Comprehensive profile viewing system
- Avatar Interactions: Click avatars for quick actions menu
- Profile Viewer: Full-screen profile modals on mobile
- Last Message Preview: Recent message display under user names
- Unread Counters: WhatsApp-style message count badges
- Multiple Themes: Light, dark, and custom theme options
- Chat Themes: Customizable bubble color schemes
- Wallpapers: Beautiful background options for chat areas
- Smooth Animations: Professional transitions and hover effects
- Mobile Responsive: Telegram/WhatsApp-like mobile experience
- Offline Capability: Service worker for offline functionality
- App-like Experience: Install on mobile devices
- Push Notifications: Browser notification support (Coming Soon)
- Background Sync: Seamless message synchronization
- Redux Toolkit: Efficient state management
- Modern React: React 19 with hooks and context
- TypeScript Support: Type safety with PropTypes
- Component Architecture: Modular and reusable components
- Error Boundaries: Graceful error handling
- React 19 - Modern UI library with latest features
- Redux Toolkit - State management with RTK Query
- Tailwind CSS - Utility-first CSS framework
- DaisyUI - Beautiful component library
- Socket.io Client - Real-time communication
- React Router - Client-side routing
- Vite - Fast build tool and development server
- Node.js - JavaScript runtime environment
- Express.js - Fast, minimal web framework
- Socket.io - Real-time bidirectional communication
- MongoDB - NoSQL database for scalability
- Mongoose - Object modeling for MongoDB
- JWT - Secure authentication tokens
- ESLint - Code linting and formatting
- PostCSS - CSS processing and optimization
- Git - Version control system
- npm - Package management
- Node.js (v18.0.0 or higher)
- MongoDB (v5.0 or higher)
- npm or yarn package manager
git clone https://github.com/yourusername/connexus.git
cd connexuscd server
npm install
# Create environment file
cp .env.example .env
# Configure your environment variables
# MONGO_URI=your_mongodb_connection_string
# JWT_SECRET=your_jwt_secret
# CLIENT_URL=http://localhost:5173
# PORT=5000
# Start the server
npm startcd ../client
npm install
# Create environment file
cp .env.example .env
# Configure your environment variables
# VITE_DB_ORIGIN=http://localhost:5000
# Start the development server
npm run dev- Frontend: http://localhost:5173
- Backend: http://localhost:5000
- Sign Up: Create a new account with username, email, and password
- Login: Access your account with credentials
- Find Users: Browse the user list in the sidebar
- Start Chatting: Click on any user to begin a conversation
- Type in the input field and press Enter or click Send
- Click the three-dot menu on your messages to edit or delete
- See read receipts (✓✓) on sent messages
- View message timestamps in bottom-right corner
- Click user avatars in sidebar for quick action menu
- Click user name/avatar in chat header to view full profile
- See online status with green dot indicators
- View unread message counts with green badges
- Access Settings via the three-dot menu in top-right
- Choose from multiple app themes (Light, Dark, etc.)
- Select chat bubble color schemes
- Pick from beautiful wallpaper options
- Full-screen interface on mobile devices
- Touch-optimized interactions
- Swipe-friendly navigation
- Install as PWA for app-like experience
connexus/
├── client/ # Frontend React application
│ ├── public/ # Static assets and PWA files
│ │ ├── icons/ # App icons for PWA
│ │ ├── manifest.json # PWA manifest
│ │ └── sw.js # Service worker
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ │ ├── About.jsx # About modal
│ │ │ ├── Settings.jsx # Settings panel
│ │ │ ├── UserProfile.jsx # User profile editor
│ │ │ └── UserProfileViewer.jsx # Profile viewer
│ │ ├── hooks/ # Custom React hooks
│ │ │ └── useTheme.js # Theme management hook
│ │ ├── pages/ # Main application pages
│ │ │ ├── authentication/ # Login/Signup pages
│ │ │ └── home/ # Chat interface components
│ │ ├── store/ # Redux store configuration
│ │ │ └── slice/ # Redux slices
│ │ ├── utils/ # Utility functions
│ │ └── index.css # Global styles
│ ├── package.json
│ └── vite.config.js # Vite configuration
├── server/ # Backend Node.js application
│ ├── controllers/ # Route controllers
│ ├── db/ # Database configuration
│ ├── middlewares/ # Express middlewares
│ ├── models/ # MongoDB models
│ ├── routes/ # API routes
│ ├── socket/ # Socket.io configuration
│ ├── utilities/ # Helper functions
│ ├── package.json
│ └── server.js # Main server file
└── README.md # This file
MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net/connexus
JWT_SECRET=your_super_secret_jwt_key
CLIENT_URL=http://localhost:5173
PORT=5000
NODE_ENV=developmentVITE_DB_ORIGIN=http://localhost:5000
VITE_APP_TITLE=Connexuscd client
npm run build
# Deploy the 'dist' foldercd server
# Ensure environment variables are set
# Deploy using your preferred platform- Create a MongoDB Atlas cluster
- Update
MONGO_URIin environment variables - Configure network access and database users
We welcome contributions to Connexus! Please follow these steps:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow the existing code style and conventions
- Write descriptive commit messages
- Add comments for complex logic
- Test your changes thoroughly
- Update documentation as needed
- Voice Messages - Send and receive audio messages
- File Sharing - Share documents, images, and videos
- Group Chats - Create and manage group conversations
- Video Calls - WebRTC-powered video communication
- Message Encryption - End-to-end encryption for privacy
- Bot Integration - Automated bots and AI assistants
- Message Reactions - React to messages with emojis
- Advanced Search - Search through message history
- Custom Notifications - Personalized notification settings
- Multi-device Sync - Synchronize across multiple devices
- TypeScript Migration - Full TypeScript implementation
- Testing Suite - Comprehensive unit and integration tests
- Performance Optimization - Code splitting and lazy loading
- Docker Support - Containerization for easy deployment
- CI/CD Pipeline - Automated testing and deployment
- Monitoring - Application performance monitoring
- Caching - Redis caching for improved performance
This project is licensed under the MIT License - see the LICENSE file for details.
Aaditya Dubey
- GitHub: @aaditya-dubey09
- LinkedIn: aadityadubey
- Email: ad2340033@gmail.com
- Socket.io for real-time communication capabilities
- MongoDB for robust database solutions
- Tailwind CSS for beautiful and responsive design
- React Community for the amazing ecosystem
- Open Source Contributors for inspiration and code references
If you encounter any issues or have questions:
- Check the Issues: Search existing GitHub issues
- Create New Issue: Open a detailed bug report or feature request
- Documentation: Refer to this README and inline code comments
- Community: Join our discussions and get help from the community