Hosting Web Setup Guide

VibeMatch is a full-stack SaaS platform divided into three main components that work together seamlessly:

1. Matching & Discovery: Users open the application and can instantly start random live video chats. The matchmaking algorithm connects them in real-time with other online users around the world using WebRTC technology.
2. VIP & Advanced Filters: While basic random matching is free, users can unlock premium filters (such as selecting a specific gender or global region) by upgrading to a VIP Membership or using their Diamonds/Coins.
3. Purchasing Diamonds & VIP: To unlock advanced matchmaking filters or buy virtual gifts, users can top up their wallet by purchasing Diamond Packs or VIP subscriptions securely via gateways like Stripe or PayPal.
4. Engagement & Gifting: During a live video call, users can interact, chat, and send virtual gifts to their matches using their balance, keeping engagement and platform monetization highly active.

VibeMatch is designed to be intuitive and engaging. Here is a brief walkthrough of how users interact with the platform:

1. Authentication: Users sign up using Google, Facebook, Phone (SMS), or as a Guest.
2. Home Dashboard: Users view their coin balance and VIP status. They can access the Store to buy Diamonds or VIP.
3. Match Filters: Before joining the queue, users can filter potential matches by Gender or specific Country Regions.
4. Live Video Chat: Users are matched instantly. During the call, they can chat via text, send animated gifts using their Diamonds, or skip to the next person.
5. Admin Management: Administrators log into the web dashboard to monitor active calls, manage users, and configure the platform.

📱 Mobile App Screenshots

Screenshot 1 (Mobile App)

Home & Matching Screen

Screenshot 2 (Live Chat)

Real-time Video & Gifting

Screenshot 3 (Shop)

Gems & VIP Store Packages

💻 Admin Panel Screenshots

Admin Dashboard

Real-time Telemetry & Server Metrics

User Management

Manage Profiles, Balances & Bans

Please note that operating this platform requires various third-party services. The buyer is entirely responsible for setting up and covering any associated costs or usage limits for these services:

• Payment Gateways: Services like Stripe and PayPal have their own transaction fees and account requirements.
• WebRTC Infrastructure: While free STUN servers are used by default, production deployment may require paid TURN/STUN servers (e.g., Twilio, Metered) for optimal connection reliability across restrictive networks.
• Database Hosting: MongoDB (e.g., MongoDB Atlas) may incur costs depending on your usage scale.
• Hosting & Server: VPS, Cloud Hosting, or Domain registration costs.

The first step is to create an account on Gadohost.com. Gadohost provides optimized, high-performance cloud hosting suitable for deploying the Node.js API and web backend of VibeMatch.

Once registered, navigate to the Billing section and select the Starter Premium plan (Plan 1) as a starting point. This plan includes support for up to 3 Node.js applications, 6 databases, free SSL certificates, and 20 GB of fast NVMe storage, which is perfectly sufficient for launching your VibeMatch platform.

Select 'Starter Premium' plan on Gadohost Dashboard

Once you have selected your cloud hosting tier, we need to initialize a container for our Node.js server.

Follow these steps:

1. From the left sidebar navigation menu, click on Node.js apps (Indicated by arrow 1).
2. This will open your application dashboard. Click on the purple + Add New App button in the top right corner (Indicated by arrow 2) or in the center card area to begin configuring your new deployment.

Access Node.js Apps (1) and Click Add New App (2)

After clicking the + Add New App button, a configuration modal will appear to provision your new cloud app instance.

Configure the following settings carefully:

1. In the APP NAME field (Indicated by arrow 1), type the name of your application (e.g., VibeMatch or production-v1). Spaces and dots will be converted to hyphens automatically.
2. Under DOMAIN STRATEGY, select CUSTOM DOMAIN.
3. In the DOMAIN ADDRESS field (Indicated by arrow 2), type your registered domain address (e.g., yourdomain.com).
4. Click the blue Deploy instance button at the bottom to start provisioning your server.

Enter App Name (1) and Domain Address (2) in configuration modal

