A modern, feature-rich real-time communication platform built with React, TypeScript, and Firebase

WHOXA is a comprehensive real-time communication platform that brings together the best features of modern messaging applications. Built with cutting-edge technologies, it offers seamless messaging, high-quality video calls, group conversations, status updates, and much more.

• Instant messaging with real-time delivery
• Message reactions and emoji support
• Message forwarding and replying
• Starred messages for easy access
• Message search functionality
• File and media sharing (images, videos, documents)

• High-quality peer-to-peer video calls
• Group video calls support
• Screen sharing capabilities
• Call recording (planned)
• Call history tracking

• Create and manage group chats
• Group admin controls
• Add/remove members functionality
• Group settings and permissions
• Public group discovery

• WhatsApp-style status stories
• View status updates from contacts
• Story replies and interactions
• Privacy controls for status visibility

• Real-time location sharing
• Interactive maps integration
• Contact sharing functionality
• File compression and optimization

• Polls and voting system
• Message pinning
• User blocking and reporting
• Multi-language support
• Dark/light theme toggle

• Firebase Authentication
• Secure message encryption
• User privacy controls
• Admin moderation tools

whoxa/
├── whoxa_frontend/     # React web application
├── whoxa_backend/      # Backend API services
└── whoxa_admin/        # Admin dashboard

• React 18 - Modern UI library
• TypeScript - Type-safe development
• Vite - Fast build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• Redux Toolkit - State management
• Socket.IO - Real-time communication
• Firebase - Authentication and backend services

• Node.js - Runtime environment
• Express.js - Web framework
• Socket.IO - Real-time WebSocket communication
• Firebase Admin - Backend services

• PeerJS - Peer-to-peer connections for video calls
• mediasoup-client - WebRTC media server
• Google Maps API - Location services
• FFmpeg - Video processing
• React Query - Server state management

• Node.js 18+ and npm
• Firebase project setup
• Google Maps API key

1. Clone the repository

   git clone https://github.com/bouzayenilyes/whoxa.git
   cd whoxa

2. Install dependencies

   # Frontend
   cd whoxa_frontend
   npm install
   
   # Backend
   cd ../whoxa_backend
   npm install
   
   # Admin
   cd ../whoxa_admin
   npm install

3. Environment Setup

   Create .env files in each directory:

   Frontend (.env)

   VITE_FIREBASE_API_KEY=your_firebase_api_key
   VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
   VITE_FIREBASE_PROJECT_ID=your_project_id
   VITE_GOOGLE_MAPS_API_KEY=your_google_maps_key

4. Start the development servers

   # Terminal 1 - Frontend
   cd whoxa_frontend && npm run dev
   
   # Terminal 2 - Backend
   cd whoxa_backend && npm start
   
   # Terminal 3 - Admin
   cd whoxa_admin && npm run dev

whoxa_frontend/
├── src/
│   ├── components/          # Reusable UI components
│   ├── pages/              # Main application pages
│   │   ├── Home/           # Main chat interface
│   │   ├── Register/       # Authentication pages
│   │   └── ...
│   ├── store/              # Redux state management
│   │   ├── api/            # API calls and queries
│   │   └── slices/         # Redux slices
│   ├── utils/              # Utility functions
│   ├── types/              # TypeScript type definitions
│   ├── hooks/              # Custom React hooks
│   └── socket/             # WebSocket handlers
├── public/                 # Static assets
└── ...

• Real-time message delivery via WebSocket
• Message status indicators (sent, delivered, read)
• File upload and media handling
• Message encryption and security

• Peer-to-peer connection setup
• Media stream management
• Call controls (mute, camera, end call)
• Multi-participant support

• Responsive design for all screen sizes
• Dark/light theme support
• Multi-language localization
• Accessibility features

1. Create a new Firebase project
2. Enable Authentication (Email, Google, Phone)
3. Configure Firestore Database
4. Set up Storage buckets
5. Enable Cloud Functions (optional)

1. Get a Google Maps API key
2. Enable Maps JavaScript API
3. Enable Places API
4. Configure billing account

WHOXA is fully responsive and works seamlessly across:

• 📱 Mobile devices (iOS/Android)
• 💻 Desktop computers
• 📟 Tablets
• 🌐 Web browsers

• End-to-end encryption for messages (planned)
• Firebase Security Rules for data protection
• User authentication with multiple providers
• Input validation and sanitization
• Rate limiting for API endpoints
• Admin moderation tools

Currently supports:

• 🇬🇧 English
• 🇫🇷 French
• 🇸🇦 Arabic
• 🇩🇪 German
• And more languages coming soon...

cd whoxa_frontend
npm run build
# Deploy the dist folder

cd whoxa_backend
npm run build
# Deploy using your preferred platform

# Run frontend tests
cd whoxa_frontend
npm test

# Run backend tests
cd whoxa_backend
npm test

• ⚡ Fast loading with Vite bundling
• 🔄 Real-time updates via WebSocket
• 📱 Optimized for mobile with lazy loading
• 🎨 Smooth animations with React Spring
• 📦 Code splitting for optimal bundle sizes

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

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

Bouzayen Ilyes

• GitHub: @bouzayenilyes
• Email: bouzayenilyes@example.com

• React Team for the amazing framework
• Firebase for backend services
• Tailwind CSS for styling system
• Socket.IO for real-time communication
• All contributors who helped make this project possible

If you have any questions or need help, feel free to:

• 📧 Email: support@whoxa.com
• 💬 Discord: Join our community
• 🐛 Issues: GitHub Issues

• ✅ Real-time messaging
• ✅ Video calling
• ✅ Group chats
• ✅ Status updates

• 🔲 Voice messages
• 🔲 Message encryption
• 🔲 Desktop application
• 🔲 Bot integration

• 🔲 Video/Audio filters
• 🔲 AI-powered features
• 🔲 Cloud storage
• 🔲 Enterprise features