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, Pinterest, and YouTube. 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

User Login Details

Script Created Date:

Please check Live Preview:

Creative Author Portfolio:

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. PayPal, Stripe, and RazorPay Payment Methods
  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 images

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.

Update Note

You need to take the backup before update the script.

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).

images

3.2 Run Command "Cd file_name" (PixaSocial).

images

Step 4 Then install npm modules. Run command npm install

images

Step 5 Run command

If Setup on local server (localhost)

Step 5.1 Run command npm run dev

images

If Setup on live server

Step 5.1 Run command npm run build

images

Step 5.2 Run command npm start

images

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

images

images

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 .

images

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.

images

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.

images

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

images

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

images

Step 5 : After that click on the "users" collection

images

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

images

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.

images

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

images

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).

images

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

images

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

images

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

images

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

images

Step 9: Now add your database information.

images

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

images

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

images

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

images

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

images

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

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

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).

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

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.

images

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

images

Step 3 After login, click on Create App button.

images

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

images

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.

images

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"

images

Step 7 And the app is created in LinkedIN

Video on how to create LinkedIn App


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.

images

Step 2 After login, click on My Apps option.

images

Step 3 Then click on Create App button.

images

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

images

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

images

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

images

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

images

7.1 How to Setup Facebook login for Business


Step 1 Click on Setup button.

images

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.

images

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.

images

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,pages_manage_posts,pages_show_list,pages_read_engagement,business_management,instagram_basic,instagram_content_publish.

images

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.

images

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

images

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

Video on how to create Facebook App


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.

images

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.

images

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"

images

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.

Video on how to create Pinterest App


YouTube App Creation

How To Create App in YouTube

Step 1 First go the link https://console.cloud.google.com/ and login to your account, if you already have an account. Else create an account.


Step 2 Create a New Project, for that Click on Project dropdown. A popup will appear, click on NEW PROJECT option.

images

Step 3 Enter the details of the project like Project Name, Organisation, and location details. Then hit the Create button.

images

Step 4 You will be redirected to dashboard screen, here select the created project. Click on it.

images

Step 5 You will get the Project screen, containing the details of the selected project. Search the YouTube Data API V3 in the search bar and select it.

images

Step 6 Click on Enable button.

images

Step 7 After enabling the API, click on the OAuth consent screen option. Select the User Type as either Internal or External.

images

Step 8 Enter your app details like App name, support email, add logo, app domain and developer contact information. Then click the Save and Continue button.

images

Step 9 In Next step, you need to add scopes to the app. For that click on the "Add or Remove Scopes" button. A popup will appear, in which you need to select the following scopes :

/auth/userinfo.email, /auth/userinfo.profile, and /auth/youtube (search youtube in the filter)

After adding scopes click on Update button and Save and Continue.

images
images

Step 10 Add the test users, in this step and click "Save And Continue" button. After that you will the summary of the created app. From here click on the "Back To Dashboard" button.

images

Step 11 From here, you can Publish the app and confirm the verification process.

images

Step 12 Navigate to Credentials option >> Create Credentials >> Select OAuth Client ID.

images

Step 13 Select the Application type as Web Application. Add name, authorized Javascript origins, and redirect URIs. Then, hit the Create button.

For getting the Authorized Redirect URL, go to the next.config.js file in the code. In this file add the URL in GOOGLE_REDIRECT_URIS parameter in the following format domain_name/api/social (domain_name means Live_URL) Add this URL in the Authorized Redirect URL field

images
images

Step 14 You will get the client ID and Client Secret. Copy the key and paste in the next.config.js file.

images
images

Video on how to create YouTube App


Admin Dashboard

Admin Dashboard comes with the various backend settings to manage the platform.

DashBoard

Admin dashboard settings contain the counts of Total Posts, Total Scheduled, Total Published, Total Templates and Total Users.

images

Users

It will show the list of all users. The admin can also view, add, edit, delete the existing users.

images

On adding new user, admin can enter basic details, select user type as User or Template Creator, select plan and select user status as Active or Inactive

images

Templates

Using the templates setting, you can create new templates, edit, delete, view and change status of existing templates.

images

How to Create New Template