As soon as you click the Deploy instance button, Gadohost will automatically start setting up a default node test page and installing default dependencies (indicated by the progress bar e.g. Processing dependencies... 39%).

You must stop this default process immediately:

1. Wait for the app card to appear on your dashboard.
2. Click the red Stop Instance button (Indicated by arrow 1). This prevents the server from building the default template, allowing us to upload our own clean VibeMatch project files in the next steps.

Click 'Stop Instance' (1) to halt default template setup

After stopping the default app instance, we need to set up the MongoDB database for our VibeMatch backend.

Follow these steps to access the database options:

1. On your stopped application card, click the purple Manage button (Indicated by arrow 1). This will expand a settings panel displaying various service controls.
2. From the expanded settings row, click on the purple MONGODB icon (Indicated by arrow 2). This will navigate you to the database setup interface where we will create our database credentials.

Click 'Manage' (1) and select the 'MONGODB' option (2)

Now, we will provision a new MongoDB database instance for storing VibeMatch users, videos, comments, and settings.

Follow these configuration steps carefully:

1. On the MongoDB databases page, click the purple + Add Database button in the top right corner of the background (Indicated by arrow 1). This will open the database creation modal.
2. In the USER field (Indicated by arrow 2), type the username for your database (e.g., yourusername or testVibeMatch_test).
3. In the NAME field (Indicated by arrow 3), type the name of the database (e.g., yourdbname or testVibeMatch_test). It is usually a good practice to keep the database name and user identical.
4. Next to the PASSWORD field, click the reload/generate icon (Indicated by arrow 4) to generate a secure database password. Make sure to copy and save this password somewhere safe! We will need it shortly to configure the MongoDB connection URI in our project environment file.
5. Finally, click the blue CREATE DATABASE button (Indicated by arrow 5) at the bottom to finalize and provision the database.

Add Database (1), fill User (2) & Name (3), generate Password (4), and Create Database (5)

Once the database is successfully created, it will appear in your Databases list. We need to copy its connection URI so that we can link our Node.js app to this database.

Follow these steps:

1. Locate your new database in the list and click the grey Copy URI button (Indicated by arrow 1). This will copy the MongoDB connection string to your clipboard. Save this string alongside your password, as we will use it to configure our environment variables.
2. After copying the URI, navigate back to your applications list by clicking on Node.js apps in the left sidebar menu (Indicated by arrow 2).

Click 'Copy URI' (1) and then click 'Node.js apps' in sidebar (2)

With our database created and stopped application instance ready, we can now access the server's files directory to upload the VibeMatch backend code.

Follow these steps:

1. On the applications dashboard, click the purple Manage button on your app card (Indicated by arrow 1) to expand the settings menu.
2. Click on the purple FILES icon (Indicated by arrow 2) which is the first option in the row. This will open the Gadohost file manager for your Node.js application instance.

Click 'Manage' (1) and select the 'FILES' icon (2)

When you first open your application's file manager, you will notice a few default boilerplate files and folders (such as index.js, package.json, etc.). We need to delete these files to ensure a clean workspace before uploading our project files.

Follow these steps to clean the directory:

1. Check the Select All checkbox in the table header next to "IDENTITY" (Indicated by arrow 1). This will select all the default files in the folder.
2. With the files selected, a purple batch operation toolbar will appear. Click the red DELETE button in this toolbar (Indicated by arrow 2) and confirm the deletion.

Check 'Select All' (1) and click 'DELETE' (2) to clear default files

Now that our file manager is clean, we need to create a new environment variable file (.env) to hold our database credentials and configuration keys.

Follow these steps to initialize the file creation:

1. Click the blue + CREATE NEW button at the top right of the file manager header (Indicated by arrow 1). This will expand a dropdown menu.
2. From the dropdown menu, select New binary file (Indicated by arrow 2).

Click '+ CREATE NEW' (1) and select 'New binary file' (2)

After clicking New binary file, a modal will prompt you to enter the name of the new file.

Follow these steps to deploy the file:

