Implement Webrtc based calling and messaging functionality along with customer details
Budget: ₹12,500 – ₹37,500 INR
***Apply only if you have implemented WebRTC before for audio and video calling.
***We need this completed within 7 to 10 days including UI and UX design as well as application development.
***So bid only if you can complete this in the given time range.
I'm looking for a skilled React Developer with strong UI design skills to help add new functionality to my existing React web app. The primary goal of this project is to integrate Webrtc based calling and messaging.
1. Introduction
Objective:
Develop a new feature in our call center web application to enable agents to perform daily functions of receiving and dialing calls with enhanced communication capabilities. This feature must be developed using React, Chakra UI, and Ant Design (AntD) frameworks.
Scope:
The feature will include the following functionalities:
Dial missed calls
Dial phone numbers with country codes
Search and dial contacts
Display customer details and communication history during calls
Action panel for call-related actions
Send and receive SMS and WhatsApp messages during calls
View recent calls
Enable/disable communication modes (WebRTC, mobile phone, SIP phone)
Change agent status
Implement socket connection for event notifications
Sound alerts for WebRTC and message notifications
Permission check for feature access
2. Requirements
2.1 Functional Requirements
2.1.1 Dial Missed Calls
Four buckets for missed calls: Not dialed yet, Dialed once, Dialed twice, Dialed thrice
UI components: Tabs or sections for each bucket
Actions: Dial, View details
2.1.2 Dial Phone Numbers
Input: Text input for phone number and country code
On-screen dial pad for number input
Action: Dial
2.1.3 Search and Dial Contacts
Search bar for contacts
Display search results with contact details
Action: Dial
2.1.4 Call Screen
Active State:
Customer details panel
Call history (calls, SMS, email, WhatsApp, files)
Action panel (Hang up, Transfer, Hold, Add participant, Block contact, Add/Update notes)
SMS panel
WhatsApp panel
Inactive State:
Missed calls section
Dial pad section
Call activity history
2.1.5 Send and Receive Messages During Calls
SMS Panel:
Send/receive SMS
Display message history
WhatsApp Panel:
Send/receive WhatsApp messages
Send template messages
Send files
Display message history
2.1.6 View Recent Calls
List recent calls with details
Actions: View details, Redial
2.1.7 Enable/Disable Communication Modes
Toggle buttons for WebRTC, mobile phone, SIP phone
Actions: Enable/Disable
2.1.8 Change Agent Status
Dropdown or button group for predefined statuses (Online, Offline, Break, Lunch, etc.)
Action: Change status
2.1.9 Socket Connection
Event types: Missed call counts, Call events (agent up, customer up, hangups), SMS/WhatsApp message notifications
Actions: Display notifications, Update UI
2.1.10 Sound Alerts
WebRTC: Ringing, Customer pickup, Call end
Messages: SMS and WhatsApp message notifications
2.1.11 Permission Check
Enable feature based on user permissions
2.2 Non-Functional Requirements
2.2.1 Performance
Real-time updates and notifications
Efficient handling of multiple communication channels simultaneously
2.2.2 Usability
Intuitive and user-friendly UI
Responsive design for mobile, tablet, laptop, and desktop
2.2.3 Security
Secure handling of customer data
Proper authentication and authorization mechanisms
2.2.4 Reliability
Stable and consistent performance across all supported devices
2.2.5 Compatibility
Compatible with latest versions of major browsers (Chrome, Firefox, Safari, Edge)
3. User Interface Components
3.1 Dial Missed Calls Section
Tabs/Sections for each missed call bucket
List items for each missed call with details
Dial button for each missed call
3.2 Dial Phone Number Section
Text input for phone number and country code
On-screen dial pad
Dial button
3.3 Search Contacts Section
Search bar
List of search results with contact details
Dial button for each contact
3.4 Call Screen (Active State)
Customer Details Panel:
Customer name, contact info, and other relevant details
Call History Panel:
Call, SMS, email, WhatsApp, file history
Action Panel:
Buttons: Hang up, Transfer, Hold, Add participant, Block contact, Add/Update notes
SMS Panel:
Send/receive SMS input
Message history display
WhatsApp Panel:
Send/receive message input
Template message input
File attachment option
Message history display
3.5 Call Screen (Inactive State)
Missed calls section (as defined above)
Dial pad section (as defined above)
Call activity history section
3.6 Recent Calls Section
List of recent calls with details
Actions: View details, Redial
3.7 Communication Mode Toggle
Toggle buttons for WebRTC, mobile phone, SIP phone
3.8 Agent Status Section
Dropdown or button group for status selection
3.9 Notifications
Real-time notifications for events (missed calls, messages, call status changes)
3.10 Sound Alerts
Configurable sound alerts for various events
4. API Actions and Error Handling
4.1 API Integration
Integrate with existing APIs for dialing, receiving calls, sending messages, and fetching customer details
4.2 Error Handling
Display appropriate error messages for all API error codes
5. Acceptance Criteria
Feature must be fully functional as described in the requirements
UI should be responsive and user-friendly
Real-time updates and notifications should work seamlessly
Sound alerts should be configurable and function correctly
Permission checks must ensure only authorized users can access the feature
***We need this completed within 7 to 10 days including UI and UX design as well as application development.
***So bid only if you can complete this in the given time range.
I'm looking for a skilled React Developer with strong UI design skills to help add new functionality to my existing React web app. The primary goal of this project is to integrate Webrtc based calling and messaging.
1. Introduction
Objective:
Develop a new feature in our call center web application to enable agents to perform daily functions of receiving and dialing calls with enhanced communication capabilities. This feature must be developed using React, Chakra UI, and Ant Design (AntD) frameworks.
Scope:
The feature will include the following functionalities:
Dial missed calls
Dial phone numbers with country codes
Search and dial contacts
Display customer details and communication history during calls
Action panel for call-related actions
Send and receive SMS and WhatsApp messages during calls
View recent calls
Enable/disable communication modes (WebRTC, mobile phone, SIP phone)
Change agent status
Implement socket connection for event notifications
Sound alerts for WebRTC and message notifications
Permission check for feature access
2. Requirements
2.1 Functional Requirements
2.1.1 Dial Missed Calls
Four buckets for missed calls: Not dialed yet, Dialed once, Dialed twice, Dialed thrice
UI components: Tabs or sections for each bucket
Actions: Dial, View details
2.1.2 Dial Phone Numbers
Input: Text input for phone number and country code
On-screen dial pad for number input
Action: Dial
2.1.3 Search and Dial Contacts
Search bar for contacts
Display search results with contact details
Action: Dial
2.1.4 Call Screen
Active State:
Customer details panel
Call history (calls, SMS, email, WhatsApp, files)
Action panel (Hang up, Transfer, Hold, Add participant, Block contact, Add/Update notes)
SMS panel
WhatsApp panel
Inactive State:
Missed calls section
Dial pad section
Call activity history
2.1.5 Send and Receive Messages During Calls
SMS Panel:
Send/receive SMS
Display message history
WhatsApp Panel:
Send/receive WhatsApp messages
Send template messages
Send files
Display message history
2.1.6 View Recent Calls
List recent calls with details
Actions: View details, Redial
2.1.7 Enable/Disable Communication Modes
Toggle buttons for WebRTC, mobile phone, SIP phone
Actions: Enable/Disable
2.1.8 Change Agent Status
Dropdown or button group for predefined statuses (Online, Offline, Break, Lunch, etc.)
Action: Change status
2.1.9 Socket Connection
Event types: Missed call counts, Call events (agent up, customer up, hangups), SMS/WhatsApp message notifications
Actions: Display notifications, Update UI
2.1.10 Sound Alerts
WebRTC: Ringing, Customer pickup, Call end
Messages: SMS and WhatsApp message notifications
2.1.11 Permission Check
Enable feature based on user permissions
2.2 Non-Functional Requirements
2.2.1 Performance
Real-time updates and notifications
Efficient handling of multiple communication channels simultaneously
2.2.2 Usability
Intuitive and user-friendly UI
Responsive design for mobile, tablet, laptop, and desktop
2.2.3 Security
Secure handling of customer data
Proper authentication and authorization mechanisms
2.2.4 Reliability
Stable and consistent performance across all supported devices
2.2.5 Compatibility
Compatible with latest versions of major browsers (Chrome, Firefox, Safari, Edge)
3. User Interface Components
3.1 Dial Missed Calls Section
Tabs/Sections for each missed call bucket
List items for each missed call with details
Dial button for each missed call
3.2 Dial Phone Number Section
Text input for phone number and country code
On-screen dial pad
Dial button
3.3 Search Contacts Section
Search bar
List of search results with contact details
Dial button for each contact
3.4 Call Screen (Active State)
Customer Details Panel:
Customer name, contact info, and other relevant details
Call History Panel:
Call, SMS, email, WhatsApp, file history
Action Panel:
Buttons: Hang up, Transfer, Hold, Add participant, Block contact, Add/Update notes
SMS Panel:
Send/receive SMS input
Message history display
WhatsApp Panel:
Send/receive message input
Template message input
File attachment option
Message history display
3.5 Call Screen (Inactive State)
Missed calls section (as defined above)
Dial pad section (as defined above)
Call activity history section
3.6 Recent Calls Section
List of recent calls with details
Actions: View details, Redial
3.7 Communication Mode Toggle
Toggle buttons for WebRTC, mobile phone, SIP phone
3.8 Agent Status Section
Dropdown or button group for status selection
3.9 Notifications
Real-time notifications for events (missed calls, messages, call status changes)
3.10 Sound Alerts
Configurable sound alerts for various events
4. API Actions and Error Handling
4.1 API Integration
Integrate with existing APIs for dialing, receiving calls, sending messages, and fetching customer details
4.2 Error Handling
Display appropriate error messages for all API error codes
5. Acceptance Criteria
Feature must be fully functional as described in the requirements
UI should be responsive and user-friendly
Real-time updates and notifications should work seamlessly
Sound alerts should be configurable and function correctly
Permission checks must ensure only authorized users can access the feature