1. Click on "Create Template" Button and enter the template title, select the layout as Portrait, Square, Landscape and Custom Size.

images

2. An editor screen will appear containing various editing elements. You can customize your template with a user-friendly editor.

images

Settings : You can enter title, resize the template, select background and default colour.

Text : You can enter the text and can also customize font family, size, text alignment, colour, BG colour, and many more.

images

Image : You can add images, crop the image, apply image filter, customize image using editor and can also create a group.

images

Shapes : In this setting you can select the frames and shapes that was added in the Assets section. With frames option image masking can be accomplished.

images

Filter : With this option, you can filter the image.

images

Drawing : Drawing setting allows you to draw a line or any shape using pencil option.

images

Assets

This setting will show the list of assets. Admin can also filter Assets by Category, add new Assets, Assets Category, and Frames.

images

Add Asset

To add new asset, click on "Add New Asset" button. A popup will appear where you can upload image (supports jpeg, svg, and png format), enter tag and select category.

Note: The added assets will appear under "Shapes" setting of the editor.

images

Category

It will show the list of the Assets Categroy. Admin can add new category, edit or delete the existing categories, active or deactive them.

images

New Category You can add new asset category by clicking on the "Add New Category" button.

images

Frames

It will show the list of the Frames. Admin can add new frames, view, delete and active or deactive them.

images

Add New Frames To add new frame, click on "Add New Frame" button. A popup will appear where you can upload image (supports jpeg and png format), and enter tag .

images

Plans

Plans shows the list of created plans. Admin can create new plan, view transaction list, and deactivate the existing plans.

images

Create Plan - Admin can enter plan name, Plan pricing, Post per month, free trial period, description, select plan period (as Monthly or Yearly), post type (as Single or Multiple), allow for AI Text generation, AI Image Generation, and Editor Access.

images

Integrations

Integrations settings consist of Payment Settings and SMTP Settings.

Payment Settings - With Payment Settings, you can enter PayPal details or Stripe Details, razorpay details. You need to select any one the payment gatways and enter their detials to create a plan.

Note- If you change the payment gateway, the existing user data will not be retrieved since it is tied to recurring payments. As a result, the data will not be updated..

images

SMTP Settings - Admn can enter SMTP details for sending email.

images

Admin Profile

Here admin will get the option of profile Settings and the Admin Settings

Profile Settings - In this option, the admin can update their details, including profile image, contact information, name.

images

Admin Settings - In this option, the admin can customize their settings by adding their own logo and favicon, changing the dashboard colors, updating the title, and more.

images

User Dashboard

Dashboard

User dashboard settings contain the counts of Total Posts, Total Scheduled, Total Published, Facebook Post, Instagram Post, LinkedIn Post, and Pinterest Post.

images

Create Post

1. Enter the title, upload image/video and click on Generate Caption button. After that, click on Add Post to add more posts, for next step, click on Next Button or hit Save as Draft to save the current post in the Draft section.

images


2. On clicking Next button, you will be redirected to the Social Media Accounts page where you can connect the Facebook, Instagram, LinkedIn and Pinterest account and select the desired account. You can either schedule the post or can post at a time. You can see the scheduled post on Calendar.

It also indicates the platforms, the post is Compatible with. Like the post is compatible with Facebook and LinkedIN, as depicted in the image below.

images

3. When you click the Schedule button, you need to select the Date/Time and Timezone. After that hit the Schedule button.

images

4. You will be redirected to the Calendar where you can see the scheduled post.


Calendar

With this setting you can check the scheduled posts. You can view the failed posts, delete or view the posts.

images

Image Creator

It will show the list of the images and templates. You can also edit or delete the existing images or can create new image.

images

Create Image Click on Create Image button and enter the title, select the layout. On hitting the continue button you will be redirected to editor screen. User can customize the image using editing elements like Text, Filters, Images, Shapes, Drawing by Pencil.

images

Integrations

This setting will allow you to add social media account like Facebook, Instagram, LinkedIn, Pinterest, and YouTube.

images

Drafts

This setting show the list of the posts saved as a Draft. User can view, edit or delete the posts.

images

Plan

In this setting, users can view their purchased plans and also purchase new ones

images

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.