1. In the LABEL text box (Indicated by arrow 1), type exactly: .env (make sure to include the leading dot).
2. Click the blue DEPLOY button (Indicated by arrow 2) to create the file in your server root directory.

Type '.env' in LABEL box (1) and click 'DEPLOY' (2)

Now that the .env file is created, you need to open it and configure the database connection.

Follow these steps to edit the file:

1. Click the three dots (...) on the right side of the .env file row (Indicated by arrow 1).
2. Select the Edit Code option from the dropdown menu (Indicated by arrow 2).

Click the three dots (1) and select 'Edit Code' (2)

After stopping the default app instance, we need to set up the MongoDB database for our VibeMatch backend.

Follow these steps to access the database options:

1. On your stopped application card, click the purple Manage button (Indicated by arrow 1). This will expand a settings panel displaying various service controls.
2. From the expanded settings row, click on the purple MONGODB icon (Indicated by arrow 2). This will navigate you to the database setup interface where we will create our database credentials.

Click 'Manage' (1) and select the 'MONGODB' option (2)

Now, we will provision a new MongoDB database instance for storing VibeMatch users, videos, comments, and settings.

Follow these configuration steps carefully:

1. On the MongoDB databases page, click the purple + Add Database button in the top right corner of the background (Indicated by arrow 1). This will open the database creation modal.
2. In the USER field (Indicated by arrow 2), type the username for your database (e.g., yourusername or testVibeMatch_test).
3. In the NAME field (Indicated by arrow 3), type the name of the database (e.g., yourdbname or testVibeMatch_test). It is usually a good practice to keep the database name and user identical.
4. Next to the PASSWORD field, click the reload/generate icon (Indicated by arrow 4) to generate a secure database password. Make sure to copy and save this password somewhere safe! We will need it shortly to configure the MongoDB connection URI in our project environment file.
5. Finally, click the blue CREATE DATABASE button (Indicated by arrow 5) at the bottom to finalize and provision the database.

Add Database (1), fill User (2) & Name (3), generate Password (4), and Create Database (5)

Once the database is successfully created, it will appear in your Databases list. We need to copy its connection URI so that we can link our Node.js app to this database.

Follow these steps:

1. Locate your new database in the list and click the grey Copy URI button (Indicated by arrow 1). This will copy the MongoDB connection string to your clipboard. Save this string alongside your password, as we will use it to configure our environment variables.
2. After copying the URI, navigate back to your applications list by clicking on Node.js apps in the left sidebar menu (Indicated by arrow 2).

Click 'Copy URI' (1) and then click 'Node.js apps' in sidebar (2)

With our database created and stopped application instance ready, we can now access the server's files directory to upload the VibeMatch backend code.

Follow these steps:

1. On the applications dashboard, click the purple Manage button on your app card (Indicated by arrow 1) to expand the settings menu.
2. Click on the purple FILES icon (Indicated by arrow 2) which is the first option in the row. This will open the Gadohost file manager for your Node.js application instance.

Click 'Manage' (1) and select the 'FILES' icon (2)

When you first open your application's file manager, you will notice a few default boilerplate files and folders (such as index.js, package.json, etc.). We need to delete these files to ensure a clean workspace before uploading our project files.

Follow these steps to clean the directory:

1. Check the Select All checkbox in the table header next to "IDENTITY" (Indicated by arrow 1). This will select all the default files in the folder.
2. With the files selected, a purple batch operation toolbar will appear. Click the red DELETE button in this toolbar (Indicated by arrow 2) and confirm the deletion.

Check 'Select All' (1) and click 'DELETE' (2) to clear default files

Now that our file manager is clean, we need to create a new environment variable file (.env) to hold our database credentials and configuration keys.

Follow these steps to initialize the file creation:

1. Click the blue + CREATE NEW button at the top right of the file manager header (Indicated by arrow 1). This will expand a dropdown menu.
2. From the dropdown menu, select New binary file (Indicated by arrow 2).

Click '+ CREATE NEW' (1) and select 'New binary file' (2)

After clicking New binary file, a modal will prompt you to enter the name of the new file.

Follow these steps to deploy the file:

