Introduction

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

PixaSocial is a user-friendly Social Media Posts Planner App that leverages the power of React JS technology. This versatile tool provides both admin and user dashboards, ensuring a seamless and enjoyable editing experience.

With PixaSocial, you can effortlessly create and schedule posts for various social media platforms, including Facebook, LinkedIn, Instagram, and Pinterest. The user-friendly dashboard simplifies the process of managing and organizing your content.

The admin dashboard offers comprehensive control over users, templates, and assets, while the built-in editor allows you to craft visually appealing images and posts. You have the flexibility to customize every aspect of your content, including text, images, freehand drawing, filters, and the addition of shapes, resulting in captivating and stunning posts.

In addition to the admin dashboard, PixaSocial also features a remarkable user dashboard, ensuring a smooth journey for users. Here, individuals can create their own posts, images, and seamlessly integrate their desired social media accounts.

Unlock Your Social Media Potential with PixaSocial : Plan, Create, and Shine!

Demo Login Details

Admin Login Details

• URL https://pixasocial.pixelnx.com/
• Email : admin@pixasocial.com
• Password : Admin2024@#

User Login Details

• URL https://pixasocial.pixelnx.com/
• Email : testuser@pixasocial.com
• Password : TestUser2024@#

Features

There are more than enough features squeezed in this script like

Features of the admin

1. Dashboard
2. User manage and listing
3. User Listing
4. Templates Management
5. Create and customize post
6. Create Assets
7. Create Assets Category
8. Create Frames
9. Manage Plans
10. Add Stirpe or PayPal Payment Details
11. SMTP details
12. View Transaction List
13. Add image or video in the post
14. Image Masking (Beta Version)
15. Element Grouping
16. Post Analytics

Features of the User Dashboard

1. Dashboard
2. Create Post
3. Social Media Account integration
4. Schedule Post
5. Post Calendar
6. Image Masking (Beta Version)
7. Add image or video in the post
8. View failed post notification in the calender
9. View social media compatibility indicator for posts
10. Element Grouping
11. Image Creator

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

3.2 Run Command "Cd file_name" (PixaSocial).

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

Live URL : Base URL/ Domain URL

Jwt token details : Token Secret and Token Life

S3 Bucket Details : AWS bucket details: Secret Access key, Access Key ID, Region, Max Upload Size, Bucket Name, and S3 Path

ChatGPT API Details : OpenAI API key

mongodburl : MongoDB connection URL

Facebook App Details : FACEBOOK_APP_ID and FACEBOOK_SECRET_KEY

Linkedin App Details : LINKEDIN_CLIENT_ID and LINKEDIN_SECRET_KEY

Pinterest App Details : PINTEREST_APP_ID and PINTEREST_SECRET_KEY

Mandrill App Details : MANDRILL_KEY and MANDRILL_EMAIL

Note If you have Ubuntu server then add prod in the Environment field and your Ubuntu server must have chromium. In case of Windows server add "dev".

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

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, "pixasocial" .

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

1. users (Shown in the screenshot)

Note : For above collection "pixasocial_" 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 PixaSocial.users.json file click here

Step 7 : Similary, create a new colloection named "fonts" and import the fonts data in the "fonts" collection. To download the PixaSocial.fonts file click here

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

• Email : admin@pixasocial.com
• Password : Admin2024@#

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.

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

For Example :

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

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

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

LinkedIn App Creation

How To Create App in LinkedIn

Step 1 First go the link https://developer.linkedin.com/ and login to your account, if you already have an account. Else click on Sign Up button to create a new account.

Step 2 Login to your developer account, if you already have a developer account. Else click on Join Now to create a new account.

Step 3 After login, click on Create App button.

Step 4 You will be redirected to screen. Here enter the basic information like App name, your company's linkedin page URL, Privacy policy URL, add app logo and after selecting agreement check box, click on Create App button

Step 5 After that, enter the two products in your App Share on LinkedIn and Sign In with LinkedIn using OpenID Connect . To add them click on Request Access button.

Step 6 Then Navigate to Auth screen. Here you will see the Application Credentials : Client ID and Client Secret.

Then add the redirect URL for your app by clicking on Edit icon.

The redirect URL should be of the following format : Your domain live URL + "/social/linkedin"

Step 7 And the app is created in LinkedIN

Facebook App Creation

How To Create App in Facebook

Step 1 First go the link https://developers.facebook.com/ and login to the Facebook account.

Step 2 After login, click on My Apps option.

