Introduction

BookingHub - Simplify Social Media Scheduling with BookingHub - Your Ultimate Planner App.

BookingHub is a user-friendly Script that leverages the power of React JS technology. This versatile tool provides both admin and user dashboards, ensuring a seamless and enjoyable editing experience.

A booking hub script is designed to facilitate and manage booking system for various services. These services can include hotel bookings, restaurant reservations, event ticketing, appointment scheduling, and more.

Our platform supports Stripe and PayPal payment methods, allowing administrators to tailor subscription plans to diverse preferences. Booking Hub Script ensures a smooth and adaptable payment process, enhancing user satisfaction.

Along with this it has an admin dashboard for businesses to manage bookings, view analytics, and adjust settings. While creating user, admin can assign a plan and allow user to access the plan features without making the payment, just by keep an option "Is Payment required for this plan" as unchecked.

With User dashboard, user can manage their campaigns, registration on the campaign, integrate payment method and autoresponders and many more. Users gain a comprehensive view of their subscription landscape, easily accessing details of purchased plans and exploring available options.

Where convenience meets customization – welcome to the ultimate booking hub!

Demo Login Details

Admin Login Details

• URL https://bookinghub.pixelnx.com
• Email : demoadmin@bookinghub.com
• Password : demoadmin@123

User Login Details

• URL https://bookinghub.pixelnx.com
• Email : demouser@bookinghub.com
• Password : demouser@123

Features

There are more than enough features squeezed in this script like

Features of the admin

1. Dashboard
2. Cloud Storage
3. AWS Integration
4. Google Cloud Integration
5. User manage and listing
6. Can assign plan to user
7. Admin can allow user to access features of the plan without making payment
8. Plans Management
9. Manage payment Methods
10. Manage Profile, SMTP, and Email Content Settings
11. Show the deleted users in Trash

Features of the User Dashboard

1. Dashboard
2. Can add multiple languages for Widget
3. Enable RTL
4. Create campaigns
5. Registrations of the campaign type
6. Manage Profile, Billing, and Subscription Settings.
7. Manage Email Settings
8. Show the deleted campaign in Trash

Features of the Script

1. User Friendly
2. Responsive
3. Browser Compatible
4. Lightweight

Like my work don't forget to rate it

Script Installation

Note

1. Before installing the script please make sure that you have nodejs installed on your server and for Database MongoDB is neccessary.

2. You can check the node version from the terminal/cmd just type node -v.

How To Install Script

Step 1 Extract the (BookingHub)file that you have received from the Codecanyon. Inside that you will get code file and documentation

Step 2 Open the terminal or Command Line Prompt (cmd) on the system.

Step 3 Navigate to the folder where you have extracted the file through commands.

3.1 Run Command "Cd Extract_file_location" (BookingHub).

3.2 Run Command "Cd file_name" (BookingHub).

Step 4 Then install npm modules. Run command npm install

Step 5 Run command

If Setup on local server (localhost)

Step 5.1 Run command npm run dev

If Setup on live server

Step 5.1 Run command npm run build

Step 5.2 Run command npm start

Step 6 Then Navigate to next.config.js file and then update the following mention fields below

If Setup on local server (localhost)

App URL : Set the variable AppURLLocal.

Api URL : Set the variable ApiUrlLocal (Domain-url/api).

Database URL : Set the variable dbUrlLocal.

If Setup on live server

App URL : Set the variable AppURLLive.

Api URL : Set the variable ApiUrlLive (Domain-url/api).

Database URL : Set the variable dbUrlLive.

App Logo : Set the variable LOGO_IMG (provide path of logo image).

jwt token - user session : NEXTAUTH_SECRET (any string to generate jwt token)

metadata : APP_NAME, META_KEYWORDS, APP_DESCRIPTION and META_AUTHOR

Autoresponder keys : AWEBER_CLIENT_ID, AWEBER_CLIENT_SECRET, CONSTANT_CONTACT_CLIENT_ID and CONSTANT_CONTACT_CLIENT_SECRET

Step 7 To add the widget form in your site, change the host URL with AppURLLive in the widget-form.js file.

Step 8 For getting widget preview, change the localhost:3000 with domain URL in the widget_preview.html file.

Step 9 After that, open the Mongo DB and paste the "MONGODB_CONNECTION_URL" in the field.

Note: How to get MongoDB Connection URL Check here .

Step 10 To Import the demo data. Please go to the import section. click here

Demo Import

Step 1 : Open Mongodb compass and past Mongodb connection URL, and then connect.

Step 2 : Please click on the database name. In our case is, "BookingHub" .

There is initially only one collection (users) in the database.

1. users (Shown in the screenshot)

Note : For above collection "BookingHub_" prefix is used but please match and use the same prefix as you added in the next.config.js file

Note : Do not use any prefix for users collection.

Step 3 : Click on the "Create collection" option.

Step 4 : Enter the collection name. then click the "create collection button" .

Step 5 : Import the user data in the users collection. To download the BookingHub.users.json file click here

2. emailNotifications (Shown in the screenshot)

Note: Same as users collection, create another collection emailNotifications.

Step 6 : Import the data in the emailNotifications collection. To download the BookingHub.emailNotifications.json file click here

3. templates (Shown in the screenshot)

Note: Same as users collection, create another collection templates.

Step 7 : Import the data in the templates collection. To download the BookingHub.templates.json file click here

Step 8 Once the demo data has been imported successfully, then type the domain-name/login/ on browser's address bar, like : https://domain-name.com/login and you will get login page of the admin panel. For login use the credentials mentioned below

Admin details
• Email : admin@bookinghub.com
• Password : admin@123

User details
• Email : testuser@gmail.com
• Password : test@123

Note:For changing the role of any user to admin, set the value of variable role from 0 to 1.

Mongodb Setup

1. How do you get MongoDB connection URL.

Step 1 : Sign Up in MongoDB, or if you already have an account, then Login.

Step 2 : Login on Mongodb, then you will see the below screen. At this screen, you click on the first "visit MongoDB Altas" option.

Step 3 : Now at this step, you have to create a database. Please click on "Build a Database," as shown in the screenshot.

Step 4 : After that, select the free plan and click the Create button for the database. (later, you can upgrade your database plan as needed).

Step 5 : Firstly, create a user for the database at this step, update the details and create the user.

Step 6: Once you create a user, you will see this screen.

Step 7: Now click on the database showing in the left sidebar. Then click on the "Browse Collections" option.

Step 8: Click on the "Add My Own Data" option at this step.

Step 9: Now add your database information.

Step 10: Once the database has been created, you will get this screen.

Step 11: Now click on the "database" menu, then click on the "connect" option.

Step 12 : In this model, please click on the compass option.

Step 13 : In this model, you will see the connection URL. Copy this URL.

Step 14 : Now you will have your MongoDB connection URL.

mongodb+srv://BookingHub:<password>@cluster0.nsuha2x.mongodb.net/

In this URL you have to add your username, password, and database name.

For Example :

Username = BookingHub, password = BookingHub@123 , Database name = BookingHub

The final MongoDB connection URL will be like this (Please update the correct details in this connection URL).

mongodb+srv://BookingHub:BookingHub@123@cluster0.nsuha2x.mongodb.net/pixaurl?retryWrites=true&w=majority

You have to add the MongoDB connection URL to the next.config.js file.

How to Edit Content of Frontend Website

1) Navigate to public >> home folder. Inside home folder you will get index.html file.

2) Open this file on any editor like Visual Studio Code or NotePad++. You can change the content of site as needed, by editing the index.html file.

3) To change images, upload your image under the document/assets >> image folder.