1. In the LABEL text box (Indicated by arrow 1), type exactly: .env (make sure to include the leading dot).
2. Click the blue DEPLOY button (Indicated by arrow 2) to create the file in your server root directory.

Type '.env' in LABEL box (1) and click 'DEPLOY' (2)

Now that the .env file is created, you need to open it and configure the database connection.

Follow these steps to edit the file:

1. Click the three dots (...) on the right side of the .env file row (Indicated by arrow 1).
2. Select the Edit Code option from the dropdown menu (Indicated by arrow 2).

Click the three dots (1) and select 'Edit Code' (2)

Paste the following environment variables template inside the file editor:

DEMO_MODE=false
MONGODB_URI=
                

Now, you need to upload the website project code archive to your Gadohost Cloud Storage.

Follow these steps to upload the file:

1. Click the grey UPLOAD button located at the top-right corner of the Cloud Storage interface (Indicated by arrow 1).
2. In the system file dialog that pops up, select the website zip package: VibeMatch-WebSite-v1.0.2 (Indicated by arrow 2).
3. Click the Open button at the bottom of the file dialog (Indicated by arrow 3) to start uploading the archive.

Click 'UPLOAD' (1), select the website zip package (2), and click 'Open' (3)

Once the upload is complete, you need to extract the website code files into your server root directory.

Follow these steps to extract the archive:

1. Click the three dots (...) on the right side of the VibeMatch-WebSite-v1.0.2.zip file row (Indicated by arrow 1).
2. Select the yellow Extract All option from the dropdown menu (Indicated by arrow 2).

Click the three dots (1) and select 'Extract All' (2)

To secure your application with HTTPS, you need to configure an SSL certificate for your domain.

Follow these steps to access SSL configuration:

1. Navigate to the Node.js apps section in the sidebar menu (Indicated by arrow 1).
2. On your app instance card, click the purple Manage button (Indicated by arrow 2) to open the control options.
3. Click the green SSL button in the bottom grid (Indicated by arrow 3) to start generating or installing your SSL certificate.

Select 'Node.js apps' (1), click 'Manage' (2), and click 'SSL' (3)

Before generating the free SSL certificate, you must ensure that your custom domain has been configured with the correct Gadohost name servers:

Follow these steps to generate your SSL certificate:

1. Locate your custom domain in the list (Indicated by arrow 1) and verify that it matches your app instance. Make sure the status badge shows yellow Pending (indicating the nameservers are pointed correctly).
2. Click the blue Generate SSL button on the right side of the domain card (Indicated by arrow 2) to request and apply your free Let's Encrypt SSL certificate.

Verify domain (1) and click 'Generate SSL' (2)

After setting up the environment variables and the SSL certificate, you need to restart the application instance to apply the changes.

Follow these steps to re-launch:

1. Go to the Node.js apps section in the sidebar menu (Indicated by arrow 1).
2. Click the blue Re-launch button on your app card (Indicated by arrow 2).
3. Wait about 5 minutes for the installation and build process to complete. You will see a progress bar indicating the status.

Select 'Node.js apps' (1) and click 'Re-launch' (2)

Once the build process is complete, the application status will change to indicate it is running successfully.

Follow these final steps:

1. Verify that the status badge at the top of the card shows green Ready (Indicated by arrow 1). Congratulations! The installation was successful.
2. Click the LIVE SITE PREVIEW link at the bottom of the card (Indicated by arrow 2) to open and test your live website immediately!

Confirm status 'Ready' (1) and click 'LIVE SITE PREVIEW' (2)

When you open your website installer for the first time, you need to verify your purchase.

Follow these steps:

1. Log into your Envato/CodeCanyon account and go to your Downloads page.
2. Click 'Download' next to VibeMatch and select 'License certificate & purchase code'.
3. Enter that Purchase Code into the input field and click Verify License.

Enter your Envato Purchase Code and Verify License

Next, the installer will verify the MongoDB connection you provided in the .env file.

Follow these steps:

1. Click the Test Connection button to check if the database is running properly.
2. If the connection is successful, the Next Step button will become active. Click it to proceed.