Step 3 Then click on Create App button.

Step 4 Select the last option "Other" and hit the Next button.

Step 5 Then select the App Type as Business and click "Next" button.

Step 6 Enter the details like app name, email, select the account and click "Create App" button.

Step 7 Now we have to add three products to App Instagram Graph API, Webhooks, and Facebook Login for Business

7.1 How to Setup Facebook login for Business

Step 1 Click on Setup button.

Step 2 Enter the Valid OAuth Redirect URIs, select URL in Allowed Domains for the JavaScript SDK (these will be your live URL) and click on Save Changes button.

Step 3 After that go to App Settings >> Basic. Here, enter the basic information like Name, App Domains (Domain URL), Privacy Policy URL, Terms of Service URL, app icon, etc. Hit the Save Changes button once you added the details.

Note This contains App ID and App secret key so please copy it and save for further usage.

Step 4 Then we need to provide some permissions and features for our app. For that Go to App Review >> Permissions and Features. It contains various permissions and you need to click on "Request Advanced Access" button to allow the permission.

Following permissions are required for app : email, manage_fundraisers, read_insights, publish_video,catalog_management,pages_manage_cta, pages_manage_instant_articles,pages_show_list, read_page_mailboxes, ads_management, ads_read,business_management, pages_messaging, pages_messaging_subscriptions, instagram_basic, instagram_manage_comments,instagram_manage_insights, instagram_content_publish, leads_retrieval, instagram_manage_messages, page_events,pages_read_engagement, pages_manage_metadata,pages_read_user_content,pages_manage_ads, pages_manage_posts, pages_manage_engagement.

Now, the Facebook login for Business product has been added.

7.2 How to Setup Instagram Graph API

Step 1 Go to the Dashboard >> Instagram Graph API. Click on SetUp button.

You will be redirected to this screen and your Instagram Graph API product has been setup.

7.3 How to Setup Webhooks

Step 1 Go to the Dashboard >> Webhooks. Click on SetUp button.

You will be redirected to this screen and your Webhooks has been setup.

Step 8 You can see the added products by clicking on Dashboard. You can customize them by clicking on Settings button.

Step 9 To make the app live, change the App Mode toggle to the Live. Here you need to add some information about your app and facebook will review your app and it will take couple of days to approve.

Note Please make sure that privacy policy and terms and Services URL should be of following format.

Privacy Policy : your domain Live Url + /policy/privacy-policy

Term and Service : your domain Live Url + /policy/terms-and-services

Pinterest App Creation

How To Create App in Pinterest

Step 1 First go the link https://developer.pinterest.com/ and click on My Apps option.

Step 2 After login you will be redirected to Dashboard. Click on Connect App button to create new app.

Step 3 Enter the basic information like add app icon, App name, Company namr, Company website or App link, Privacy policy, App purpose. Then select option 1 in Developer purpose, Option 4 - Pinner App in Use Cases and Option 1 and 2 - Pinners and Creators in Audience. After adding the details hit the Submit button.

Note You will see the created app in the dashboard screen. Pinterest team will review your app and once the review has been done, Pinterest team will provide you the trial access.

Step 4 Once you will get the trial access, click on Manage option.

Step 5 Here you will get App ID and App Secret key. Please make sure to save them. After that add the Redirect URL.

The redirect URL should be of the following format : your domain live url+ "/api/social-pintrest"

Step 6 Once the Pinterest team will provide you the Trial access, you will get Upgrade button. Click on the button, enter all the information and Submit the app to get the approval access.

Help And Support

In order to receive a technical support assistance, you need to have a valid purchase code. To get the code, please navigate to your Codecanyon "Downloads" page and click on the plugin download link.

After getting the Purchase code, please follow the steps mentioned on the link click Here to get your product verified. And then share your Purchase code and token ID with the support team.

If you have any questions that are beyond the reach of this help file, feel free to contact us. We will respond as soon as possible (within 24 – 48 hours, usually faster). We are open from 9:30am to 6:30pm (IST), from Monday till Friday.

NOTE: As authors of this script we do provide support only for the script-related features.

Outro

Thank you for your purchase. If you have any questions that are beyond the scope of this help file, please contact us through support@pixelnx.com

Once again, thank you so much for purchasing this script. As I said at the beginning, I'd be glad to help you if you have any questions relating to this script. No guarantees, but I'll do my best to assist. If you have a more general question relating to the script, you might consider visiting the forums and asking your question in the "Item Discussion" section.