Q-Consultation Lite open source code makes it easy and convenient to create your own private video consultation app with online chat !
This web application is built on React JS and consists of three major parts: QuickBlox back-end and two web applications for Client and Provider.
Before you start, there are a few things you need to know ahead.
Ubuntu LTS/Debian 9.x
NodeJS >= 16 <= 18
NPM >= 8.x
*We support the current stable version of the browser and the version that preceded it. For example, if the current version of a browser is 24.x, we support the 24.x and 23.x versions.
Q-Consultation Lite may work on other browsers and operating systems, but these are not tested nor officially supported at this time.
Next, you will need to visit the QuickBox GitHub Repository and clone the repository or download it as a zip archive.
Once this has been completed, you need to install dependencies by running the following command in cmd:
To run the source code you will need a QuickBlox account. Sign-in to your existing account, or if you don’t have one, register for free.
Once you are in your QuickBlox account, you need to create a QuickBlox application. This will allow you to connect the Q-Consultation Lite application to the QuickBlox server.
On the main page of the QuickBlox account, create an application by clicking the “New app” button
Fill in the required fields including app "Title" and app "Type", and select “Create app”
On the “Overview” page of your newly created application, you will find application credentials necessary to connect the Q-Consultation Lite application to the QuickBlox server. We will get back to this later.
Now, let’s get back to your application credentials which you can find in the QuickBlox admin panel. In order to work correctly, your application needs to know a set of configs.
You can create a configuration file by running this command and following the instructions in the terminal:
You can also manually update the "config.json" variables in the "qconsultation_config" folder.
You will need to update the following keys with your credentials.
[Required] denotes that these variables must be set. Without them, the application will not work correctly.
[Optional if you use QuickBlox Shared Cloud Plan] denotes that these variables do not need to be set when using the QuickBlox Basic/ Starter/ Growth/ HIPPA Cloud Plan. If you are on the Enterprise plan, these variables are required.
“FILE_SIZE_LIMIT” is used to initially check the size of uploaded files and display an error if it is exceeded. Modify it according to the limitations of your QuickBlox Plan.
Contact our sales team if you wish to upgrade plan
If you have a QuickBlox Basic/ Starter/ Growth/ HIPPA Cloud Plan (Shared server), you can skip the following step.
If you have a QuickBlox Enterprise plan, to specify custom Ice Servers instead of default ones you can set value for key "QB_SDK_CONFIG_ICE_SERVERS":
For more details on the format, see RTCIceServerdocs.
To make online appointments work in the Q-Consultation app, it’s necessary to import an appointment schema file to the QuickBlox admin panel.
You can add the schema automatically by running this command and following the instructions in the terminal.
You can also add a scheme manually through the Admin Panel. (If you've created a QuickBlox account via Google or GitHub and you don't have a password, then you will need to use this manual method.)
You will find the "schema.yml" file in the "q-consultation_config" folder of the project directory.
To import this file to the QuickBlox admin panel, follow the steps below:
If something goes wrong, you can also manually create a custom class in the way described below:
You can fully customize the application style settings and logo and you may wish to do this at this stage before you run the code. For full instructions, see the Integration Guide.
In order to test how the Q-Consultation Lite application works after the launch, you can now create users - a Provider and a Client.
A Client user can be registered directly via the Q-Consultation application via the “sign-up” option.
However, the app does not provide a self-registration option for the Provider user. Instead the Provider needs to be created by the QuickBlox admin user via the admin panel.
Currently, you need to create one Provider as the default Provider. If there is no default Provider, then the Client web application will constantly send API requests to the QuickBlox server for the Provider to show as a default. Later, you can change this logic.
Follow the steps below to create a Provider:
1. Open your QuickBlox application, and go to the ‘Users’ tab.
2. Select “Add new user”.
3. Fill in user data (Full Name, Email, Password, Confirm) and set a Tag “provider”, choose “Yes” for “I’m over 16”, and click “Add user”.
Now you will be able to log into the Q-Consultation Lite provider app with this user.
Each newly created user is assigned a unique ID. You will need this user_id later.
Once you have completed the preparation steps listed above you are now able to run the project.
We provide the following scripts in the project directory to help you run the project.
This script runs the app in development mode.
The application will automatically open in the browser after running the `npm start` script.
The page will reload if you make edits.
NOTE: The Q-Consultation application uses a self-signed ssl certificate, so your web-browser will likely warn you about untrusted certificates.
This script builds the app for production. Artifacts will appear in the `build` folder.
See the section about deployment for more information.
NOTE: Be sure to use HTTPS on the server, otherwise video calls will not work for you.
This script allows you to run integration pages on here.. You can read more about how to work with integration pages
This will run code linting using ESlint which will analyze code to find problematic patterns or code that doesn't adhere to certain style guidelines.
Once you have completed the steps and run the project, the Client and Provider apps should be automatically open in your default browser.
Your Q-Consultation app has now been successfully set up!
What’s next ?
For additional information on how to proceed with app integration, see Integration Guide.