Test your database connection and proceed to the Next Step

Now configure the basic details of your application.

Follow these steps:

1. Enter your Website Name (e.g., VibeMatch).
2. Enter your full Site URL (e.g., https://vibematch.gadohost.com).
3. Click the Next Step button.

Enter your Site Name and URL

Finally, create the master administrator account for your platform.

Follow these steps:

1. Enter your desired Username.
2. Enter your Email Address.
3. Enter a secure Password and type it again in Confirm Password.
4. Click the Complete Installation button to finish the setup!

Fill in your Username, Email, and Password

To initialize Firebase services for your website, you must create a new project in the Google Firebase developer portal.

Follow these steps:

1. Navigate to the Firebase Console.
2. Click the card Get started with a Firebase project or Create a project (Indicated by the red highlight).

Access Firebase Console and click Create a project

Choose a name for your Firebase project to distinguish it in your developer dashboard.

Follow these steps:

1. In the Enter your project name field (Indicated by arrow), type your desired project name (e.g., VibeMatch).
2. Check both checkboxes (Indicated by the red boxes) to accept the Firebase Terms and confirm your business use.
3. Click the Continue button at the bottom (Indicated by arrow).

Enter your project name, check terms, and click Continue

Configure Google Analytics settings for your project to track user interactions and metrics.

Follow these steps:

1. Verify your Analytics location (Indicated by the box).
2. Check the Google Analytics terms checkboxes at the bottom (Indicated by the box).
3. Click the Create project button (Indicated by arrow) to initiate the workspace provisioning.

Select location, accept terms, and click Create project

Proceed through the AI Assistance recommendations during the project initialization.

Follow these steps:

1. Review the optional AI assistance features in your Firebase project.
2. Click the blue Continue button at the bottom (Indicated by the box and arrow).

Click Continue to proceed to project creation

Wait for Firebase to finish provisioning resources for your new cloud project workspace.

Follow these steps:

1. Once you see the green success message Your Firebase project is ready, click the blue Continue button to enter your project console dashboard.

Click Continue once the project is successfully created

To link your live website domain with Firebase, you must create a Web application instance within your project settings dashboard.

Follow these steps:

1. On your Firebase project overview dashboard page, click the circular Web (</>) icon (Indicated by the red box and arrow) to register your new web client app.

Click the Web icon () to create a new Web project application

Assign an identifier name to your web application registration.

Follow these steps:

1. In the App nickname text field (Indicated by the red box), type a name for your web app configuration (e.g., VibeMatch Web).
2. Click the blue Register app button (Indicated by the arrow).

Type your App nickname and click Register app

Firebase will generate a configuration keys object. This object connects your web pages to Firebase servers.

Follow these steps:

1. Locate the const firebaseConfig block inside the script tag (Indicated by the red box).
2. Copy this JavaScript config object block (from apiKey to measurementId).
3. Save this copied object safely in a local file on your machine, as we will paste these values into our website configuration panel.
4. Click the blue Continue to console button at the bottom.

Copy the firebaseConfig object details and save them locally

Configure project settings, keys, and security parameters in the management settings page.

Follow these steps:

1. Click the gear settings icon next to "Project Overview" in the left sidebar menu (Indicated by the red box and arrow).
2. Select Project settings from the menu options to load the settings dashboard.

Click the settings gear icon and go to Project Settings

Enable secure user login options (like Google, Facebook, etc.) inside the Authentication dashboard.

Follow these steps:

1. In the left sidebar menu under the "Build" category, click on Authentication (Indicated by the red box and arrow).

Select Authentication from Build sidebar menu

For Firebase authentication scripts to run securely on your custom domain name, you must authorize it in your project settings.

Follow these steps:

1. Go to the Settings tab in the Authentication dashboard.
2. Scroll down to Authorized domains.
3. Click the Add domain button.
4. Enter your custom domain address (e.g., yourdomain.com) (Indicated by the red box and arrow).
5. Click the blue Add button to save changes and authorize your website domain.

Authorize your website domain name in Authorized domains list