Introduction

PixaURL - Organize your social handles in Just a single tap.

PixaURL - Introducing PixaURL, the platform that consolidates and simplifies all your social links. Streamline your online presence and enhance productivity with our smart link solution.

PixaURL is a user-friendly portfolio editor tool built with the power of React JS technology. This tool is packed with over 20 pre-designed templates, and many more. Its simplicity and ease of use will enhance your editing experience and make your work an absolute pleasure.

PixaURL allows you to create a custom, personalized page that stores all the prominent links you wish to share with your viewers.

PixaURL provides a single location to concentrate your follower’s attention on your every social media account. The creative templates available allow you to customize your profile, giving it a unique touch that represents your personality or brand. You can edit the content and add the links to your website or social media handles. It helps you keep in touch with your followers/subscribers for longer.

The editor comes with the admin dashboard contains various settings to manage and regulate the functionalities. Additionally, the admin has the ability to add new users, enhancing collaboration and teamwork.

Create Your Own Portfolio in Just a Single Tap with PixaURL. Experience the convenience and creativity this tool has to offer, and take your online presence to new heights with PixaURL.

Demo Login Details

Admin Login Details

• URL https://app.pixaurl.com/
• Email : demoadmin@pixaurl.com
• Password : admindemo@123

User Login Details

• URL https://app.pixaurl.com/
• Email : demouser@pixaurl.com
• Password : demouser@123

Features

There are more than enough features squeezed in this script like

Features of the admin

1. Dashboard
2. Links Analytics
3. User Listing
4. Users Management
5. Templates Management
6. Templates Categories Management
7. Themes Management
8. Social Icons Management
9. customize Icons

Features of the App

1. Dashboard
2. Links Analytics
3. Links Management
4. Profile Management
5. Pre-made Templates
6. Customize Templates with your favorite colors
7. Associate globally
8. Bring in smart wealth
9. Share your Ideas with the world
10. Device Friendly/Responsive
11. User Friendly
12. 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 (PixaURL)file that you have received from the Codecanyon. Inside that you will get Main File and Code.

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" (PixaURL).

3.2 Run Command "Cd file_name" (PixaURL).

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

AppURLLive : App base URL

ApiUrlLive : Api base URL

s3URL : AWS bucket base URL

tinymce_key : TinyMCE API key

mongodburl : MongoDB connection URL

dbtblPrefix : Database collection prefix

SESSION_SECRET : This will use in the JWT authentication

SITE_TITLE : App Title name

Mandrill_key : Mandrill API key

AWS API Details : bucket name, accessKeyId, secretAccessKey, region

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

Note: How to MongoDB connection URL Check here .

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

Demo Import

Note

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, "pixaurl" shown in the screenshots.

There is initially only one collection (users) in the database. Now we have to create this collection to import data.

1. users (Shown in the screenshot)

2. pixaurl_templates

3. pixaurl_templatepages

4. pixaurl_templatesections

5. pixaurl_templatecategories

6. pixaurl_socialtypes

7. pixaurl_socialpacks

Note : For above three collections "pixaurl_" 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 : After that click on the "users" collection

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

Step 7 : Similarly, you have to import the other collection data too.

To import templates collection data. Please. click here

To import templates pages collection data. click here

To import templates section collection data. click here

To import template categories collection data. click here

To import socialtypes collection data. click here

To import social packs data. click here

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

• Email : demoadmin@gmail.com
• Password : admindemo123

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://pixaurl:<password>@cluster0.nsuha2x.mongodb.net/

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

For Example :

Username = pixaurl, password = pixausertest123, Database name : = pixaurl

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

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

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

Now click here to import pre-made templates

User Dashboard