DEV Community: spiritupbro

how to create an end to end encrypted server data transfer

spiritupbro — Thu, 01 Dec 2022 22:08:17 +0000

To create an end-to-end encrypted server data transfer, you can use a combination of public-key cryptography and symmetric-key cryptography. This will allow you to securely transfer data from the client to the server, and vice versa, without either party knowing the decryption key.

Here is an example of how you can use public-key cryptography and symmetric-key cryptography to create an end-to-end encrypted server data transfer in Node.js:

const crypto = require('crypto');

// Generate a pair of public and private keys for the server
const { publicKey, privateKey } = crypto.generateKeyPairSync('rsa', {
  modulusLength: 2048,
  publicKeyEncoding: {
    type: 'spki',
    format: 'pem'
  },
  privateKeyEncoding: {
    type: 'pkcs8',
    format: 'pem'
  }
});

// Send the server's public key to the client
sendServerPublicKeyToClient(publicKey);

// On the client-side, generate a random key for encrypting the data
const key = crypto.randomBytes(32);

// Encrypt the data using the key
const data = 'your data goes here';
const encryptedData = crypto.createCipher('aes-256-cbc', key).update(data, 'utf8', 'hex');

// Encrypt the key using the server's public key
const encryptedKey = crypto.publicEncrypt(publicKey, key);

// Send the encrypted data and the encrypted key to the server
sendEncryptedDataAndKeyToServer(encryptedData, encryptedKey);

// On the server-side, decrypt the key using the server's private key
const key = crypto.privateDecrypt(privateKey, encryptedKey);

// Decrypt the data using the key
const decryptedData = crypto.createDecipher('aes-256-cbc', key).update(encryptedData, 'hex', 'utf8');

In this example, the server generates a pair of public and private keys, and it sends the public key to the client. The client generates a random key, encrypts the data using the key, and then encrypts the key using the server's public key. The client sends the encrypted data and the encrypted key to the server. The server uses its private key to decrypt the key, and then uses the decrypted key to decrypt the data.

This way, neither the client nor the server knows the decryption key, because the key is encrypted using the server's public key, and only the server has the private key that can be used to decrypt it. This provides end-to-end encryption of the data, because the data is encrypted on the client-side using a key that is only known to the client, and it is decrypted on the server-side using a key that is only known to the server.

Please stop using freelancer.com

spiritupbro — Mon, 21 Jun 2021 23:55:22 +0000

this platform is a scam you can take a look at this please remove freelancer.com https://www.complaintsboard.com/freelancercom-b102094#c1283956 , i don't know why this site still gain so much traction please use other platform other than this or find a remote job somewhere else other than this site and please share the words so that people doesn't end up like me thank you

IBM Auto AI Predict Early Stage Diabetes - Part 4

spiritupbro — Sun, 02 May 2021 15:16:23 +0000

Video Demo

Website URL

https://diabetes-bucket.s3-web.jp-tok.cloud-object-storage.appdomain.cloud

IBM Auto AI Predict Early Stage Diabetes - Part 3

spiritupbro — Sun, 02 May 2021 15:16:13 +0000

Connecting frontend to IBM Auto AI Deployment

Now after finish creating a model, what we need to do is, we need to connect that model to our frontend, so user can try without the hassle of running the model in jupyter notebook for example, IBM Auto AI make it easy for us to connect to our model through the deployment that we create earlier. We can just call the deployment through API URL then we can get the result immediately. This remove the hassle of deploying an AI model. Now let's go to the space where our deployment is in our case my space name is diabetes space click on that.

After that we need to click on our deployment

You can see that we get our API URL there that we can use to predict our data and some of the code snippet that we can use to call programmatically

Before we can use this API URL we need an API KEY to do that go to cloud.ibm.com, then login there, then click Manage > Access (IAM)

Click on Api Keys

Create an IBM Cloud Api Key

Save the key after creating it

After that let's try to call our API using a simple curl, first run this command :

curl --insecure -X POST --header "Content-Type: application/x-www-form-urlencoded" --header "Accept: application/json" --data-urlencode "grant_type=urn:ibm:params:oauth:grant-type:apikey" --data-urlencode "apikey=$API_KEY" "https://iam.cloud.ibm.com/identity/token"

Change the $API_key with the api key that you got earlier, you will then get something like this :

You can use this access token to receive your data via api request to our model let's try another curl command :

curl -X POST --header "Content-Type: application/json" --header "Accept: application/json" --header "Authorization: Bearer $IAM_TOKEN" -d '{"input_data": [{"fields": [$ARRAY_OF_INPUT_FIELDS],"values": [$ARRAY_OF_VALUES_TO_BE_SCORED]}]}' "https://jp-tok.ml.cloud.ibm.com/ml/v4/deployments/9567b9b7-f5a6-4428-a73b-3a7065c37f4b/predictions?version=2021-04-30"

Replace $IAM_TOKEN with the access token that we got earlier, replace the $ARRAY_OF_INPUT_FIELDS with the input column like age,gender, etc. And for the values you can add the more than one value to be scored like [[20,'Male'],[12,'Female']] you can add as much $ARRAY_OF_VALUES_TO_BE_SCORED as you want, and the most important thing you need to fill in all the possible fields, after you run it in terminal it will look like this :

As you can see we got the result JSON prediction is the result that the model come up with and for the field of probability it's how much confidence the model is the left array is not confidence percentage and the right side is the confidence so if it says [0.3,0.7] then it has 0.7 confidence or if we make it percentage it has 70% confidence which we consider very low we want our model to be at least 90% up confidence, but now because of this we can understand how our model work via web service now we can create some simple page to automate the prediction using a simple form, now let's create an IBM Cloud function to call our model via web service

Create an IBM Cloud Function

Follow instruction here to install IBM cli we need this one so that we can deploy our cloud function to ibm cloud. After you install IBM Cli make sure you login using ibmcloud login command, after that run this command below one by one :

ibmcloud target -r <region code>
ibmcloud target -o <org> -s <space>
ibmcloud plugin install cloud-functions
ibmcloud wsk property get --auth

You can see your <region code> , <org>, and <space> in the cloud.ibm.com and click Manage > Account > Cloudfoundry Orgs, now we gonna install serverless cli to upload our function much more easier go ahead and run this command in your command line :

npm install -g serverless

Now go to the root of your folder and type this command :

serverless create --template openwhisk-nodejs --path functions
cd functions

Now after you go to functions folder install this dependency :

yarn add axios
yarn add -D serverless-dotenv-plugin serverless-openwhisk

Then open serverless.yml and copy paste this code :

service: functions
useDotenv: true

provider:
  name: openwhisk

functions:
  autoai:
    handler: handler.autoai
    parameters:
      api_key: ${env:api_key}
    events:
      - http: POST /autoai

# extend the framework using plugins listed here:
# https://github.com/serverless/plugins
plugins:
  - serverless-openwhisk
  - serverless-dotenv-plugin

After that open handler.js and copy paste this code as well:

'use strict';
const axios = require("axios")

async function autoai(param) {
  const API_KEY = param.api_key;
const params = new URLSearchParams()
params.append('grant_type', 'urn:ibm:params:oauth:grant-type:apikey')
params.append('apikey', API_KEY)


const config = {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}
const result=await axios.post("https://iam.cloud.ibm.com/identity/token", params, config)

  const token=result.data.access_token
  const configs = {
    headers: {
      "Accept": "application/json",
      "Authorization": "Bearer " + token,
      "Content-Type": "application/json;charset=UTF-8"
    }
  }
  const fields=["Age","Gender","Polyuria","Polydipsia","sudden weight loss","weakness","Polyphagia","Genital thrush","visual blurring","Itching","Irritability","delayed healing","partial paresis","muscle stiffness","Alopecia","Obesity"]
  const value=[param.age,param.gender,param.polyuria,param.polydipsia,param.sudden_weight_loss,param.weakness,param.polyphagia,param.genital_thrush,param.visual_blurring,param.itching,param.irritability,param.delayed_healing,param.partial_paresis,param.muscle_stiffness,param.alopecia,param.obesity]
  const payload={"input_data": [{fields, "values": [value]}]}
  const res=await axios.post("https://jp-tok.ml.cloud.ibm.com/ml/v4/deployments/9567b9b7-f5a6-4428-a73b-3a7065c37f4b/predictions?version=2021-04-30",payload,configs)
  return {data:res.data}

}

exports.autoai = autoai;

This javascript code above is to communicating with our endpoint safely so we don't show our api key through the frontend instead we encapsulate it into ibm cloud function, after that create a .env file and copy paste your api key there :

api_key=<ibm cloud api key>

After you done all of the step above run this command to deploy :

ibmcloud wsk property get --auth
serverless deploy

Wait until you get endpoint like this :

After you get the endpoint you can try if that endpoint works using tools like postman just like below:

If you got prediction results then you're successfully deploy your ibm cloud function

Creating our frontend

Get some template like this one for example and open the index.html go to the bottom and add new <script> tag like below before <body> tag like below:

<script>

    new bootstrap.Tooltip(document.getElementById('tooltip-obesity'), {
      boundary: 'window'
    })
    new bootstrap.Tooltip(document.getElementById('tooltip-alopecia'), {
      boundary: 'window'
    })
    new bootstrap.Tooltip(document.getElementById('tooltip-muscle_stiffness'), {
      boundary: 'window'
    })
    new bootstrap.Tooltip(document.getElementById('tooltip-partial_paresis'), {
      boundary: 'window'
    })
    new bootstrap.Tooltip(document.getElementById('tooltip-delayed_healing'), {
      boundary: 'window'
    })
    new bootstrap.Tooltip(document.getElementById('tooltip-irritability'), {
      boundary: 'window'
    })
    new bootstrap.Tooltip(document.getElementById('tooltip-itching'), {
      boundary: 'window'
    })
    new bootstrap.Tooltip(document.getElementById('tooltip-visual_blurring'), {
      boundary: 'window'
    })
    new bootstrap.Tooltip(document.getElementById('tooltip-genital_thrush'), {
      boundary: 'window'
    })
    new bootstrap.Tooltip(document.getElementById('tooltip-polyphagia'), {
      boundary: 'window'
    })
    new bootstrap.Tooltip(document.getElementById('tooltip-weakness'), {
      boundary: 'window'
    })

    new bootstrap.Tooltip(document.getElementById('tooltip-sudden_weight_loss'), {
      boundary: 'window'
    })
    new bootstrap.Tooltip(document.getElementById('tooltip-polydipsia'), {
      boundary: 'window'
    })
    new bootstrap.Tooltip(document.getElementById('tooltip-polyuria'), {
      boundary: 'window'
    })
    async function getPredictions() {
      const req = {
        "age": Number(document.getElementById("age").value),
        "gender": document.getElementById("gender").value,
        "polyuria": document.getElementById("polyuria").value,
        "polydipsia": document.getElementById("polydipsia").value,
        "sudden_weight_loss": document.getElementById("sudden_weight_loss").value,
        "weakness": document.getElementById("weakness").value,
        "polyphagia": document.getElementById("polyphagia").value,
        "genital_thrush": document.getElementById("genital_thrush").value,
        "visual_blurring": document.getElementById("visual_blurring").value,
        "itching": document.getElementById("itching").value,
        "irritability": document.getElementById("irritability").value,
        "delayed_healing": document.getElementById("delayed_healing").value,
        "partial_paresis": document.getElementById("partial_paresis").value,
        "muscle_stiffness": document.getElementById("muscle_stiffness").value,
        "alopecia": document.getElementById("alopecia").value,
        "obesity": document.getElementById("obesity").value
      }
      const url = "https://service.eu.apiconnect.ibmcloud.com/gws/apigateway/api/9c5ccd90800a3bc3be127de5ba340d693f440403b4ee125b7c6551c73e473b5e/autoai";
      const rawResponse = await fetch(url, {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(req)
      });
      const { data } = await rawResponse.json();
      const { predictions } = data
      const [content] = predictions

      document.getElementById("diagnosed").innerText = content.values[0][0]
      document.getElementById("probability").innerText = content.values[0][1][1] * 100 + "%"
      document.getElementById("prevent-diabetes").style.display = "block"
    }
    //loading-diagnose
    //button-check
    const diagnoseBox = document.getElementById("diagnose-box")
    document.getElementById("predict").addEventListener("click", async function (event) {
      document.getElementById("button-check").style.display = "none"
      this.disabled = true

      document.getElementById("loading-diagnose").style.display = "flex"
      document.getElementById("prevent-diabetes").style.display = "none"
      diagnoseBox.style.display = "none";
      event.preventDefault()
      await getPredictions()
      this.disabled = false
      diagnoseBox.style.display = "block";
      document.getElementById("button-check").style.display = "flex"
      document.getElementById("button-check").style.justifyContent = "center"
      document.getElementById("loading-diagnose").style.display = "none"
    });
  </script>

This script is used to call our IBM Cloud function endpoint and get the prediction data, you can get the full code here it will look like this gif image below if you successfully implemented auto ai to your website :

Upload our website to IBM COS

So in order for other user to be able to use our website we need to serve our website in the cloud luckily IBM has IBM COS, which is an object cloud storage which we can use to serve our website as static website, so that other people can get to use our prediction model in order to do that create an IBM COS service

After that open that IBM COS service and create bucket we can then scroll and click Host static website

Type on the index document index.html like this because we want to serve our website in index.html only

After that skip the upload file, and test, and then go to your terminal or command prompt and install rclone using this, after that click on service credentials and click on new credential

Named it whatever you want and click on Include HMAC Credential then click add

Copy paste your credential into a text editor like notepad and you will get something like this:

Now go to your terminal from the root of your project who has index.html and type rclone config and then type n to create new remote access, named it whatever you want, choose storage s3 which is number 4, choose provider number 6 which is IBMCOS, for the env_auth choose number 1, type the access_key_id that you got in notepad earlier, for region just enter this part, for endpoint go to your bucket configuration and copy paste the public endpoint like for jp-tok is s3.jp-tok.cloud-object-storage.appdomain.cloud, for location constraint type jp-tok depends on your location in configuration,for acl type 1, and then type n to finish config, then click y and enter, then finally click q and quit config, you will end up with setting like this :

[ibm-diabetes]
type = s3
provider = IBMCOS
env_auth = false
access_key_id = <access key>
secret_access_key = <secret access key>
endpoint = <your location endpoint>
location_constraint = <your location>
acl = private

Then copy your assets file and index.html file to that bucket using command

rclone copy ./assets ibm-diabetes:<your bucket name>/assets
rclone copy ./index.html ibm-diabetes:<your bucket name>

After that click on access policy and create access policy like this

Then to open your website go to configuration and find static website endpoint after that copy paste the public url then we can open our website publicly

And if we open that public url it will look like this

Congratulations, you successfuly deploy your first machine learning web application about early stage diabetes risk prediction if you want to play with the jupyter notebook you can get it here and you want to see the whole code of this tutorial i will put the link to github below

gakpenting / IBM-autoai

Predict Early Stage Diabetes with IBM Auto AI

Description

Early stage diabetes is sometimes hard to detect, using machine learning we can achieve that, using some data that i get from kaggle.com and also machine learning tools like IBM Auto AI we can easily detect early stage diabetes and prevent our body from getting diabetes early

Video Demo

Article

https://dev.to/spiritbro1/ibm-auto-ai-predict-early-stage-diabetes-part-1-2p5j

Website URL

https://diabetes-bucket.s3-web.jp-tok.cloud-object-storage.appdomain.cloud

Slide Presentation

https://slides.com/spiritbro1-1/ibm-auto-ai-predict

Jupyter Notebook

https://jp-tok.dataplatform.cloud.ibm.com/analytics/notebooks/v2/4f220c9b-7719-425f-8570-219b04aace52/view?access_token=93148d6a7b5b6a1f949cf92941c5b17dd7da77d38cc2f45d706fafe8a96d2bb2

View on GitHub

IBM Auto AI Predict Early Stage Diabetes - Part 2

spiritupbro — Sun, 02 May 2021 15:15:59 +0000

Get the data for our machine learning model

So in order for us to create a machine learning model first we need some data, the data that we need to have is data that has an output out of it for example :

age	blood sugar level	class
10	10 mg	yes
27	12 mg	no
50	9 mg	yes

As you can see above is some example data that we want, it has the data to determine whether or not this people has diabetes or no, as you can see there is age data, blood sugar level data, and class data from the example above, we can see that class data is used for determining whether or not this people has some diabetes or no and the other data is for the input data, so the data that we need is a data that have input and output like that, for the example above, age and blood sugar is the input, and class is the output to determine whether or no we had some early stage diabetes.

So to get this data we can go to some website like https://www.kaggle.com/ here you can see so many free data that you can use, we will use this data by ishandutta that collect the data from some patients in bangladesh[1], this is exactly the data that we need, because it has some input data and also the output data

some example data of diabetes early stage risk

Import the data to IBM Auto AI

So in order for us to get some prediction to our data we need some tools to make it easy for us to do that, luckily IBM create some tools called IBM Auto AI, using this you can create machine learning easily and you can get the data as a web service as well so easily, now go to this link and login with your IBM ID and password, after you login click on view all project like below :

Click on new project and click on create an empty project :

Fill in the project name and if you want you can fill in the project description, it's optional, you can leave it blank, after that click create :

Select the Settings tab.

Scroll down to the Associated services section. If there is no machine learning service, click Add services, select Watson

Then select Machine learning and click add.

Scroll down and select the lite plan then click Create.

You're successfully create a watson machine learning service, if there is a success message like this :

After we add watson machine learning service now we need to add the data that we want to predict, download the data from here, then after downloading, you will get archive.zip which inside of it you will get diabetes_data_upload.csv, Now let's go back to IBM watson studio and click on assets, and upload the data

You will then get the data uploaded like this :

After that check the data that you uploaded before, then click add to project then also click AutoAI Experiment

If you haven't associate your project with the watson machine learning service click Associate a Machine Learning service instance and click reload after you associate it

After you associate it, it will look like this :

And after that, click create, then you need to add data source, click Select from project and click our dataset that we create earlier then click select asset

After that we need to add prediction column, we gonna click column named class because this column determine whether or not our patient get diabetes based on some data on the left column

If you click on experiment settings

You can also remove some feature that you think you don't need but for now let's use any of the column

After that click run experiment, and wait for it to be done

After it's done you can see that ExtraTreesClassifier is picked, with accuracy of 0.933 the best out of other pipeline with some enhancements

After that you can also save the code to jupyter notebook by clicking Save code

And if you want to see your jupyter notebook, go to assets and click the file in the notebook section

Then after that we need to create model, in order to do that we need to click Save as click Model then click Create, this model will be used to predict if we got early risk diabetes or no

Then after we create our model we need to deploy it as a web service so any platform can call it from the web. Now go to your newly created model and click on Promote to Deployment space

After that click on new space because we don't have any space yet

Fill in the name and click create

Our newly target space will be automatically selected, then after that click Promote

You will get redirected to your project homepage click on the deployment space hyperlink

When you click on deploy it will say there is no machine learning service associated with this space

Click on Go to space settings

Click on associate instance

Then select your machine learning instance, in this case my machine learning instance name is Machine Learning-wr

After that click on assets again, then click deploy again

Click deployment type online and named it diabetes deploy or whatever name you want then click create

Refresh the page and click deployments and you can see that your deployment is still in progress, we will wait until it's complete

After it getting deployed it will showed like this

We can now try to test our machine learning model is it gonna output the same as in the csv or no,in order to do that click on diabetes deploy hyperlink then click on test

We can see that our input is exactly like what we have in csv and the output is our class column to determine whether or not we are in an early stage of diabetes let's input first data one by one we gonna input this data below, and the input should be Positive which mean we are in the early stage of diabetes

After we added our input data click add to list

After that click on Predict and we can see the result is Positive which mean our machine learning model accuracy is great

Now we can move forward and connect our machine learning model to web application in part 3

IBM Auto AI Predict Early Stage Diabetes - Part 1

spiritupbro — Sun, 02 May 2021 14:56:54 +0000

Introduction

What is diabetes ? diabetes is a serious condition where your blood glucose level is too high. There are two main types, Type 1 and Type 2. They're different conditions, but they’re both serious[1]. About 422 million people worldwide have diabetes, the majority living in low-and middle-income countries, and 1.6 million deaths are directly attributed to diabetes each year. Both the number of cases and the prevalence of diabetes have been steadily increasing over the past few decades[2].

diabetes infographic from WHO

The American Diabetes Association (ADA) released new research on March 22, 2018 estimating the total costs of diagnosed diabetes have risen to $327 billion in 2017 from $245 billion in 2012, when the cost was last examined.

This figure represents a 26% increase over a five-year period.

The study, Economic Costs of Diabetes in the U.S. in 2017, was commissioned by the ADA and addresses the increased financial burden, health resources used, and lost productivity associated with diabetes in 2017. The study includes a detailed breakdown of costs along gender, racial, and ethnic lines, and also includes a breakdown of costs on a state-by-state basis[3].

Diabetes Cost Infographic from diabetes.org

As you can see in the infographic above, the price to treat diabetes is very expensive,and because of that it's easier for us to prevent this diabetes, than to get one of it, if we can detect if we got diabetes, we can go to the nearest doctor to get an advice on how to stop the diabetes, so that the diabetes doesn't get to the critical stage, one of the solution to that is using machine learning, we need to get the data of the patient that has an early stage diabetes then put it into machine learning model to check if we got one or no, that way we can prevent the diabetes to be spread even more. We can use tools like IBM Auto AI to achieve that, IBM Auto AI is a really simple tool to create machine learning model to be deployed into a web service and then we can get the prediction out of it to create that let's go to part 2.

Create An Open Source Private Marketplace With IBM Cloud

spiritupbro — Fri, 15 Jan 2021 23:27:35 +0000

Create An Open Source Private Marketplace With IBM Cloud

Introduction

Today im gonna show you how to make an ecommerce website using IBM cloud. I wish after this tutorial you can make the same or much more beautiful ecommerce website using IBM Cloud only, because IBM cloud has so much feature that you need to run a beautiful ecommerce website. The ecommerce i want to create here is a marketplace of private repo of github. Why i want to create a marketplace for it? while github is an open source community. The reason of this is, because i really love open source and if you use github you already know all of this open source maintainer is really struggling with their life some of them is a really great developer and make a great open source contribution but rarely getting sponsored, by creating this ecommerce of collection of private repo i hope they have some kind of way to monetize their open source especially the open source that can't be open to the public because for example an exclusivity of it like in public repo it doesn't have face recognition feature but in private repo it has face recognition feature. So i hope you enjoy this tutorial let's get started.

Prerequisites

To complete this tutorial you will need :

A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.
A text editor like Visual Studio Code or Atom.
A web browser like Firefox or Chrome.
Familiarity with JavaScript. You can look at the How To Code in JavaScript series to learn more.
Familiarity with Nuxtjs. You can take a look at Nuxtjs official documentation here.
Familiarity with Vuejs. You can take a look at Vuejs official documentation here.
Familiarity with Typescript. You can take a look at Typescript official documentation here.
Familiarity with Nuxtjs Typescript. You can take a look at Nuxtjs Typescript official documentation here.
Sign up for a free IBM Cloud account here
Cloud Object Storage (for hosting static web sites, storing data, backups) here
Functions (for serverless code) here
Cloudant (NoSQL DB) here
Github Account here
Paypal Developer Account here
Clone this code from github to make you much more understand about some of the code i create here.

Step 1 - Create A Bucket In IBM COS

Create a bucket using setting like this so that we can serve static website from our storage :

Name your bucket, pick Cross Region and ap-geo as location and use smart tier as storage class now we want also to use this as a static website so add rule on the static website rule like this :

Save it and create bucket now we need to create service credential to upload much more easily using rclone if you haven't download rclone use this tutorial to get started, now after you create your bucket click on service credentials menu on the left hand side of your screen then create service credential like this :

Then you will get access key id and secret like this :

copy paste that for the rclone config so that we can use rclone config to easily upload our frontend file later use this config:

type = s3
provider = IBMCOS
env_auth = false
access_key_id = xxxxxx
secret_access_key = xxxxxxxxx
endpoint = s3.ap.cloud-object-storage.appdomain.cloud
location_constraint = ap-standard
acl = private

Step 2 - Create A Frontend And Deploy It To IBM Cloud Object Storage

First of all let's create a simple frontend by using nuxt-typescript run this code in your terminal :

yarn create nuxt-app frontend

Create your nuxt app using this setting :

? Project name: frontend
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: None

Run the app using yarn dev if you see this screen, then you're successfully create the nuxt application :

Now we need to create our frontend to suit our needs first let's remove all of the html in pages/index.vue so it will look like this in pages folder :

Also remove all the component in components folder, and create Home.vue for our homepage like this :

Now we need to install nuxt-property-decorator, to make our component much more tidier install the package using this command :

yarn add nuxt-property-decorator

Now go to components/Home.vue and let's create our homepage, we are using vuetify here so we gonna use vuetify component as well to create our homepage so lets create our homepage like this :

<template>
  <div :class="['mx-5', 'my-5']">
    <v-row justify="center">
      <div
        :class="[`text-h1`, 'text-center']"
        v-text="'Open Source Private Marketplace'"
      ></div>
    </v-row>
    <v-row justify="center">
      <div
        :class="[`text-h3`, 'px-5', 'text-center', 'my-5']"
        v-text="'Here you can buy or sell open source private repo'"
      ></div>
    </v-row>
    <v-row justify="center" :class="['my-2']">
      <v-btn :class="['my-2']" color="info" elevation="2">LOGIN</v-btn>
      <v-btn :class="['my-2', 'mx-2']" color="error" elevation="2"
        >LOGOUT</v-btn
      >
    </v-row>
    <v-row>
      <v-card class="mx-auto my-12" max-width="374" :key="i" v-for="i in 6">
        <v-img
          height="250"
          src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
        ></v-img>

        <v-card-title>Fast Bitcoin Miner</v-card-title>

        <v-card-text>
          <v-row align="center" class="mx-0">
            <v-rating
              :value="4.5"
              color="amber"
              dense
              half-increments
              readonly
              size="14"
            ></v-rating>

            <div class="grey--text ml-4">4.5 (413)</div>
          </v-row>

          <div>This is a private repo that can mine bitcoin super fast</div>
        </v-card-text>

        <v-divider class="mx-4"></v-divider>

        <v-card-actions>
          <v-btn color="deep-purple lighten-2" text> Detail </v-btn>
          <v-btn color="deep-purple lighten-2" text> Buy Now </v-btn>
        </v-card-actions>
      </v-card>
    </v-row>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
@Component
export default class MyStore extends Vue {}
</script>

Now go to your pages/index.vue and import this

<template>
  <Home />
</template>
<script lang="ts">
import Home from '@/components/Home.vue'
import { Component, Vue } from 'nuxt-property-decorator'
@Component({
  components: {
    Home,
  },
})
export default class MyStore extends Vue {}
</script>

After that go to layouts/default.vue and change the whole content like this :

<template>
  <v-app >
<nuxt/>
  </v-app>
</template>

Go to the browser and go to http://localhost:3000 and if its successful you will see something like this :

Now let's upload it to IBM cloud storage using rclone :

yarn generate
cd dist
rclone copy ./ <remote name>:<bucket name>

Find your static website url under bucket configuration like this :

Create public access for your static website like this on access policies menu :

Then open it up in browser like this :

Step 3 - Create Login Page To Authorize User Github Account

After you create homepage let's create login page this login page is used for login to github and get the private repo create pages/login.vue and add this code :

<template>
  <Login />
</template>
<script lang="ts">
import Login from '@/components/Login.vue'
import { Component, Vue } from 'nuxt-property-decorator'
@Component({
  components: {
    Login,
  },
})
export default class MyStore extends Vue {}
</script>

We need to use fontawesome icon to make our login page more beautiful so download this using this command :

yarn add -D @fortawesome/fontawesome-free

Modify nuxt.config.js adding to the vuetify section.

vuetify: {
    defaultAssets: {icons: 'fa'},

Now create components/Login.vue and add this code :

<template>

   <v-row justify="center" align="center">
<v-card>
  <v-card-text>
    <v-row :class="['my-3','mx-3','text-h4']">LOGIN USING YOUR GITHUB ACCOUNT</v-row>
    <v-row align="center" justify="center">
      <v-btn><v-icon class="mx-2 my-2">fab fa-github</v-icon>LOGIN</v-btn>
    </v-row>
  </v-card-text>
</v-card>
   </v-row>

</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
@Component
export default class MyStore extends Vue {}
</script>

Go to http://localhost:3000/login and you will see your login page look something like this :

Now we need to create github oauth apps so that our application can login throught github and get personal repo of a user if you haven't create one follow the instruction here pick oauth apps because we just need the oauth to get the user private repo :

For the authorization url we gonna use IBM Cloud Function and IBM Cloudant NoSQL DB so that we can store the access token to be used later, so in order to do this install IBM Cli using this instruction if you have installed it login to your console and go to this link follow the instruction there and if there is an error like this :

That means you haven't setup a region to determine which region you're based on go to the top of this link and you can find your region under namespace like this :

You can find your region name by using command ibmcloud regions then after that set your region by using this command :

ibmcloud target -r <region code>
ibmcloud target -o <org> -s <space>
ibmcloud wsk property get --auth

Now we gonna install serverless cli to upload our function much more easier go ahead and run this command in your command line :

npm install -g serverless

Now go to the root of your folder and type this command :

serverless create --template openwhisk-nodejs --path functions
cd functions

Now let's rename handler.js into authorize.js so that it's easier for us to remember that this function is for authorize github account before we create our function let's create cloudant db first if you haven't create one follow this tutorial to get started don't forget to create credential for your cloudant db by clicking service credential menu on cloudant db dashboard :

After that run this command to select group :

# you can find group name by running command `ibmcloud resource groups`
ibmcloud target -g <group name>

Then now in functions folder change the code of serverless.yml file into this :

service: authorize
useDotenv: true
provider:
  name: openwhisk
  ignore_certs: true

functions:
  authorize-github:
    handler: authorize.github
    parameters:
      github_client_id: ${env:github_client_id}
      github_client_secret: ${env:github_client_secret}
    bind:
      - service:
          name: cloudantnosqldb
          instance: Cloudant-vm
    events:
      - http: GET /authorize

plugins:
  - serverless-openwhisk
  - serverless-dotenv-plugin

Create a file called .env then add this line :

github_client_id=<github client_id>
github_client_secret=<github client_secret>
token_pass=<token password for jwt token could be random>
frontend_url=<url of your static web hosting>

Let's download the necessary dependencies first :

yarn add axios
yarn add -D serverless-dotenv-plugin serverless-openwhisk

Now let's create function to authorize our user open authorize.js and change the code to this one :

"use strict";
const axios = require("axios");
const jwt = require("jsonwebtoken");
const formUrlEncoded = (x) =>
  Object.keys(x).reduce((p, c) => p + `&${c}=${encodeURIComponent(x[c])}`, "");
const github = async function (params) {
  const cloudant = require("@cloudant/cloudant")({
    url: params.__bx_creds.cloudantnosqldb.url,
    plugins: [
      { iamauth: { iamApiKey: params.__bx_creds.cloudantnosqldb.apikey } },
    ],
  });
  if (params.code) {
    const { access_token } = await authenticate({ params });
    const { login,email } = await getUsername({ access_token });
    const {token} = await checkUsername({
      email,
      username: login,
      cloudant,
      access_token,
      token_pass: params.token_pass,
    });

    if(token){
      return  {
        headers: { location: `${params.frontend_url}/dashboard` },
        statusCode: 302
        };
    }else{
      return  {
        headers: { location: params.frontend_url },
        statusCode: 302
        };
    }

  } else {
    return {
      headers: { location: `${params.frontend_url}/login` },
      statusCode: 302
      };
  }
};
module.exports.github = github;
async function authenticate({ params }) {
  const { data } = await axios({
    url: "https://github.com/login/oauth/access_token",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      Accept: "application/json",
    },
    data: formUrlEncoded({
      client_id: params.github_client_id,
      client_secret: params.github_client_secret,
      code: params.code,
    }),
    method: "POST",
  });
  return data;
}
async function getUsername({ access_token }) {
  const { data } = await axios({
    url: "https://api.github.com/user",
    headers: {
      Authorization: `token ${access_token}`,
      Accept: "application/vnd.github.v3+json",
    },
    method: "GET",
  });
  return data;
}
async function checkUsername({ username, access_token, cloudant, token_pass,email }) {
  const token = jwt.sign({ access_token }, token_pass);
  const db = cloudant.db.use("ecommerce");
  const query = {
    selector: {
      $and: [{ username: { $eq: username } }, { collection: { $eq: "user" } }],
    },
  };

  const res = await db.find(query);
  if (res.docs.length === 1) {
    const { _id, _rev } = res.docs[0];
    const user = {
      _id,
      _rev,
      username,
      access_token,
      token,
      email,
      collection: "user",
    };

    const {ok}= await db.insert(user);
     return ok && {token};
  } else {
    const user = { username,email, access_token, token, collection: "user" };
    const {ok}=await db.insert(user);
    return ok && {token};

  }
}

After you done setting up IBM cloud functions run this command to deploy it :

serverless deploy

Copy the URL you got from serverless deploy for github authorization callback url :

After you done let's go back to root folder then go to frontend folder download this dependencies to get environment variable from a file :

yarn add @nuxtjs/dotenv

Then in nuxt.config.js add this line :

 buildModules: [
...
    '@nuxtjs/dotenv'
  ],

Add .env file in the frontend folder and add this line :

github_client_id=<your github client id>

After that go to components/Login.vue then change the button html to this one :

...
 <v-btn @click="login_github"><v-icon class="mx-2 my-2">fab fa-github</v-icon>LOGIN</v-btn>
...

And add script to components/Login.vue like this one :

export default class MyStore extends Vue {
  login_github(){
    window.location.href="https://github.com/login/oauth/authorize?client_id="+process.env.github_client_id
  }
}

Now create file in pages/callback.vue to receive token and set it in cookies like this :

<template>
  <v-row justify="center" align="center" :class="['text-h1']">REDIRECTING...</v-row>
</template>
<script lang="ts">
import Cookies from 'js-cookie'
import { Component, Vue } from 'nuxt-property-decorator'
@Component
export default class MyStore extends Vue {
  mounted(){
Cookies.set('token', this.$route.query.token)
window.location.href="/"
  }
}
</script>

And then change the script in pages/index.vue to implement if there is token in the cookies remove the login button in homepage and change it to Dashboard button and logout button

// pages/index.vue
<template>
  <Home :login="login" />
</template>
<script lang="ts">
import Cookies from 'js-cookie'
import Home from '@/components/Home.vue'
import { Component, Vue } from 'nuxt-property-decorator'
@Component({
  components: {
    Home,
  },
})
export default class MyStore extends Vue {
  public login: boolean =
    Cookies.get('token') && Cookies?.get('token')?.trim() !== ''
      ? true
      : false
}
</script>

After that change the components/Home.vue to implement button change like this :

// components/Home.vue
<template>
...
 <v-btn :class="['my-2']" color="info" elevation="2" v-show="login"
        >DASHBOARD</v-btn
      >
      <v-btn
        :class="['my-2']"
        color="info"
        elevation="2"
        href="/login"
        v-show="!login"
        >LOGIN</v-btn
      >
      <v-btn
        :class="['my-2', 'mx-2']"
        color="error"
        elevation="2"
        v-show="login"
        >LOGOUT</v-btn
      >
...
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'nuxt-property-decorator'
@Component
export default class MyStore extends Vue {
  @Prop({ required: true }) readonly login!: boolean
}
</script>

And now generate the frontend just like before and rclone it :

yarn generate
cd dist
rclone copy ./ <remote name>:<bucket name>

Go to your browser and open your public static web hosting url try to login using your github account and if you see something like this below then your authorization is done and you are successfully deploy serverless auth using IBM cloud function and save the token in IBM cloudant :

Step 4 - Create Dashboard To Get Private Repo

First of all we need to change the Home.vue in frontend folder go to components/Home.vue and change the button so that it can go to dashboard and logout :

<template>
...
 <v-btn
        :class="['my-2']"
        color="info"
        elevation="2"
        v-show="login"
        href="/dashboard"
        >DASHBOARD</v-btn
      >
      ...
      <v-btn
        :class="['my-2', 'mx-2']"
        color="error"
        elevation="2"
        v-show="login"
        @click="logout"
        >LOGOUT</v-btn
      >
...
</template>
<script lang="ts">
import Cookies from 'js-cookie'
...
export default class MyStore extends Vue {
  @Prop({ required: true }) readonly login!: boolean
  logout() {
    Cookies.remove('token')
window.location.reload()
  }
}
...
</script>

Now let's create pages/dashboard.vue to handle our Dashboard.vue component

<template>
  <Dashboard :login="login" />
</template>
<script lang="ts">
import Cookies from 'js-cookie'
import Dashboard from '@/components/Dashboard.vue'
import { Component, Vue } from 'nuxt-property-decorator'
@Component({
  components: {
    Dashboard,
  },
})
export default class MyStore extends Vue {
  public login: boolean =
    Cookies.get('token') && Cookies?.get('token')?.trim() !== ''
      ? true
      : false
}
</script>

And if that finish now let's create components/Dashboard.vue to show balance and to show our private repo later

<template>
  <v-container>
    <v-row justify="space-between">
      <v-col cols="4" class="text-h4 font-weight-bold">Dashboard</v-col>
      <v-col cols="4" class="d-flex justify-end"
        ><v-btn @click="logout">LOGOUT</v-btn></v-col
      >
    </v-row>
    <DashboardInfo :username="username" :profilePhoto="profilePhoto" />
    <v-row justify="space-between">
      <v-col cols="4" class="text-h4 font-weight-bold">Private Repo List</v-col>
    </v-row>
    <DashboardRepo :refreshRepo="getPrivateRepo" :listRepo="privateRepo" />
    <v-row justify="space-between">
      <v-col cols="4" class="text-h4 font-weight-bold">Owned Repo</v-col>
    </v-row>
    <DashboardRepo :refreshRepo="getOwnedRepo" :listRepo="ownedRepo" />
  </v-container>
</template>

<script lang="ts">
import Cookies from 'js-cookie'
import DashboardInfo from '@/components/dashboard_components/DashboardInfo.vue'
import DashboardRepo from '@/components/dashboard_components/DashboardRepo.vue'
import { Component, Vue, Prop } from 'nuxt-property-decorator'
@Component({
  components: {
    DashboardInfo,
    DashboardRepo,
  },
})
export default class MyStore extends Vue {
  @Prop({ required: true }) readonly login!: boolean
  public username: string = ''
  public profilePhoto: string = ''
  public privateRepo: Array<object> = []
  public ownedRepo: Array<object> = []
  logout() {
    Cookies.remove('token')
    window.location.href = '/'
  }
  async created() {
    // if (!this.login) window.location.href = '/'
    const token = Cookies.get('token')
    const url = process.env.get_profile_url
    const privateRepoUrl = process.env.get_private_repo_url
    const ownedRepoUrl = process.env.get_owned_repo_url
    const {data} = await this.$axios.get(`${url}?token=${token}`)
    const privateRepo = await this.$axios.get(`${privateRepoUrl}?token=${token}`)
    const ownedRepo = await this.$axios.get(`${ownedRepoUrl}?token=${token}`)
    this.username = data.data.login
    this.profilePhoto = data.data.avatarUrl
    this.privateRepo=privateRepo.data
    this.ownedRepo=ownedRepo.data
  }
  async getPrivateRepo() {
    const token = Cookies.get('token')
    const url = process.env.get_private_repo_refresh_url
    const {data} = await this.$axios.get(`${url}?token=${token}`)
    this.privateRepo=data.data

  }

}
</script>

This is how our dashboard will look like for now :

After that let's change the github oauth url to enable our api token to get our private repo go to components/login.vue then change the script into this :

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
@Component
export default class MyStore extends Vue {
  login_github(){
    window.location.href="https://github.com/login/oauth/authorize?scope=repo&client_id="+process.env.github_client_id
  }
}
</script>

It will now show authorization url that will grant an access to our private and public repo, but since this is a private repo marketplace, then we gonna get private repo only, now go back to functions folder and create an IBM cloud function that can get our private repo,get profile,and get repo that we bought from other github user, create a file called private_repo.js and write this code :

"use strict";
const axios = require("axios");
const jwt = require("jsonwebtoken");
const formUrlEncoded = (x) =>
  Object.keys(x).reduce((p, c) => p + `&${c}=${encodeURIComponent(x[c])}`, "");
const privateRepoRefresh = async function (params) {
  const cloudant = require("@cloudant/cloudant")({
    url: params.__bx_creds.cloudantnosqldb.url,
    plugins: [
      { iamauth: { iamApiKey: params.__bx_creds.cloudantnosqldb.apikey } },
    ],
  });

  const data = await getPrivateRepoRefresh({
    cloudant,
    token: params.token,
    token_pass: params.token_pass,
  });

  if (data&&data.length>0) {
    return {
      data,
    };
  } else {
    return {
      data: [],
    };
  }
};
const privateRepo = async function (params) {
  const cloudant = require("@cloudant/cloudant")({
    url: params.__bx_creds.cloudantnosqldb.url,
    plugins: [
      { iamauth: { iamApiKey: params.__bx_creds.cloudantnosqldb.apikey } },
    ],
  });

  const data = await getPrivateRepo({
    cloudant,
    token: params.token,
    token_pass: params.token_pass,
  });

  if (data&&data.length>0) {
    return {
      data,
    };
  } else {
    return {
      data: [],
    };
  }
};
const ownedRepo = async function (params) {
  const cloudant = require("@cloudant/cloudant")({
    url: params.__bx_creds.cloudantnosqldb.url,
    plugins: [
      { iamauth: { iamApiKey: params.__bx_creds.cloudantnosqldb.apikey } },
    ],
  });

  const data = await getOwnedRepo({
    cloudant,
    token: params.token,
    token_pass: params.token_pass,
  });

  if (data&&data.length>0) {
    return {
      data,
    };
  } else {
    return {
      data: [],
    };
  }
};

const profile = async function (params) {
  const cloudant = require("@cloudant/cloudant")({
    url: params.__bx_creds.cloudantnosqldb.url,
    plugins: [
      { iamauth: { iamApiKey: params.__bx_creds.cloudantnosqldb.apikey } },
    ],
  });

  const data = await getProfile({
    cloudant,
    token: params.token,
    token_pass: params.token_pass,
  });

  if (data) {
    return {
      data: data.data.viewer,
    };
  } else {
    return {
      data: {},
    };
  }
};
module.exports.profile = profile;
module.exports.privateRepo = privateRepo;
module.exports.ownedRepo = ownedRepo;
module.exports.privateRepoRefresh = privateRepoRefresh;
async function getProfile({ cloudant, token_pass, token }) {
  const { access_token } = jwt.verify(token, token_pass);
  const db = cloudant.db.use("ecommerce");
  var query = {
    selector: { access_token: { $eq: access_token } },
    fields: ["access_token"],
  };

  const res = await db.find(query);
  if (res.docs.length === 1) {
    const { data } = await axios({
      url: "https://api.github.com/graphql",
      headers: {
        Authorization: `token ${res.docs[0].access_token}`,
        Accept: "application/vnd.github.v3+json",
      },
      method: "POST",
      data: { query: "query { viewer { login,avatarUrl }}" },
    });
    return data;
  } else {
    return null;
  }
}

async function getPrivateRepoRefresh({ cloudant, token_pass, token }) {
  const { access_token } = jwt.verify(token, token_pass);
  const db = cloudant.db.use("ecommerce");
  var query = {
    selector: { $and:[{access_token: { $eq: access_token } },{collection:{$eq:"user"}}]},
    fields: ["access_token", "username"],
  };

  const res = await db.find(query);
  if (res.docs.length === 1) {
    const { data } = await axios({
      url: "https://api.github.com/graphql",
      headers: {
        Authorization: `token ${res.docs[0].access_token}`,
        Accept: "application/vnd.github.v3+json",
      },
      method: "POST",
      data: {
        query: `{
        repositoryOwner(login: "${res.docs[0].username}") {
          repositories(privacy: PRIVATE,first:5,orderBy:{field:CREATED_AT,direction:DESC}) {
            nodes {
              description
              name
              openGraphImageUrl
              url
              id
            }
          }
        }
      }
      `,
      },
    });
    const nodes = data.data.repositoryOwner.repositories.nodes;
    for (let i = 0; i < nodes.length; i++) {
      const findRepo = await db.find({
        selector: {
          $and: [
            { username: { $eq: res.docs[0].username } },
            { collection: { $eq: "private-repo" } },
            { repo_id: { $eq: nodes[i].id } },
          ],
        },
      });
      if(findRepo.docs.length>0){
        const {_id,_rev,...other}=findRepo.docs[0]
        const {id,...rest}=nodes[i];
        const repoData={_id,_rev,repo_id:id,...rest,...other}
        await db.insert(repoData)
      }else{
        const {id,...rest}=nodes[i];
        const repoData={repo_id:id,...rest,username:res.docs[0].username,collection:"private-repo",sell:"UNLIST",amount:0}
        await db.insert(repoData)
      }
    }

    const final = await db.find({
      selector: {
        $and: [
          { username: { $eq: res.docs[0].username } },
          { collection: { $eq: "private-repo" } },
        ],
      },
    });
    return final.docs;
  } else {

    return [];
  }
}
async function getPrivateRepo({ cloudant, token_pass, token }) {
  const { access_token } = jwt.verify(token, token_pass);
  const db = cloudant.db.use("ecommerce");
  var query = {
    selector: { $and:[{access_token: { $eq: access_token } },{collection:{$eq:"user"}}]},
    fields: ["access_token", "username"],
  };

  const res = await db.find(query);
  if(res.docs.length===1){
    const final = await db.find({
      selector: {
        $and: [
          { username: { $eq: res.docs[0].username } },
          { collection: { $eq: "private-repo" } },
        ],
      },
    });
    return final.docs;
  }else{
    return []
  }

}
async function getOwnedRepo({ cloudant, token_pass, token }) {
  const { access_token } = jwt.verify(token, token_pass);
  const db = cloudant.db.use("ecommerce");
  var query = {
    selector: { $and:[{access_token: { $eq: access_token } },{collection:{$eq:"user"}}]},
    fields: ["access_token", "username"],
  };

  const res = await db.find(query);
  if(res.docs.length===1){
    const final = await db.find({
      selector: {
        $and: [
          { username: { $eq: res.docs[0].username } },
          { collection: { $eq: "owned-repo" } },
        ],
      },
    });
    return final.docs;
  }else{
    return []
  }

}

Change serverless.yml to suit our needs like this :

service: authorize
useDotenv: true
provider:
  name: openwhisk
  ignore_certs: true

functions:
  authorize-github:
    handler: authorize.github
    annotations:
      web-export: true
    parameters:
      github_client_id: ${env:github_client_id}
      github_client_secret: ${env:github_client_secret}
      token_pass: ${env:token_pass}
      frontend_url: ${env:frontend_url}
    bind:
      - service:
          name: cloudantnosqldb
          instance: Cloudant-vm
  get-private-repo:
    handler: private_repo.privateRepo
    parameters:
      github_client_id: ${env:github_client_id}
      github_client_secret: ${env:github_client_secret}
      token_pass: ${env:token_pass}
      frontend_url: ${env:frontend_url}
    events: 
      - http: GET /get-private-repo
    bind:
      - service:
          name: cloudantnosqldb
          instance: Cloudant-vm
  get-private-repo-refresh:
    handler: private_repo.privateRepoRefresh
    parameters:
      github_client_id: ${env:github_client_id}
      github_client_secret: ${env:github_client_secret}
      token_pass: ${env:token_pass}
      frontend_url: ${env:frontend_url}
    events: 
      - http: GET /get-private-repo-refresh
    bind:
      - service:
          name: cloudantnosqldb
          instance: Cloudant-vm
  get-owned-repo:
    handler: private_repo.ownedRepo
    parameters:
      github_client_id: ${env:github_client_id}
      github_client_secret: ${env:github_client_secret}
      token_pass: ${env:token_pass}
      frontend_url: ${env:frontend_url}
    events: 
      - http: GET /get-owned-repo
    bind:
      - service:
          name: cloudantnosqldb
          instance: Cloudant-vm
  get-profile:
    handler: private_repo.profile
    parameters:
      github_client_id: ${env:github_client_id}
      github_client_secret: ${env:github_client_secret}
      token_pass: ${env:token_pass}
      frontend_url: ${env:frontend_url}
    events: 
      - http: GET /get-profile
    bind:
      - service:
          name: cloudantnosqldb
          instance: Cloudant-vm              

plugins:
  - serverless-openwhisk
  - serverless-dotenv-plugin

Now let's deploy it using serverless command line like this :

serverless deploy

Now let's change our Dashboard.vue so that it can show our private repo :

<template>
  <v-container>
    <v-row justify="space-between">
      <v-col cols="4" class="text-h4 font-weight-bold">Dashboard</v-col>
      <v-col cols="4" class="d-flex justify-end"
        ><v-btn @click="logout">LOGOUT</v-btn></v-col
      >
    </v-row>
    <DashboardInfo :username="username" :profilePhoto="profilePhoto" />
    <v-row justify="space-between">
      <v-col cols="4" class="text-h4 font-weight-bold">Private Repo List</v-col>
    </v-row>
    <DashboardRepo :refreshRepo="getPrivateRepo" :listRepo="privateRepo" />
    <v-row justify="space-between">
      <v-col cols="4" class="text-h4 font-weight-bold">Owned Repo</v-col>
    </v-row>
    <DashboardRepo  :listRepo="ownedRepo" />
  </v-container>
</template>

<script lang="ts">
import Cookies from 'js-cookie'
import DashboardInfo from '@/components/dashboard_components/DashboardInfo.vue'
import DashboardRepo from '@/components/dashboard_components/DashboardRepo.vue'
import { Component, Vue, Prop } from 'nuxt-property-decorator'
@Component({
  components: {
    DashboardInfo,
    DashboardRepo,
  },
})
export default class MyStore extends Vue {
  @Prop({ required: true }) readonly login!: boolean
  public username: string = ''
  public profilePhoto: string = ''
  public privateRepo: Array<object> = []
  public ownedRepo: Array<object> = []
  logout() {
    Cookies.remove('token')
    window.location.href = '/'
  }
  async created() {
    // if (!this.login) window.location.href = '/'
    const token = Cookies.get('token')
    const url = process.env.get_profile_url
    const privateRepoUrl = process.env.get_private_repo_url
    const ownedRepoUrl = process.env.get_owned_repo_url
    const {data} = await this.$axios.get(`${url}?token=${token}`)
    const privateRepo = await this.$axios.get(`${privateRepoUrl}?token=${token}`)
    const ownedRepo = await this.$axios.get(`${ownedRepoUrl}?token=${token}`)
    this.username = data.data.login
    this.profilePhoto = data.data.avatarUrl
    this.privateRepo=privateRepo.data.data
    this.ownedRepo=ownedRepo.data.data
  }
  async getPrivateRepo() {
    const token = Cookies.get('token')
    const url = process.env.get_private_repo_refresh_url
    const {data} = await this.$axios.get(`${url}?token=${token}`)
    this.privateRepo=data.data

  }

}
</script>

Also create components/dashboard_components/DashboardRepo.vue component to show our private repo and owned repo :

<template>
  <div>
    <v-row class="mb-2" v-if="refreshRepo"><v-btn @click="refreshRepo">Refresh Repo List</v-btn></v-row>
    <v-row>
      <v-card max-width="400" class="mx-2 my-2" :key=index v-for="(item,index) in listRepo">
        <v-card-title>
          <v-list-item class="grow">
            <v-list-item-content>
              <v-list-item-title>{{item.name}}</v-list-item-title>
            </v-list-item-content>

            <v-row align="center" justify="end"> Private </v-row>
          </v-list-item>
        </v-card-title>

        <v-card-text class="text-md font-weight-bold">
          <v-list-item>
            <v-list-item-content
              >{{item.description}}</v-list-item-content
            >
            <v-list-item-avatar tile size="100" color="grey">
              <v-img :src="item.openGraphImageUrl" />
            </v-list-item-avatar>
          </v-list-item>
        </v-card-text>
        <v-card-action
          ><v-row class="d-flex align-content-center mx-5">
            <v-col cols="5" class="d-flex justify-start">
              <div v-if="item.sell==='SELL'">$ {{item.amount}}</div>
              <v-text-field
              v-if="item.sell==='UNLIST'"
                label="Amount"
                type="number"
                outlined
                prefix="$"
              ></v-text-field>
            </v-col>
            <v-col class="d-flex justify-end mt-2">
              <v-btn color="red" v-if="item.sell==='UNLIST'">SELL</v-btn><v-btn v-if="item.sell==='SELL'">UNLIST</v-btn>
            </v-col>
          </v-row></v-card-action
        >
      </v-card>
    </v-row>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'nuxt-property-decorator'
@Component
export default class MyStore extends Vue {
  @Prop({ required: false }) readonly refreshRepo!: void
  @Prop({ required: true }) readonly listRepo!: Array<object>
}
</script>

Create components/dashboard_components/DashboardInfo.vue component to show username, profile picture and balance :

<template>
  <v-row>
    <v-card max-width="344" outlined>
      <v-list-item three-line>
        <v-list-item-content>
          <v-list-item-title class="headline mb-1">
            Github Username
          </v-list-item-title>
          <v-list-item-title class="text-h5">{{username}}</v-list-item-title>
        </v-list-item-content>

        <v-list-item-avatar size="80" color="grey">
          <v-img :src="profilePhoto" />
        </v-list-item-avatar>
      </v-list-item>
    </v-card>
    <v-card class="mx-5" max-width="344" outlined>
      <v-list-item three-line>
        <v-list-item-content>
          <v-list-item-title class="headline mb-1"> Balance </v-list-item-title>
          <v-list-item-title>
            <v-row justify="space-between">
              <v-col class="font-weight-bold text-h5">$ 1000</v-col>
              <v-col><v-btn color="green">withdraw</v-btn></v-col>
            </v-row>
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-card>
  </v-row>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'nuxt-property-decorator'
@Component
export default class MyStore extends Vue {
  @Prop({ required: true }) readonly username!: string
  @Prop({ required: true }) readonly profilePhoto!: string

}
</script>

Go to http://localhost:3000/dashboard and you will see something like this if you're successfully shown your private repo :

Step 5 - Create Function That Can Sell And Buy Repo

Create a file called sell_repo.js on functions folder we gonna use this file to inform the application that our repo is for sale,unlist repo for sale, and sell repo:

const axios = require("axios");
const jwt = require("jsonwebtoken");
const sell_repo = async function (params) {
    const cloudant = require("@cloudant/cloudant")({
      url: params.__bx_creds.cloudantnosqldb.url,
      plugins: [
        { iamauth: { iamApiKey: params.__bx_creds.cloudantnosqldb.apikey } },
      ],
    });

    const data = await sellRepo({
      cloudant,
      token: params.token,
      token_pass: params.token_pass,
      _id:params._id,
      amount:params.amount,

    });

    if (data && data.length>0) {
      return {
        data
      };
    } else {
      return {
        data,
      };
    }
  };
  const unlist_repo = async function (params) {
    const cloudant = require("@cloudant/cloudant")({
      url: params.__bx_creds.cloudantnosqldb.url,
      plugins: [
        { iamauth: { iamApiKey: params.__bx_creds.cloudantnosqldb.apikey } },
      ],
    });

    const data = await unlistRepo({
      cloudant,
      token: params.token,
      token_pass: params.token_pass,
      _id:params._id,

    });

    if (data && data.length>0) {
      return {
        data
      };
    } else {
      return {
        data,
      };
    }
  };
  const for_sale_repo = async function (params) {
    const cloudant = require("@cloudant/cloudant")({
      url: params.__bx_creds.cloudantnosqldb.url,
      plugins: [
        { iamauth: { iamApiKey: params.__bx_creds.cloudantnosqldb.apikey } },
      ],
    });

    const data = await forSaleRepo({
      cloudant,
      token: params.token,
      token_pass: params.token_pass,


    });

    if (data && data.length>0) {
      return {
        data
      };
    } else {
      return {
        data,
      };
    }
  };
  async function sellRepo({ cloudant, token_pass, token,_id,amount}) {
    const { access_token } = jwt.verify(token, token_pass);
    const db = cloudant.db.use("ecommerce");
    var query = {
      selector: { $and:[{access_token: { $eq: access_token } },{collection:{$eq:"user"}}]},
      fields: ["access_token", "username"],
    };

    const res = await db.find(query);
    if(res.docs.length===1){
      let repo = await db.find({
        selector: {
          _id:{$eq:_id}
        },
      });
      if(repo.docs.length===1){
        repo.docs[0].amount=amount;
        repo.docs[0].sell="SELL";
        await db.insert(repo.docs[0])
        const final=await db.find({selector:{username:res.docs[0].username,collection:"private-repo"}})
        return final.docs
      }else{
        return {status:false,data:[],message:"error selling"}
      }

    }else{
      return {status:false,data:[],message:"error token"}
    }

  }
  async function unlistRepo({ cloudant, token_pass, token,_id }) {
    const { access_token } = jwt.verify(token, token_pass);
    const db = cloudant.db.use("ecommerce");
    var query = {
      selector: { $and:[{access_token: { $eq: access_token } },{collection:{$eq:"user"}}]},
      fields: ["access_token", "username"],
    };

    const res = await db.find(query);
    if(res.docs.length===1){
      let repo = await db.find({
        selector: {
          _id:{$eq:_id}
        },
      });
      if(repo.docs.length===1){
        repo.docs[0].sell="UNLIST";
        await db.insert(repo.docs[0])
        const final=await db.find({selector:{username:res.docs[0].username,collection:"private-repo"}})
        return final.docs
      }else{
        return {status:false,data:[],message:"error unlist"}
      }

    }else{
      return {status:false,data:[],message:"error token"}
    }

  }
  async function forSaleRepo({ cloudant, token_pass, token }) {
    const { access_token } = jwt.verify(token, token_pass);
    const db = cloudant.db.use("ecommerce");
    var query = {
      selector: { $and:[{access_token: { $eq: access_token } },{collection:{$eq:"user"}}]},
      fields: ["access_token", "username"],
    };

    const res = await db.find(query);
    if(res.docs.length===1){
      let repo = await db.find({
        selector: {
          collection:{$eq:"private-repo"},
          sell:"SELL"
        },
      });
      return repo.docs

    }else{
      return {status:false,data:[],message:"error token"}
    }

  }
  module.exports.sell_repo = sell_repo;
  module.exports.unlist_repo = unlist_repo;
  module.exports.for_sale_repo = for_sale_repo;

Now let's change our components/Dashboard.vue to implement our cloud function like this :

<template>
  <v-container>
    <v-row justify="space-between">
      <v-col cols="4" class="text-h4 font-weight-bold">Dashboard</v-col>
      <v-col cols="4" class="d-flex justify-end"
        ><v-btn @click="logout">LOGOUT</v-btn></v-col
      >
    </v-row>
    <DashboardInfo :username="username" :profilePhoto="profilePhoto" />
    <v-row justify="space-between">
      <v-col cols="4" class="text-h4 font-weight-bold">Private Repo List</v-col>
    </v-row>
    <DashboardRepo
      :refreshRepo="getPrivateRepo"
      :listRepo="privateRepo"
      @sell-repo="sellRepo($event._id, $event.amount)"
      @unlist-repo="unlistRepo($event._id)"
    />
    <v-row justify="space-between">
      <v-col cols="4" class="text-h4 font-weight-bold">Owned Repo</v-col>
    </v-row>
    <DashboardRepo :listRepo="ownedRepo" />
    <v-snackbar v-model="snackbarAmount">
      the amount shouldn't be negative or zero
    </v-snackbar>
  </v-container>
</template>

<script lang="ts">
import Cookies from 'js-cookie'
import DashboardInfo from '@/components/dashboard_components/DashboardInfo.vue'
import DashboardRepo from '@/components/dashboard_components/DashboardRepo.vue'
import { Component, Vue, Prop } from 'nuxt-property-decorator'
@Component({
  components: {
    DashboardInfo,
    DashboardRepo,
  },
})
export default class MyStore extends Vue {
  @Prop({ required: true }) readonly login!: boolean
  public username: string = ''
  public profilePhoto: string = ''
  public snackbarAmount: boolean = false
  public privateRepo: Array<object> = []
  public ownedRepo: Array<object> = []
  logout() {
    Cookies.remove('token')
    window.location.href = '/'
  }
  async created() {
    // if (!this.login) window.location.href = '/'
    const token = Cookies.get('token')
    const url = process.env.get_profile_url
    const privateRepoUrl = process.env.get_private_repo_url
    const ownedRepoUrl = process.env.get_owned_repo_url
    const { data } = await this.$axios.get(`${url}?token=${token}`)
    const privateRepo = await this.$axios.get(
      `${privateRepoUrl}?token=${token}`
    )
    const ownedRepo = await this.$axios.get(`${ownedRepoUrl}?token=${token}`)
    this.username = data.data.login
    this.profilePhoto = data.data.avatarUrl
    this.privateRepo = privateRepo.data.data
    this.ownedRepo = ownedRepo.data.data
  }
  async getPrivateRepo() {
    const token = Cookies.get('token')
    const url = process.env.get_private_repo_refresh_url
    const { data } = await this.$axios.get(`${url}?token=${token}`)
    this.privateRepo = data.data
  }
  async sellRepo(_id: string, amount: number) {
    // console.log(amount)
    if (Number(amount) === 0 || Number(amount) < 0) {
      console.log(amount)
      this.snackbarAmount = true
      return
    } else {
      const token = Cookies.get('token')
      const url = process.env.sell_repo_url

      const { data } = await this.$axios.post(`${url}?token=${token}`, {
        _id,
        amount,
      })
      this.privateRepo = data.data
    }
  }
  async unlistRepo(_id: string) {
    const token = Cookies.get('token')
    const url = process.env.unlist_repo_url
    const { data } = await this.$axios.post(`${url}?token=${token}`, { _id })
    this.privateRepo = data.data
  }
}
</script>

Also change the components/dashboard_components/DashboardRepo.vue so that it can show the list of private repo after clicking sell button :

<template>
  <div>
    <v-row class="mb-2" v-if="refreshRepo"><v-btn @click="refreshRepo">Refresh Repo List</v-btn></v-row>
    <v-row>
      <v-card width="400" class="mx-2 my-2" :key=index v-for="(item,index) in listRepo">
        <v-card-title>
          <v-list-item class="grow">
            <v-list-item-content>
              <v-list-item-title>{{item.name}}</v-list-item-title>
            </v-list-item-content>

            <v-row align="center" justify="end"> Private </v-row>
          </v-list-item>
        </v-card-title>

        <v-card-text class="text-md font-weight-bold">
          <v-list-item>
            <v-list-item-content
              >{{item.description}}</v-list-item-content
            >
            <v-list-item-avatar tile size="100" color="grey">
              <v-img :src="item.openGraphImageUrl" />
            </v-list-item-avatar>
          </v-list-item>
        </v-card-text>
        <v-card-action
          ><v-row class="d-flex align-content-center mx-5">
            <v-col cols="5" class="d-flex justify-start align-content-center">
              <div class="d-flex align-center text-h5" :style="{height:'100%'}" v-if="item.sell==='SELL'">$ {{item.amount}}</div>
              <v-text-field
              v-if="item.sell==='UNLIST'"
                label="Amount"
                type="number"
                outlined
                prefix="$"
                v-model="amount"
              ></v-text-field>
            </v-col>
            <v-col class="d-flex mt-2 justify-end">
              <v-btn @click="sellRepo(item._id,amount)" color="red" v-if="item.sell==='UNLIST'">SELL</v-btn><v-btn v-if="item.sell==='SELL'" @click="unlistRepo(item._id)">UNLIST</v-btn>
            </v-col>
          </v-row></v-card-action
        >
      </v-card>
    </v-row>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop,Emit } from 'nuxt-property-decorator'
@Component
export default class MyStore extends Vue {
  @Prop({ required: false }) readonly refreshRepo!: void
  @Prop({ required: true }) readonly listRepo!: Array<object>
  public amount:number
  @Emit()
sellRepo(_id: string,amount:number) {
return {_id,amount}
}
  @Emit()
unlistRepo(_id: string) {
return {_id}
}
}
</script>

Now go to Home.vue so that we can show our for sale repo after clicking it :

<template>
  <div :class="['mx-5', 'my-5']">
    <v-row justify="center">
      <div
        :class="[`text-h1`, 'text-center']"
        v-text="'Open Source Private Marketplace'"
      ></div>
    </v-row>
    <v-row justify="center">
      <div
        :class="[`text-h3`, 'px-5', 'text-center', 'my-5']"
        v-text="'Here you can buy or sell open source private repo'"
      ></div>
    </v-row>
    <v-row justify="center" :class="['my-2']">
      <v-btn
        :class="['my-2']"
        color="info"
        elevation="2"
        v-show="login"
        href="/dashboard"
        >DASHBOARD</v-btn
      >
      <v-btn
        :class="['my-2']"
        color="info"
        elevation="2"
        href="/login"
        v-show="!login"
        >LOGIN</v-btn
      >
      <v-btn
        :class="['my-2', 'mx-2']"
        color="error"
        elevation="2"
        v-show="login"
        @click="logout"
        >LOGOUT</v-btn
      >
    </v-row>
    <v-row>
      <v-card class="mx-auto my-12" max-width="374" :key="index" v-for="(item,index) in forSale">
        <v-img
          height="250"
          :src="item.openGraphImageUrl"
        ></v-img>

        <v-card-title>{{item.name}}</v-card-title>

        <v-card-text>

          <div>{{item.description}}</div>
        </v-card-text>

        <v-divider class="mx-4"></v-divider>

        <v-card-actions>
          <v-flex>$ {{item.amount}}</v-flex>
          <v-flex ><div class="d-flex justify-end"><v-btn class="d-flex justify-end" color="deep-purple lighten-2" @click="buyNow(item._id,item.amount)" text> Buy Now </v-btn>
            </div></v-flex>

        </v-card-actions>
      </v-card>
    </v-row>
  </div>
</template>
<script lang="ts">
import Cookies from 'js-cookie'
import { Component, Vue, Prop } from 'nuxt-property-decorator'
@Component
export default class MyStore extends Vue {
  @Prop({ required: true }) readonly login!: boolean
  public forSale:Array<object>=[]
  logout() {
    Cookies.remove('token')
    window.location.reload()
  }
  async created(){
  const token = Cookies.get('token')
    const url = process.env.for_sale_repo_url
    const { data } = await this.$axios.get(`${url}?token=${token}`)
    this.forSale = data.data
  }
  async buyNow(_id,amount){

  }
}
</script>

Now you can sell your repo when you put the amount and clicking sell button like this :

Then when you go to homepage it also shown the price and buy button :

Step 6 - Integrate Paypal To Accept Payment

First create sandbox paypal account here, after that create a demo account on developer account :

Then let's change our balance UI into a button that can accept paypal payment go to frontend folder and go to components/dashboard_components/DashboardInfo.vue and change the balance UI like this :

...
<v-row justify="space-between">
              <v-col><v-btn color="green" v-if="!paypalToken">CONNECT PAYPAL</v-btn></v-col>
              <v-col class="font-weight-bold text-h5" v-if="paypalToken">{{paypalBalance}}</v-col>
              <v-col v-if="paypalToken"><v-btn color="green">withdraw</v-btn></v-col>
            </v-row>
...
<script lang="ts">
...
    @Prop({ required: false }) readonly paypalBalance!: string
    @Prop({ required: true }) readonly paypalToken!: boolean
...
</script>

Also in the components/Home.vue add this code :

<template>
...
  <DashboardInfo :username="username" :profilePhoto="profilePhoto" :paypalToken="paypalToken"/>
...
</template>
<script lang=ts>
...
public paypalToken: boolean = false
...
</script>

it will now look like this :

Now we need to add function to make that button connect to our paypal so that we can see our balance in return, also we will make a condition so that when the paypal connected, we can sell the repo, but when it doesn't connect, it can't sell the repo go ahead and change frontend/components/dashboard_components/DashboardRepo.vue to this :

<template>
  <div>
    <v-row class="mb-2" v-if="refreshRepo"
      ><v-btn @click="refreshRepo">Refresh Repo List</v-btn></v-row
    >
    <v-row>
      <v-card
        width="400"
        class="mx-2 my-2"
        :key="index"
        v-for="(item, index) in listRepo"
      >
        <v-card-title>
          <v-list-item class="grow">
            <v-list-item-content>
              <v-list-item-title>{{ item.name }}</v-list-item-title>
            </v-list-item-content>

            <v-row align="center" justify="end"> Private </v-row>
          </v-list-item>
        </v-card-title>

        <v-card-text class="text-md font-weight-bold">
          <v-list-item>
            <v-list-item-content>{{ item.description }}</v-list-item-content>
            <v-list-item-avatar tile size="100" color="grey">
              <v-img :src="item.openGraphImageUrl" />
            </v-list-item-avatar>
          </v-list-item>
        </v-card-text>
        <v-card-action
          ><v-row class="d-flex align-content-center mx-5">
            <v-col cols="5" class="d-flex justify-start align-content-center">
              <div
                class="d-flex align-center text-h5"
                :style="{ height: '100%' }"
                v-if="item.sell === 'SELL'"
              >
                $ {{ item.amount }}
              </div>
              <v-text-field
                v-if="item.sell === 'UNLIST'"
                label="Amount"
                type="number"
                outlined
                prefix="$"
                :disabled="!paypalToken"
                v-model="amount"
              ></v-text-field>
            </v-col>
            <v-col class="d-flex mt-2 justify-end">
              <v-btn
                @click="sellRepo(item._id, amount)"
                color="red"
                v-if="item.sell === 'UNLIST'"
                :disabled="!paypalToken"
                >SELL</v-btn
              ><v-btn :disabled="!paypalToken" v-if="item.sell === 'SELL'" @click="unlistRepo(item._id)"
                >UNLIST</v-btn
              >
            </v-col>
          </v-row></v-card-action
        >
      </v-card>
    </v-row>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit } from 'nuxt-property-decorator'
@Component
export default class MyStore extends Vue {
  @Prop({ required: false }) readonly refreshRepo!: void
  @Prop({ required: false }) readonly paypalToken!: boolean
  @Prop({ required: true }) readonly listRepo!: Array<object>
  @Prop({ required: true }) readonly amountRefresh!: number
  public amount: number=this.amountRefresh
  @Emit()
  sellRepo(_id: string, amount: number) {
    return { _id, amount }
  }
  @Emit()
  unlistRepo(_id: string) {
    return { _id }
  }
}
</script>

Now whenever the paypal button not connected the sell button is disabled

Let's now create a function that can send money through paypal when buying one of the repo,now create a read access to that repo,now go to functions folder and create manage_access.js

"use strict";
const axios = require("axios");
const jwt = require("jsonwebtoken");
function makeid(length) {
  var result = "";
  var characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  var charactersLength = characters.length;
  for (var i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}
const formUrlEncoded = (x) =>
  Object.keys(x).reduce((p, c) => p + `&${c}=${encodeURIComponent(x[c])}`, "");
const paypal = require("@paypal/checkout-server-sdk");
const buy_paypal = async function (params) {
  const random = makeid(5);
  const cloudant = require("@cloudant/cloudant")({
    url: params.__bx_creds.cloudantnosqldb.url,
    plugins: [
      { iamauth: { iamApiKey: params.__bx_creds.cloudantnosqldb.apikey } },
    ],
  });
  const db = cloudant.db.use("ecommerce");
  const query = {
    selector: {
      $and: [
        { _id: { $eq: params._id } },
        { collection: { $eq: "private-repo" } },
      ],
    },
  };

  const res = await db.find(query);
  const paypalQuery = {
    selector: {
      $and: [
        { github_username: { $eq: res.docs[0].username } },
        { collection: { $eq: "paypal" } },
      ],
    },
  };

  const paypalEmail = await db.find(paypalQuery);
  // if(paypalEmail.docs[0].github_username===res.docs[0].username) return {status:false,message:"you could only buy repo that is not yours"}
  let clientId = params.paypal_client_id;
  let clientSecret = params.paypal_client_secret;
  let environment = new paypal.core.SandboxEnvironment(clientId, clientSecret);
  let client = new paypal.core.PayPalHttpClient(environment);
  let request = new paypal.orders.OrdersCreateRequest();
  request.requestBody({
    intent: "CAPTURE",
    purchase_units: [
      {
        amount: {
          currency_code: "USD",
          value: res.docs[0].amount,
        },
        payee: {
          email_address: paypalEmail.docs[0].email,
        },
      },
    ],

    application_context: {
      return_url: `${params.return_url}/${params.token}/${params._id}/${random}`,
      cancel_url: params.cancel_url,
    },
  });

  let response = await client.execute(request);
  await db.insert({
    random,
    id: response.result.id,
    token: params.token,
    collection: "transaction",
  });
  return response;
};
const manage_access = async function (params) {
  const { __ow_path } = params;
  // return {headers:{"Content-Type":"application/json"},statusCode:200,body:{data:{__ow_path}}}
  const [pam, token, _id, random] = __ow_path.split("/");
  const { access_token } = jwt.verify(token, params.token_pass);
  const cloudant = require("@cloudant/cloudant")({
    url: params.__bx_creds.cloudantnosqldb.url,
    plugins: [
      { iamauth: { iamApiKey: params.__bx_creds.cloudantnosqldb.apikey } },
    ],
  });
  const db = cloudant.db.use("ecommerce");
  const query = {
    selector: {
      $and: [
        { access_token: { $eq: access_token } },
        { collection: { $eq: "user" } },
      ],
    },
  };

  const res = await db.find(query);

  if (res.docs.length === 1) {
    const transaction = await db.find({
      selector: {
        $and: [{ random }, { token }, { collection: "transaction" }],
      },
    });

    let clientId = params.paypal_client_id;
    let clientSecret = params.paypal_client_secret;
    let environment = new paypal.core.SandboxEnvironment(
      clientId,
      clientSecret
    );
    let client = new paypal.core.PayPalHttpClient(environment);
    const request = new paypal.orders.OrdersCaptureRequest(transaction.docs[0].id);
    request.requestBody({});
    let response = await client.execute(request);

    await db.destroy(transaction.docs[0]._id, transaction.docs[0]._rev);
    const queryPrivate = {
      selector: {
        $and: [{ _id: { $eq: _id } }, { collection: { $eq: "private-repo" } }],
      },
    };

    const privateRepo = await db.find(queryPrivate);

    const queryRepo = {
      selector: {
        $and: [
          { username: { $eq: privateRepo.docs[0].username } },
          { collection: { $eq: "user" } },
        ],
      },
    };

    const repoOwner = await db.find(queryRepo);
    const queryPaypal = {
      selector: {
        $and: [
          { github_username: { $eq: privateRepo.docs[0].username } },
          { collection: { $eq: "paypal" } },
        ],
      },
    };

    const paypalAcc = await db.find(queryPaypal);
    const { data, status } = await axios({
      url: `https://api.github.com/repos/${privateRepo.docs[0].username}/${privateRepo.docs[0].name}/collaborators/${res.docs[0].username}`,
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        Authorization: `bearer ${repoOwner.docs[0].access_token}`,
      },
      data: {
        permission: "pull",
      },
      method: "PUT",
    });

    if (status === 201) {
      let paypal = paypalAcc.docs[0];
      let amount = Number(paypal.amount);
      amount += Number(privateRepo.docs[0].amount);
      paypal.amount = amount;
      await db.insert(paypal);
      const { _id:p, _rev:l, username, ...other } = privateRepo.docs[0];
      const selectOwnedRepo={selector:{
        ...other,
        owner_username: username,
        collection: "owned-repo",
        username: res.docs[0].username,
      }}
      const findOwnedRepo=await db.find(selectOwnedRepo)
const repoId=findOwnedRepo.docs.length>0?findOwnedRepo.docs[0]._id:undefined
const repoRev=findOwnedRepo.docs.length>0?findOwnedRepo.docs[0]._rev:undefined
      const ownedRepo = {
        _id:repoId,
        _rev:repoRev,
        ...other,
        owner_username: username,
        collection: "owned-repo",
        username: res.docs[0].username,
      };
      const { ok } = await db.insert(ownedRepo);
      if (ok) {
        return {
          headers: { location: `${params.frontend_url}/dashboard` },
          statusCode: 302,
        };

      } else {
        return {
          headers: { location: `${params.frontend_url}/error` },
          statusCode: 302,
        };

      }
    } else {

      return {
        headers: { location: `${params.frontend_url}/error` },
        statusCode: 302,
      };
    }
  }
};
module.exports.buy_paypal = buy_paypal;
module.exports.manage_access = manage_access;

This manage_access.js is used to tell the backend that if someone successfully pay the private repo amount it will automatically get access to it. After that deploy the function into the IBM Cloud functions using serverless deploy and voila our application is done.

Conclusion

Finally you can create your own application now using IBM Cloud Object Storage for static web hosting, IBM Cloud Function as the backend logic, and IBM cloudant as the database, you can go forward and make your own application now. I hope you enjoy this tutorial if you have question just comment down below and i will try as much as i can to answer it

Conclusion

spiritupbro — Sun, 03 Jan 2021 03:44:59 +0000

So finally you know how to create a simple app and deploy it to digitalocean app platform, as simple as app platform is, there is so many more use case you can use app platform for, the possibility is limitless, the limit is only your imagination, now go ahead and create your dream app easily with digitalocean app platform

Step 3 - Deploy To Digitalocean App Platform

spiritupbro — Sun, 03 Jan 2021 03:44:28 +0000

First of all we need to deploy the backend first, you can deploy the backend using this Deploy to DO button :

After you click that button you will see this screen :

Click next and you will see this screen :

Well, what deploy to Digitalocean button actually does is actually create a service automatically for you so you just need to fill in the necessary environment variable like github_client_id, github_client_secret etc. after you fill in and click next and you will need to choose one of the plans click on basic for now because we just need it for the demo and use the 512 MB RAM :

Click "Launch Basic App" then, wait for it to automatically deploy, after successfully deploy the app you will get your app deployed to <APP_URL>/api we use http routes /api because we don't want our backend routes to collide with our frontend routes because next we wanted to deploy our frontend to the same application now go to Components tab and click Create Component and choose Static Site select the repository and click next:

You can also create the frontend using deploy to Digitalocean and fill out the necessary environment variable just like before, because basically our frontend app is actually a static website so it don't need any backend to run it just use the underlying digitalocean Spaces and serve it from there go ahead and use this button if you want to deploy frontend easily:

It's basically the same as before but use static website instead of web service, now go ahead and fill in the necessary environment variable:

Here as you can see there are url variable if you separate the backend and frontend you need to fill in your other application url to that url and for the backend you should fill in frontend_url with your static website url so if all of this done you're successfully deploy your app into digitalocean app platform also don't forget to add authorization url in both github and paypal respectively :

This is for github you should change the <APP_URL> into your backend url

Then for your https://developer.paypal.com/developer/applications/ paypal application add this url the same you should change <APP_URL> into your backend URL, if everything deployed successfully you will see this screen :

And finally your app is done!!

Step 2 - Create Backend Using Expressjs

spiritupbro — Sun, 03 Jan 2021 03:44:08 +0000

Clone this repo in order for you to follow this tutorial :

gakpenting / opensource-marketplace-backend

DEPLOY TO DO

FRONTEND

https://github.com/spiritbro1/opensource-marketplace-backend

View on GitHub

Now create a simple expressjs using the express command line like this :

mkdir opensource-marketplace-backend
cd opensource-marketplace-backend
npx express-generator

We gonna need to connect the database using postgresql so in order to do that we gonna use sequelize for that, run this command to do that :

npx sequelize init

When you do npx sequelize init you will see config/config.json file change that to config/config.js and add this code :

module.exports={
  "development": {
    "username": "panda",
    "password": "panda1234",
    "database": "panda_database",
    "host": "127.0.0.1",
    "dialect": "postgres"
  },
  "test": {
    "username": "root",
    "password": null,
    "database": "database_test",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  "production": {
    "username": process.env.DB_USERNAME,
    "password": process.env.DB_PASSWORD,
    "database": process.env.DB_NAME,
    "host": process.env.DB_HOST,
    "port":process.env.DB_PORT,
    "dialect": "postgres",
    "dialectOptions": {
      "ssl": { "require": true, "rejectUnauthorized": false }
    }
  }
}

If you see in production object i use ssl because in order for us to connect to app platform database later, we need that ssl, also i change all of the hardcoded username,password, etc. to environment variable to add more to the security, so you don't need to worry if your password got stolen coz when we put it to open source, it will be added in safe environment of app platform environment variable, now let's create a table for our apps :

npx sequelize model:create --name for_sell --attributes repo_id:string,description:string,name:string,openGraphImageUrl:string,url:string,isPrivate:boolean,username:string,sell:string,amount:string

npx sequelize model:create --name owned_repo --attributes repo_id:string,description:string,name:string,openGraphImageUrl:string,url:string,sell:string,amount:integer,owner_username:string,username:string

npx sequelize model:create --name paypal --attributes github_username:string,email:string,amount:integer,disconnect:boolean

npx sequelize model:create --name transaction --attributes random:string,for_sell_id:string,token:string

npx sequelize model:create --name user --attributes username:string, token:text, role:string

Now create a docker-compose.yml file and add this code:

version: '3'
services:
  database:
    image: "postgres" 
    ports:
      - "5432:5432"
    env_file:
      - database.env 
    volumes:
      - database-data:/var/lib/postgresql/data/ 
volumes:
  database-data:

Run using docker-compose up -d then run npx sequelize db:migrate in order for you to create the table, now go to bin/www and change this line :

var port = normalizePort(process.env.PORT || '4000');
app.set('port', port);

This one will tell our app later to listen at port 4000 in app platform, now go to routes/index.js and change the code to this :

require("dotenv").config();
const express = require("express");
const router = express.Router();
const model = require("../models/index");
const { github: authorizeGithub } = require("./utils/authorize");
const {
  forSellRepo,
  allRepo,
  ownedRepo,
  profile,

} = require("./utils/for_sale");
const { sell_repo, unlist_repo, for_sale_repo, list_repo,repo_detail} = require("./utils/sell_repo");
const {
  authorize_paypal,
  save_paypal,
  get_paypal,
  disconnect_paypal,
} = require("./utils/paypal");
const { buy_paypal, manage_access } = require("./utils/manage_access");

router.get("/authorize_github", async function (req, res, next) {
  const params = {};
  params.code = req.query.code;
  params.token_pass = process.env.token_pass;
  params.frontend_url = process.env.frontend_url;
  params.github_client_id = process.env.github_client_id;
  params.github_client_secret = process.env.github_client_secret;
  const response = await authorizeGithub(params, model);
  return res.redirect(response.headers.location);
});
router.get("/get-for-sale-repo", async function (req, res, next) {
  try {
    const params = {};
    params.token = req.query.token;
    params.token_pass = process.env.token_pass;
    params.frontend_url = process.env.frontend_url;
    params.github_client_id = process.env.github_client_id;
    params.github_client_secret = process.env.github_client_secret;
    const response = await forSellRepo(params, model);
    return res.json(response);
  } catch (e) {
    console.log(e.message);
    return res.status(503).end();
  }
});
router.get("/get-all-repo", async function (req, res, next) {
  try {
    const params = {};
    params.token_pass = process.env.token_pass;
    params.frontend_url = process.env.frontend_url;
    params.github_client_id = process.env.github_client_id;
    params.github_client_secret = process.env.github_client_secret;
    params.before = req.query.before;
    params.after = req.query.after;
    params.token = req.query.token;
    const response = await allRepo(params, model);
    return res.json(response);
  } catch (e) {
    console.log(e.message);
    return res.status(503).end();
  }
});
router.get("/get-owned-repo", async function (req, res, next) {
  try {
    const params = {};
    params.token_pass = process.env.token_pass;
    params.token = req.query.token;
    params.frontend_url = process.env.frontend_url;
     const response = await ownedRepo(params, model);
    return res.json(response);
  } catch (e) {
    console.log(e.message);
    return res.status(503).end();
  }
});
router.get("/get-profile", async function (req, res, next) {
  const params = {};
  params.token_pass = process.env.token_pass;
  params.frontend_url = process.env.frontend_url;
  params.github_client_id = process.env.github_client_id;
  params.github_client_secret = process.env.github_client_secret;
  params.token = req.query.token;
  const response = await profile(params, model);
  return res.json(response);
});
router.post("/sell-repo", async function (req, res, next) {
  const params = {};
  params.name = req.body.name;
  params.amount = req.body.amount;
  params.token = req.query.token;
  params.token_pass = process.env.token_pass;
  params.frontend_url = process.env.frontend_url;
  params.github_client_id = process.env.github_client_id;
  params.github_client_secret = process.env.github_client_secret;
  const response = await sell_repo(params, model);
  return res.json(response);
});
router.post("/unlist-repo", async function (req, res, next) {
  const params = {};
  params.id = req.body.id;
  params.token = req.query.token;
  params.token_pass = process.env.token_pass;
  params.frontend_url = process.env.frontend_url;
  params.github_client_id = process.env.github_client_id;
  params.github_client_secret = process.env.github_client_secret;
  const response = await unlist_repo(params, model);
  return res.json(response);
});
router.get("/for-sale-repo", async function (req, res, next) {
  try {
    const params = {};
    params.token = req.query.token;
    params.token_pass = process.env.token_pass;
    params.frontend_url = process.env.frontend_url;
    params.github_client_id = process.env.github_client_id;
    params.github_client_secret = process.env.github_client_secret;
    const response = await for_sale_repo(params, model);
    return res.json(response);
  } catch (e) {
    console.log(e.message);
    return res.status(503).end();
  }
});
router.get("/paypal-auth", async function (req, res, next) {
  try {
    const params = {};
    params.code = req.query.code;
    params.frontend_url = process.env.frontend_url;
    params.paypal_client_id = process.env.paypal_client_id;
    params.paypal_client_secret = process.env.paypal_client_secret;
    const response = await authorize_paypal(params);
    return res.redirect(response.headers.location);
  } catch (e) {
    console.log(e.message);
    return res.status(503).end();
  }
});
router.post("/save-paypal", async function (req, res, next) {
  try {
    const params = {};
    params.token_pass = process.env.token_pass;
    params.token = req.body.token;
    params.email = req.body.email;
    const response = await save_paypal(params, model);
    return res.json(response);
  } catch (e) {
    console.log(e.message);
    return res.status(503).end();
  }
});
router.get("/get-paypal", async function (req, res, next) {
  try {
    const params = {};
    params.token_pass = process.env.token_pass;
    params.token = req.query.token;
    params.frontend_url = process.env.frontend_url;
    const response = await get_paypal(params, model);
    return res.json(response);
  } catch (e) {
    console.log(e.message);
    return res.status(503).end();
  }
});
router.post("/disconnect-paypal", async function (req, res, next) {
  const params = {};
  params.token_pass = process.env.token_pass;
  params.token = req.query.token;
  params.frontend_url = process.env.frontend_url;
  const response = await disconnect_paypal(params, model);
  return res.json(response);
});
router.post("/buy-paypal", async function (req, res, next) {
  const params = {};
  params.token_pass = process.env.token_pass;
  params.token = req.body.token;
  params.id = req.body.id;
  params.frontend_url = process.env.frontend_url;
  params.return_url = process.env.return_url;
  params.cancel_url = process.env.cancel_url;
  params.paypal_client_id = process.env.paypal_client_id;
  params.paypal_client_secret = process.env.paypal_client_secret;
  const response = await buy_paypal(params, model);
  return res.json(response);
});
router.post("/repo-detail", async function (req, res, next) {
  const params = {};
  params.name=req.body.name
  params.username=req.body.username
  const response = await repo_detail(params, model);
  return res.json(response);
});
router.get(
  "/manage-access/:token/:id/:random",
  async function (req, res, next) {
    const params = {};
    params.token_pass = process.env.token_pass;
    params.token = req.params.token;
    params.id = req.params.id;
    params.random = req.params.random;
    params.frontend_url = process.env.frontend_url;
    params.paypal_client_id = process.env.paypal_client_id;
    params.paypal_client_secret = process.env.paypal_client_secret;
    const response = await manage_access(params, model);
    return res.redirect(response.headers.location);
  }
);
router.post("/list-repo", async function (req, res, next) {
  try{
    const params = {};
  params.item = req.body.item;
  params.token = req.query.token;
  params.token_pass = process.env.token_pass;
  const response = await list_repo(params, model);
  return res.json(response);
  }catch(e){
    console.log(e.message)
    return res.status(503).end()
  }

});
router.get("/", async function (req, res, next) {
  return res.send("im healthy");
});
module.exports = router;

All of this is our main route in order for our application works, now we need to create all the logic create a folder called utils and add new file called authorize.js add this code :

"use strict";
const axios = require("axios");
const jwt = require("jsonwebtoken");
const formUrlEncoded = (x) =>
  Object.keys(x).reduce((p, c) => p + `&${c}=${encodeURIComponent(x[c])}`, "");
const github = async function (params,model) {
  if (params.code) {
    const { access_token } = await authenticate({ params });
    const { login,email } = await getUsername({ access_token });
    const {token} = await checkUsername({
      username: login,
      model,
      email,
      access_token,
      token_pass: params.token_pass,
    });

    if(token){
      return  {
        headers: { location: `${params.frontend_url}/callback/?token=${token}` },
        statusCode: 302
        };
    }else{
      return  {
        headers: { location: params.frontend_url },
        statusCode: 302
        };
    }

  } else {
    return {
      headers: { location: `${params.frontend_url}/login` },
      statusCode: 302
      };
  }
};
module.exports.github = github;
async function authenticate({ params }) {
  const { data } = await axios({
    url: "https://github.com/login/oauth/access_token",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      Accept: "application/json",
    },
    data: formUrlEncoded({
      client_id: params.github_client_id,
      client_secret: params.github_client_secret,
      code: params.code,
    }),
    method: "POST",
  });
  return data;
}
async function getUsername({ access_token }) {
  const { data } = await axios({
    url: " https://api.github.com/user",
    headers: {
      Authorization: `token ${access_token}`,
      Accept: "application/vnd.github.v3+json",
    },
    method: "GET",
  });
  return data;
}
async function checkUsername({ username, access_token, model, email,token_pass }) {
  const token = jwt.sign({ access_token }, token_pass);

  const [user,created] =await model.user.findOrCreate({where: {username}, defaults: {access_token,
    token,
    email}})
  if (user) {
    const updated=await user.update({access_token,
      token,
      email})
     return updated ? {token}:undefined;
  } else {
    return created ? {token}:undefined;

  }
}

This is used to authorize to github, add another file called utils/for_sale.js for creating logic to put our repo for sell :

"use strict";
const axios = require("axios");
const jwt = require("jsonwebtoken");
const formUrlEncoded = (x) =>
  Object.keys(x).reduce((p, c) => p + `&${c}=${encodeURIComponent(x[c])}`, "");
const allRepo = async function (params,model) {
  const data = await getAllRepo({
    model,
    token: params.token,
    token_pass: params.token_pass,
    before:params.before,
    after:params.after,
  });

  if (data&&data.nodes.length>0) {
    return {
      data,
    };
  } else {
    return {
      data: [],
    };
  }
};
const forSellRepo = async function (params,model) {
  const data = await getForSellRepo({
    model,
    token: params.token,
    token_pass: params.token_pass,
  });

  if (data&&data.length>0) {
    return {
      data,
    };
  } else {
    return {
      data: [],
    };
  }
};
const ownedRepo = async function (params,model) {
  const data = await getOwnedRepo({
    model,
    token: params.token,
    token_pass: params.token_pass,
  });

  if (data&&data.length>0) {
    return {
      data,
    };
  } else {
    return {
      data: [],
    };
  }
};

const profile = async function (params,model) {
  const data = await getProfile({
    model,
    token: params.token,
    token_pass: params.token_pass,
  });

  if (data) {
    return {
      data: data.data.viewer,
    };
  } else {
    return {
      data: {},
    };
  }
};

async function getProfile({ model, token_pass, token }) {
  const { access_token } = jwt.verify(token, token_pass);
  const _user=await model.user.findOne({where:{access_token}})

  if (_user) {
    const { data } = await axios({
      url: "https://api.github.com/graphql",
      headers: {
        Authorization: `token ${_user.access_token}`,
        Accept: "application/vnd.github.v3+json",
      },
      method: "POST",
      data: { query: "query { viewer { login,avatarUrl }}" },
    });
    return data;
  } else {
    return null;
  }
}

async function getAllRepo({ model, token_pass, token ,before,after}) {
  const { access_token } = jwt.verify(token, token_pass);
  const _user=await model.user.findOne({where:{access_token}})
  if (_user) {
    const { data } = await axios({
      url: "https://api.github.com/graphql",
      headers: {
        Authorization: `token ${_user.access_token}`,
        Accept: "application/vnd.github.v3+json",
      },
      method: "POST",
      data: {
        query: `{
          repositoryOwner(login: "${_user.username}") {
            repositories(${before||after?before?"last:5,":after?"first:5,":"":"first:5,"}${before?"before:\""+before+"\",":""}${after?"after:\""+after+"\",":""}affiliations:OWNER) {
           pageInfo {
        startCursor
        hasNextPage
        hasPreviousPage
        endCursor
      }
              nodes {
                isPrivate
                description
                name
                openGraphImageUrl
                url
                id
              }
            }
          }
        }
      `,
      },
    });

    const nodes = data.data.repositoryOwner.repositories;
    return nodes;
  } else {

    return [];
  }
}
async function getForSellRepo({ model, token_pass, token }) {
  const { access_token } = jwt.verify(token, token_pass);
  const _user=await model.user.findOne({where:{access_token}})

  if(_user){
    const {username}=_user;
    const forSell=await model.for_sell.findAll({where:{username}})
    return forSell;
  }else{
    return []
  }

}
async function getOwnedRepo({ model, token_pass, token }) {
  let _user
  if(token){
    const { access_token } = jwt.verify(token, token_pass);
   _user=await model.user.findOne({where:{access_token}})
  }

  if(_user){
    const {username}=_user;
    const ownedRepo=await model.owned_repo.findAll({where:{username}})
    return ownedRepo;
  }else{
    return []
  }

}
module.exports.profile = profile;
module.exports.forSellRepo = forSellRepo;
module.exports.ownedRepo = ownedRepo;
module.exports.allRepo = allRepo;

Now create a utils/manage_access.js to buy paypal and manage access to github repo :

"use strict";
const axios = require("axios");
const jwt = require("jsonwebtoken");
function makeid(length) {
  var result = "";
  var characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  var charactersLength = characters.length;
  for (var i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}
const formUrlEncoded = (x) =>
  Object.keys(x).reduce((p, c) => p + `&${c}=${encodeURIComponent(x[c])}`, "");
const paypal = require("@paypal/checkout-server-sdk");
const buy_paypal = async function (params,model) {
  const random = makeid(5);

  const repo= await model.for_sell.findOne({where:{repo_id:params.id}})
  const paypalEmail= await model.paypal.findOne({where:{github_username:repo.username}})

  let clientId = params.paypal_client_id;
  let clientSecret = params.paypal_client_secret;
  let environment = new paypal.core.SandboxEnvironment(clientId, clientSecret);
  let client = new paypal.core.PayPalHttpClient(environment);
  let request = new paypal.orders.OrdersCreateRequest();
  request.requestBody({
    intent: "CAPTURE",
    purchase_units: [
      {
        amount: {
          currency_code: "USD",
          value: repo.amount,
        },
        payee: {
          email_address: paypalEmail.email,
        },
      },
    ],

    application_context: {
      return_url: `${params.return_url}/${params.token}/${params.id}/${random}`,
      cancel_url: params.cancel_url,
    },
  });

  let response = await client.execute(request);
  const [_transaction,created]=await model.transaction.findOrCreate({where:{random},defaults:{for_sell_id: response.result.id,
    token: params.token}})
    if(!created){
      await _transaction.update({for_sell_id:response.result.id,
        token:params.token})
    }

  return response;
};
const manage_access = async function (params,model) {
  const { token,id,random } = params;
  const { access_token } = jwt.verify(token, params.token_pass);
  const res=await model.user.findOne({where:{access_token}})
  if (res) {
    const transaction=await model.transaction.findOne({where:{random,token}})
    let clientId = params.paypal_client_id;
    let clientSecret = params.paypal_client_secret;
    let environment = new paypal.core.SandboxEnvironment(
      clientId,
      clientSecret
    );
    let client = new paypal.core.PayPalHttpClient(environment);
    const request = new paypal.orders.OrdersCaptureRequest(transaction.for_sell_id);
    request.requestBody({});
    let response = await client.execute(request);

    await transaction.destroy();

const privateRepo=await model.for_sell.findOne({where:{repo_id:id}})
    const repoOwner=await model.user.findOne({where:{username:privateRepo.username }})
    const paypalAcc=await model.paypal.findOne({where:{github_username:privateRepo.username }})
    const deleted = await axios({
      url: `https://api.github.com/repos/${privateRepo.username}/${privateRepo.name}/collaborators/${res.username}`,
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        Authorization: `bearer ${repoOwner.access_token}`,
      },
      method: "DELETE",
    });
    const { data, status } = await axios({
      url: `https://api.github.com/repos/${privateRepo.username}/${privateRepo.name}/collaborators/${res.username}`,
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        Authorization: `bearer ${repoOwner.access_token}`,
      },
      data: {
        permission: "admin",
      },
      method: "PUT",
    });

    if (status === 201) {
      let paypal = paypalAcc;
      let amount = Number(paypal.amount);
      amount += Number(privateRepo.amount);
      await paypal.update({amount});
      const {  username,repo_id, description,name,openGraphImageUrl,url,sell,amount:_amount } = privateRepo;
      const [owned,created]=await model.owned_repo.findOrCreate({where:{repo_id},defaults:{
        description,name,openGraphImageUrl,url,sell,amount:_amount,
        owner_username: username,
        username: res.username
      }})
     await owned.update({
      description,name,openGraphImageUrl,url,sell,amount:_amount,
      owner_username: username,
      username: res.username})

      if (created||owned) {
        return {
          headers: { location: data.html_url },
          statusCode: 302,
        };

      } else {
        return {
          headers: { location: `${params.frontend_url}/dashboard?error=not_created` },
          statusCode: 302,
        };

      }
    } else {

      return {
        headers: { location: `${params.frontend_url}/dashboard?error=status_not_201` },
        statusCode: 302,
      };
    }
  }
};
module.exports.buy_paypal = buy_paypal;
module.exports.manage_access = manage_access;

Make a utils/paypal.js in order for us to be able to save our sandbox paypal account :

"use strict";
const axios = require("axios");
const jwt = require("jsonwebtoken");
const formUrlEncoded = (x) =>
  Object.keys(x).reduce((p, c) => p + `&${c}=${encodeURIComponent(x[c])}`, "");
const authorize_paypal = async function (params) {
   if (params.code) {
    const { access_token } = await authenticate({ params });
    const { emails } = await getEmail({ access_token });


    if (emails) {
      return {
        headers: { location: `${params.frontend_url}/callback/?email=${emails[0].value}` },
        statusCode: 302,
      };
    } else {
      return {
        headers: { location: `${params.frontend_url}/dashboard` },
        statusCode: 302,
      };
    }
  } else {
    return {
      headers: { location: `${params.frontend_url}/login` },
      statusCode: 302,
    };
  }
};

async function authenticate({ params }) {
  const { data } = await axios({
    url: "https://api.sandbox.paypal.com/v1/oauth2/token",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      Authorization: `Basic ${Buffer.from(
        `${params.paypal_client_id}:${params.paypal_client_secret}`
      ).toString("base64")}`,
    },
    data: formUrlEncoded({
      grant_type: "authorization_code",
      code: params.code,
    }),
    method: "POST",
  });
  return data;
}
async function getEmail({ access_token }) {
  const { data } = await axios({
    url:
      "https://api.sandbox.paypal.com/v1/identity/oauth2/userinfo?schema=paypalv1.1",
    headers: {
      Authorization: `Bearer ${access_token}`,
      "Content-Type": "application/json",
    },
    method: "GET",
  });
  return data;
}
const save_paypal=async function(params,model){

  const ok=await saveEmail({model,token_pass:params.token_pass,token:params.token,email:params.email})
  if(ok){
    return {status:true,message:"email saved"}
  }else{
    return {status:false,message:"email not saved"}
  }
}
async function saveEmail({ token_pass,token, model, email }) {
  const { access_token } = jwt.verify(token, token_pass);
  const _user=await model.user.findOne({where:{access_token}})
  if (_user) {
    const [_paypal,created]=await model.paypal.findOrCreate({where:{github_username:_user.username},defaults: {
      email,
      amount:0,
      disconnect:false
    }})
    if(!created){
      _paypal.disconnect=false;
      await _paypal.save()
      return true
    }else{
      return created;
    }


  } else {
    return false
  }
}
const get_paypal=async function(params,model){

  const ok=await getPaypal({model,token_pass:params.token_pass,token:params.token})
  if(ok){
    return {status:true,data:ok}
  }else{
    return {status:false,message:"error"}
  }
}
async function getPaypal({ model, token_pass, token }) {
  const { access_token } = jwt.verify(token, token_pass);
   const _user=await model.user.findOne({where:{access_token}})
  if(_user){
    const _paypal=await model.paypal.findOne({where:{github_username:_user.username}})
    return _paypal;          
  }else{
    return {status:false,data:[],message:"error token"}
  }

}
const disconnect_paypal=async function(params,model){

  const ok=await deletePaypal({model,token_pass:params.token_pass,token:params.token})
  if(ok){
    return {status:true,data:ok}
  }else{
    return {status:false,message:"error"}
  }
}
async function deletePaypal({ model, token_pass, token }) {
  const { access_token } = jwt.verify(token, token_pass);
  const _user=await model.user.findOne({where:{access_token}})

await model.for_sell.update({
sell: "UNLIST",
}, {
  where: {
    username:_user.username
  }
});

  if(_user){
    const _paypal=await model.paypal.findOne({where:{github_username:_user.username}})
    _paypal.disconnect=true;
    _paypal.save()
    return {status:true,message:"success"}

  }else{
    return {status:false,data:[],message:"error token"}
  }

}
module.exports.authorize_paypal = authorize_paypal;
module.exports.save_paypal = save_paypal;
module.exports.get_paypal = get_paypal;
module.exports.disconnect_paypal = disconnect_paypal;

And last but not least create a utils/sell_repo.js to sell the repo

const axios = require("axios");
const jwt = require("jsonwebtoken");
const sell_repo = async function (params,model) {


    const data = await sellRepo({
      model,
      token: params.token,
      token_pass: params.token_pass,
      name:params.name,
      amount:params.amount

    });

    if (data && data.length>0) {
      return {
        data
      };
    } else {
      return {
        data,
      };
    }
  };
  const list_repo = async function (params,model) {


    const data = await listRepo({
      model,
      token: params.token,
      token_pass: params.token_pass,
      item:params.item,


    });

    if (data && data.length>0) {
      return {
        data
      };
    } else {
      return {
        data,
      };
    }
  };
  const unlist_repo = async function (params,model) { 

    const data = await unlistRepo({
      model,
      token: params.token,
      token_pass: params.token_pass,
      id:params.id,

    });

    if (data && data.length>0) {
      return {
        data
      };
    } else {
      return {
        data,
      };
    }
  };
  const for_sale_repo = async function (params,model) {


    const data = await forSaleRepo({
      model,
      token: params.token,
      token_pass: params.token_pass,
    });

    if (data && data.data.length>0) {
      return {
        data
      };
    } else {
      return {
        data,
      };
    }
  };
  async function repo_detail(params,model){
return (await model.for_sell.findOne({where:{username:params.username,name:params.name}}))
  }
  async function getRepoDetail({_user, name}) {
      if (_user) {
      const { data } = await axios({
        url: "https://api.github.com/graphql",
        headers: {
          Authorization: `token ${_user.access_token}`,
          Accept: "application/vnd.github.v3+json",
        },
        method: "POST",
        data: {
          query: `{repository(name:"${name}",owner:"${_user.username}"){
            description
                           name
                           openGraphImageUrl
                           url
                           id
                           isPrivate
         }}
        `,
        },
      });
      const repository = data.data.repository
      return repository;
    } else {

      return undefined;
    }
  }
  async function sellRepo({ model, token_pass, token,name,amount}) {
    const { access_token } = jwt.verify(token, token_pass);
      const _user=await model.user.findOne({where:{access_token}})    
    if(_user){
      let repo = await getRepoDetail({_user,name})
      if(repo){
        const {id,...repoDetail}=repo;
        const [_repo, created] = await model.for_sell.findOrCreate({
          where: { repo_id: repo.id },
          defaults: {
            ...repoDetail,
            sell:"SELL",
            amount:amount
          }
        });
        const updated=await _repo.update({...repoDetail,
          sell:"SELL",
          amount:amount})
        if(updated||created){
          const forSale=await model.for_sell.findAll({where:{username:_user.username}})
          return forSale
        }else{
          return {status:false,data:[],message:"error selling"}  
        }

      }else{
        return {status:false,data:[],message:"error selling"}
      }

    }else{
      return {status:false,data:[],message:"error token"}
    }

  }
  async function listRepo({ model, token_pass, token,item }) {
    const { access_token } = jwt.verify(token, token_pass);
    const _user=await model.user.findOne({where:{access_token}})
    if(_user){
      const {id,...other}=item
      const [repo,created]=await model.for_sell.findOrCreate({where:{repo_id:id},defaults:{
...other,
sell:"UNLIST",
amount:0,
username:_user.username
      }})
     if(repo){
       const updated=await repo.update({...other,sell:"UNLIST",amount:0,username:_user.username})
       if(created||updated){
        const repoAll=await model.for_sell.findAll({where:{username:_user.username}})
         return repoAll
     }else{
       return {status:false,data:[],message:"error list"}
     }
     }


    }else{
      return {status:false,data:[],message:"error token"}
    }

  }
  async function unlistRepo({ model, token_pass, token,id }) {
    const { access_token } = jwt.verify(token, token_pass);
    const _user=await model.user.findOne({where:{access_token}})
    if(_user){
      const repo=await model.for_sell.findOne({where:{repo_id:id}})
      if(repo){
        repo.sell="UNLIST";
        await repo.save()
        const repoAll=await model.for_sell.findAll({where:{username:_user.username}})
        return repoAll
      }else{
        return {status:false,data:[],message:"error unlist"}
      }

    }else{
      return {status:false,data:[],message:"error token"}
    }

  }
  async function forSaleRepo({ model, token_pass, token }) {
    let _user;
    if(token){
      const { access_token } = jwt.verify(token, token_pass);
      _user=await model.user.findOne({where:{access_token}})
    }

     const repo = await model.for_sell.findAll({where:{sell:"SELL"}})
      return {username:_user?_user.username:null,data:repo}   
  }
  module.exports.sell_repo = sell_repo;
  module.exports.unlist_repo = unlist_repo;
  module.exports.for_sale_repo = for_sale_repo;
  module.exports.list_repo = list_repo;
  module.exports.repo_detail = repo_detail;

If you have done all of that now create an .env file and write this :

frontend_url=<our static nuxtjs frontend url>
github_client_id=<github client id>
github_client_secret=<github client secret>
paypal_client_id=<paypal client id>
paypal_client_secret=<paypal client secret>
token_pass=<token pass for jwt>
return_url=<https://your_app_platform_url/manage-access>
cancel_url=<https://frontend_url/dashboard?cancel=message>

Now you've successfully create the backend of our app the step 3 would be to deploy this app into app platform

Step 1 - Create Our Frontend Using Nuxtjs

spiritupbro — Sun, 03 Jan 2021 03:43:46 +0000

Clone the repo of this open source marketplace frontend here :

gakpenting / opensource-marketplace-frontend

DEPLOY TO DO BUTTON

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

For detailed explanation on how things work, check out Nuxt.js docs.

View on GitHub

First of all create a nuxtjs application by using this command :

yarn create nuxt-app opensource-marketplace-frontend

Create your application using this settings :

? Project name: frontend
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: None

After finish run the app using yarn dev and you should see this screen :

Now go to the nuxt.config.js and search for this line below, and change dark to false :

...
vuetify: {
    defaultAssets: {icons: 'fa'},
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      themes: {
        dark: {
...

We will be using non dark mode for now but it's a matter of choice if you want to make it dark you can just put it to true, now after you change the theme to light then change the content in layouts/default.vue :

<template>
  <v-app >
<nuxt/>
  </v-app>
</template>

After you finish filling the content inside layouts/default.vue, go to pages/index.vue and write this code, to create our homepage :

<template>
  <Home :login="login" />
</template>
<script lang="ts">
import Cookies from 'js-cookie'
import Home from '@/components/Home.vue'
import { Component, Vue } from 'nuxt-property-decorator'
@Component({
  components: {
    Home,
  },
})
export default class MyStore extends Vue {
  public login: boolean =false;

      mounted(){
        this.login=Cookies.get('token') && Cookies?.get('token')?.trim() !== ''
      ? true
      : false
      }
}
</script>

Here you can see that index.vue use Home as their base component, let's now create our Home component, create components/Home.vue then write code like this :

<template>
  <div :class="['mx-5', 'my-5']">
    <v-row justify="center">
      <div
        :class="[`text-h1`, 'text-center']"
        v-text="'Open Source Marketplace'"
      ></div>
    </v-row>
    <v-row justify="center">
      <div
        :class="[`text-h3`, 'px-5', 'text-center', 'my-5']"
        v-text="'Here you can buy or sell open source repo'"
      ></div>
    </v-row>
    <v-row justify="center" :class="['my-2']">
      <v-btn
        :class="['my-2']"
        color="info"
        elevation="2"
        v-show="login"
        href="/dashboard"
        >DASHBOARD</v-btn
      >
      <v-btn
        :class="['my-2']"
        color="info"
        elevation="2"
        href="/login"
        v-show="!login"
        >LOGIN</v-btn
      >
      <v-btn
        :class="['my-2', 'mx-2']"
        color="error"
        elevation="2"
        v-show="login"
        @click="logout"
        >LOGOUT</v-btn
      >
    </v-row>
    <v-row>
      <v-card
        class="mx-auto my-12"
        max-width="374"
        :key="index"
        v-for="(item, index) in forSale"
      >
        <v-img height="250" :src="item.openGraphImageUrl"></v-img>

        <v-card-title>{{ item.name }}</v-card-title>

        <v-card-text>
          <div>{{ item.description }}</div>
        </v-card-text>

        <v-divider class="mx-4"></v-divider>

        <v-card-actions>
          <v-flex>$ {{ item.amount }}</v-flex>
          <v-flex v-if="item.username !== username && !item.owned"
            ><div class="d-flex justify-end">
              <v-btn
              :disabled="disabled"
                class="d-flex justify-end"
                color="deep-purple lighten-2"
                @click="buyNow(item._id)"
                text
              >
                Buy Now
              </v-btn>
            </div></v-flex
          >
          <v-flex v-if="item.username === username || item.owned"
            ><div class="d-flex justify-end">

              <v-btn
              :disabled="disabled"
                class="d-flex justify-end"
                color="deep-purple lighten-2"
                :href="item.url"
                target="_blank"
                text
              >
                GO TO URL
              </v-btn>
            </div></v-flex
          >
        </v-card-actions>
      </v-card>
    </v-row>
  </div>
</template>
<script lang="ts">
import Cookies from 'js-cookie'
import { Component, Vue, Prop } from 'nuxt-property-decorator'
import {configs} from '@/utils/configs.js'
@Component
export default class MyStore extends Vue {
  @Prop({ required: true }) readonly login!: boolean
  public forSale: Array<object> = []
  public username: string = ''
  public disabled: boolean = false
  public buy_paypal_url: string = ""
  logout() {
    Cookies.remove('token')
    window.location.reload()
  }
  async mounted() {
console.log(configs)
    const token = Cookies.get('token')
    const ownedRepoUrl = configs.get_owned_repo_url
    const url = configs.for_sale_repo_url
    try {
      const { data } = await this.$axios.get(`${url}?token=${token}`)
      const ownedRepo = await this.$axios.get(`${ownedRepoUrl}?token=${token}`)

      this.forSale = data.data.data.map((a:any) => {
        if (
          ownedRepo.data.data.filter((b:any) => b.owner_username === a.username&&a.name===b.name)
            .length > 0
        ) {
          a.owned = true
          return a
        } else {
          return a
        }
      })
      this.username = data.data.username
    } catch (e) {
      console.log(e.message)
    }
  }
  async buyNow(_id:any) {
    this.disabled=true;
    const token = Cookies.get('token')
    const url=<string>configs.buy_paypal_url;
    const res = await this.$axios.post(url, { _id, token })
    if (res.data) {
      const link=res.data.result.links.filter((a:any)=>a.rel==="approve")[0].href
      window.location.href=link;
    }else{
      this.disabled=false;
      alert("error")
    }
  }
}
</script>

And then you will got this as a homepage :

Go to nuxt.config.js and add server object

import colors from 'vuetify/es5/util/colors'

export default {
  // Target (https://go.nuxtjs.dev/config-target)
  server: {
    port: 8080, // default: 3000
    host: '0.0.0.0' // default: localhost
  },
  target: 'server',
  env: {
    github_client_id: process.env.github_client_id,
    paypal_client_id:process.env.paypal_client_id,
    url:process.env.url,
    prefix:process.env.prefix,
  },
  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    titleTemplate: '%s ',
    title: 'Open Source Marketplace',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
    '@nuxtjs/dotenv'
  ],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {},

  // Vuetify module configuration (https://go.nuxtjs.dev/config-vuetify)
  vuetify: {
    defaultAssets: {icons: 'fa'},
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
        },
      },
    },
  },

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {},
}

Create a login page go to pages/login.vue to create a login form that can login to github

<template>
  <Login />
</template>
<script lang="ts">
import Login from '@/components/Login.vue'
import { Component, Vue } from 'nuxt-property-decorator'
@Component({
  components: {
    Login,
  },
})
export default class MyStore extends Vue {}
</script>

Create the component in components/Login.vue

<template>

   <v-row justify="center" align="center">
<v-card>
  <v-card-text>
    <v-row :class="['my-3','mx-3','text-h4']">LOGIN USING YOUR GITHUB ACCOUNT</v-row>
    <v-row align="center" justify="center">
      <v-btn @click="login_github"><v-icon class="mx-2 my-2">fab fa-github</v-icon>LOGIN</v-btn>
    </v-row>
  </v-card-text>
</v-card>
   </v-row>

</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import {configs} from '@/utils/configs.js'
@Component
export default class MyStore extends Vue {
  login_github(){
    window.location.href="https://github.com/login/oauth/authorize?scope=repo&client_id="+configs.github_client_id
  }
}
</script>

Notice that we added configs.github_client_id you can get that by creating oauth apps in github developer setting https://github.com/settings/developers create new oauth apps then copy paste the github client id there,now let's create our environment variable create a folder called utils and then create a file called configs.js this will be our global configuration to get variable like github_client_id, github_client_secret etc.

const configs={}
configs.url=process.env.url;
configs.prefix=process.env.prefix;
configs.github_client_id=process.env.github_client_id
configs.paypal_client_id=process.env.paypal_client_id
configs.save_paypal_url=`${configs.url}${configs.prefix}/save-paypal`
configs.buy_paypal_url=`${configs.url}${configs.prefix}/buy-paypal`
configs.for_sale_repo_url=`${configs.url}${configs.prefix}/for-sale-repo`
configs.disconnect_paypal_url=`${configs.url}${configs.prefix}/disconnect-paypal`
configs.redirect_uri_paypal=`${configs.url}${configs.prefix}/paypal-auth`
configs.unlist_repo_url=`${configs.url}${configs.prefix}/unlist-repo`
configs.sell_repo_url=`${configs.url}${configs.prefix}/sell-repo`
configs.get_all_repo_url=`${configs.url}${configs.prefix}/get-all-repo`
configs.get_profile_url=`${configs.url}${configs.prefix}/get-profile`
configs.get_for_sale_url=`${configs.url}${configs.prefix}/get-for-sale-repo`
configs.get_owned_repo_url=`${configs.url}${configs.prefix}/get-owned-repo`
configs.get_paypal_url=`${configs.url}${configs.prefix}/get-paypal`
configs.list_repo_url=`${configs.url}${configs.prefix}/list-repo`
configs.repo_detail_url=`${configs.url}${configs.prefix}/repo-detail`
module.exports={configs}

When in development you also need .env file to make it easy to handle the environment variable go ahead and create .env with this value :

github_client_id=<github_client_id>
paypal_client_id=<paypal_client_id>
url=http://localhost:4000
prefix=

Change the value according to your need,after that create a dashboard go to pages/dashboard.vue and write this code :

<template>
  <Dashboard :login="login" />
</template>
<script lang="ts">
import Cookies from 'js-cookie'
import Dashboard from '@/components/Dashboard.vue'
import { Component, Vue } from 'nuxt-property-decorator'
@Component({
  components: {
    Dashboard,
  },
})
export default class MyStore extends Vue {
  public login: boolean =false;

      mounted(){
this.login=Cookies.get('token') && Cookies?.get('token')?.trim() !== ''
      ? true
      : false
      }
}
</script>

Create a dashboard component to make it more easy to maintain late go ahead and create components/Dashboard.vue and write this code :

<template>
  <v-container>
    <v-row justify="space-between">
      <v-col cols="4" class="text-h4 font-weight-bold"
        ><a href="/" style="text-decoration: none; color: black">Home</a></v-col
      >
      <v-col cols="4" class="d-flex justify-end"
        ><v-btn @click="logout">LOGOUT</v-btn></v-col
      >
    </v-row>
    <DashboardInfo
      :disabled="disabled"
      :username="username"
      :profilePhoto="profilePhoto"
      :paypalToken="paypalToken"
      :paypalBalance="paypalBalance"
      @disconnect="disconnectPaypal"
      @connect="connectPaypal"
    />
    <v-row justify="space-between">
      <v-col cols="4" class="text-h4 font-weight-bold"
        >For Sale Repo List</v-col
      >
    </v-row>
    <DashboardForSale
      :disabled="disabled"
      :ownedRepo="false"
      :amountRefresh="amountRefresh"
      @get-all-repo="getAllRepo"
      :listRepo="forSale"
      :paypalToken="paypalToken"
      @sell-repo="sellRepo($event.name, $event.amount)"
      @unlist-repo="unlistRepo($event.repo_id)"
    />
    <v-row justify="space-between">
      <v-col cols="4" class="text-h4 font-weight-bold">Owned Repo</v-col>
    </v-row>
    <DashboardOwned
      :amountRefresh="amountRefresh"
      :disabled="disabled"
      :ownedRepo="true"
      :paypalToken="paypalToken"
      :listRepo="ownedRepo"
    />
    <DashboardRepoAll
      :disabled="disabled"
      @list-repo="listRepo($event.item)"
      @get-all-repo="getAllRepo($event.after_, $event.before_)"
      :pageInfo_="pageInfo_"
      :dialog="dialog"
      :allRepo="allRepo"
    />
    <v-snackbar v-model="snackbarAmount">
      the amount shouldn't be negative or zero
    </v-snackbar>
  </v-container>
</template>

<script lang="ts">
import Cookies from 'js-cookie'
import DashboardInfo from '@/components/dashboard_components/DashboardInfo.vue'
import DashboardForSale from '@/components/dashboard_components/DashboardForSale.vue'
import DashboardOwned from '@/components/dashboard_components/DashboardOwned.vue'
import DashboardRepoAll from '@/components/dashboard_components/DashboardRepoAll.vue'
import { Component, Vue, Prop } from 'nuxt-property-decorator'
import { configs } from '@/utils/configs.js'
@Component({
  components: {
    DashboardInfo,
    DashboardForSale,
    DashboardOwned,
    DashboardRepoAll,
  },
})
export default class MyStore extends Vue {
  @Prop({ required: true }) readonly login!: boolean
  public dialog: boolean = false
  public username: string = ''
  public profilePhoto: string = ''
  public snackbarAmount: boolean = false
  public paypalToken: boolean = false
  public forSale: Array<object> = []
  public allRepo: Array<object> = []
  public ownedRepo: Array<object> = []
  public paypalBalance: number = 0
  public amountRefresh: number = 0
  public disabled: boolean = false
  public pageInfo_: object = {hasPreviousPage:false,hasNextPage:false,startCursor:"",endCursor:""}
  logout() {
    Cookies.remove('token')
    window.location.href = '/'
  }
  async created() {
    // if (!this.login) window.location.href = '/'
    this.disabled = true
    const token = Cookies.get('token')
    const url = configs.get_profile_url
    const forSaleUrl = configs.get_for_sale_url
    const ownedRepoUrl = configs.get_owned_repo_url
    const getPaypalUrl = configs.get_paypal_url
    const profile = await this.$axios.get(`${url}?token=${token}`)
    this.username = profile.data.data.login
    this.profilePhoto = profile.data.data.avatarUrl
    const forSale = await this.$axios.get(`${forSaleUrl}?token=${token}`)
    this.forSale = forSale.data.data
    const ownedRepo = await this.$axios.get(`${ownedRepoUrl}?token=${token}`)
    this.ownedRepo = ownedRepo.data.data
    const paypalToken = await this.$axios.get(`${getPaypalUrl}?token=${token}`)

    if (paypalToken.data.status && !paypalToken.data.data.disconnect) {
      this.paypalToken = true
      this.paypalBalance = paypalToken.data.data.amount
    }
    this.disabled = false
  }
  async getAllRepo(after_: string, before_: string): Promise<void> {
     this.disabled = true
    const token = Cookies.get('token')
    const url = configs.get_all_repo_url

    if (this.allRepo.length === 0) {
      const { data } = await this.$axios.get(`${url}?token=${token}`)
      this.allRepo = data.data.nodes.map(({...other})=>(this.forSale.filter(({repo_id}:any)=>repo_id===other.id).length>0?{added:true,...other}:{...other}))
      console.log(this.allRepo)
      this.pageInfo_ = data.data.pageInfo
    } else if(typeof after_==="string"||typeof before_==="string"){
      const { data } = await this.$axios.get(
        `${url}?token=${token}${before_ ? `&before=${before_}` : ''}${
          after_ ? `&after=${after_}` : ''
        }`
      )
      this.allRepo = data.data.nodes.map(({...other})=>(this.forSale.filter(({repo_id}:any)=>repo_id===other.id).length>0?{added:true,...other}:{...other}))
      this.pageInfo_ = data.data.pageInfo
    }

    this.dialog = true
    this.disabled = false
  }
  async sellRepo(name: string, amount: number) {
    // console.log(amount)
    this.disabled = true
    if (Number(amount) === 0 || Number(amount) < 0 || !amount) {

      this.snackbarAmount = true
      this.disabled = false
      return
    } else {
      const token = Cookies.get('token')
      const url = configs.sell_repo_url

      const { data } = await this.$axios.post(`${url}?token=${token}`, {
        name,
        amount,
      })
      this.amountRefresh = 0
      this.forSale = data.data
    }
    this.disabled = false
  }
  async listRepo(item: object): Promise<void> {
      this.disabled = true
    const token = Cookies.get('token')
    const url = configs.list_repo_url
    const { data } = await this.$axios.post(`${url}?token=${token}`, { item })
    this.forSale = data.data
    this.dialog=false
    this.disabled = false
  }
  async unlistRepo(id: string) {
    this.disabled = true
    const token = Cookies.get('token')
    const url = configs.unlist_repo_url
    const { data } = await this.$axios.post(`${url}?token=${token}`, { id })
    this.forSale = data.data
    this.disabled = false
  }
  async connectPaypal() {
    if (this.username.trim() !== '') {
      window.location.href = `https://www.sandbox.paypal.com/connect/?flowEntry=static&client_id=${configs.paypal_client_id}&response_type=code&scope=email&redirect_uri=${configs.redirect_uri_paypal}`
    } else {
      alert('please wait until username shown')
    }
  }
  async disconnectPaypal() {
    this.disabled = true
    if (this.username.trim() !== '') {
      const url = configs.disconnect_paypal_url
      const token = Cookies.get('token')
     await this.$axios.post(`${url}?token=${token}`)
      this.paypalToken = false
    } else {
      alert('please wait until username shown')
    }
    this.disabled = false
    if (this.forSale.length > 0) {
      this.getforSale()
    }
  }
  async getforSale() {
    this.disabled = true
    const token = Cookies.get('token')
    const url = configs.get_for_sale_url
    const { data } = await this.$axios.get(`${url}?token=${token}`)
    this.forSale = data.data
    this.disabled = false
  }
}
</script>

Inside Dashboard.vue component if you notice there is four more component inside the Dashboard.vue component we make that so that the component is more modular and easy to maintain for later use, now let's go ahead and create the first Dashboard.vue modular component components/dashboard_components/DashboardInfo.vue we will use this to get an info of our paypal balance and github username :

<template>
  <v-row>
    <v-card max-width="344" outlined>
      <v-list-item three-line>
        <v-list-item-content>
          <v-list-item-title class="headline mb-1">
            Github Username
          </v-list-item-title>
          <v-list-item-title class="text-h5">{{username}}</v-list-item-title>
        </v-list-item-content>

        <v-list-item-avatar size="80" color="grey">
          <v-img :src="profilePhoto" />
        </v-list-item-avatar>
      </v-list-item>
    </v-card>
    <v-card class="mx-5" max-width="344" outlined>
      <v-list-item three-line>
        <v-list-item-content>
          <v-list-item-title class="headline mb-1"> Balance </v-list-item-title>
          <v-list-item-title>
            <v-row justify="space-between">

              <v-col class="font-weight-bold text-h5" v-if="paypalToken">$ {{paypalBalance}}</v-col>

              <v-col v-if="paypalToken"><v-btn color="red" :disabled="disabled" @click="disconnect">DISCONNECT PAYPAL</v-btn></v-col>
              <v-col v-if="!paypalToken"><v-btn color="blue" :disabled="disabled" @click="connect">CONNECT PAYPAL</v-btn></v-col>
            </v-row>
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-card>
  </v-row>
</template>
<script lang="ts">
import { Component, Vue, Prop,Emit } from 'nuxt-property-decorator'
@Component
export default class MyStore extends Vue {
  @Prop({ required: true }) readonly username!: string
  @Prop({ required: true }) readonly profilePhoto!: string
    @Prop({ required: false }) readonly paypalBalance!: number
    @Prop({ required: true }) readonly paypalToken!: boolean
    @Prop({ required: true }) readonly disabled!: boolean

@Emit()
connect(){}
@Emit()
disconnect(){}
}
</script>

After that go ahead and create our second modular component components/dashboard_components/DashboardForSale.vue we will use this component to show our repo that we can sell :

<template>
  <div>
    <v-row class="mb-2" ><v-btn @click="getAllRepo" :disabled="disabled">SELL REPO</v-btn></v-row
    >
    <v-row>
      <v-card
        width="400"
        class="mx-2 my-2"
        :key="index"
        v-for="(item, index) in listRepo"
      >
        <v-card-title>
          <v-list-item class="grow">
            <v-list-item-content>
              <v-list-item-title>{{ item.name }}</v-list-item-title>
            </v-list-item-content>

            <v-row align="center" justify="end"> {{item.isPrivate?"Private":"Public"}} </v-row>
          </v-list-item>
        </v-card-title>

        <v-card-text class="text-md font-weight-bold">
          <v-list-item>
            <v-list-item-content>{{ item.description }}</v-list-item-content>
            <v-list-item-avatar tile size="100" color="grey">
              <v-img :src="item.openGraphImageUrl" />
            </v-list-item-avatar>
          </v-list-item>
        </v-card-text>
        <v-card-action
          ><v-row class="d-flex align-content-center mx-5">
            <v-col cols="5" class="d-flex justify-start align-content-center">
              <div
                class="d-flex align-center text-h5"
                :style="{ height: '100%' }"
                v-if="item.sell === 'SELL'&&!ownedRepo"
              >
                $ {{ item.amount }}
              </div>
              <v-text-field
                v-if="item.sell === 'UNLIST'"
                label="Amount"
                type="number"
                outlined
                prefix="$"
                :disabled="!paypalToken"
                v-model="item.amount"
              ></v-text-field>
            </v-col>
            <v-col class="d-flex mt-2 justify-end">
              <v-btn
                @click="sellRepo(item.name, item.amount)"
                color="red"
                v-if="item.sell === 'UNLIST'&&!ownedRepo"
                :disabled="!paypalToken||disabled"
                >SELL</v-btn
              ><v-btn :disabled="!paypalToken||disabled" v-if="item.sell === 'SELL'&&!ownedRepo" @click="unlistRepo(item.repo_id)"
                >UNLIST</v-btn
              >
              <v-btn v-if="ownedRepo" target="_blank" :href="item.url"
                >GO TO URL</v-btn
              >
            </v-col>
          </v-row></v-card-action
        >
      </v-card>
    </v-row>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit } from 'nuxt-property-decorator'
@Component
export default class MyStore extends Vue {
  @Prop({ required: false }) readonly refreshRepo!: void
  @Prop({ required: false }) readonly paypalToken!: boolean
  @Prop({ required: true }) readonly listRepo!: Array<object>
  @Prop({ required: true }) readonly amountRefresh!: number
  @Prop({ required: true }) readonly ownedRepo!: boolean
    @Prop({ required: true }) readonly disabled!: boolean

  public amount: number=this.amountRefresh
  @Emit()
  getAllRepo() {

  }
  @Emit()
  sellRepo(name: string, amount: number) {
    return { name, amount }
  }
  @Emit()
  unlistRepo(repo_id: string) {
    return { repo_id }
  }
}
</script>

After that add components/dashboard_component/DashboardOwned.vue to see all of our that we bought from opensource marketplace

<template>
  <div>
    <v-row class="mb-2" v-if="refreshRepo"
      ><v-btn @click="getAllRepo" :disabled="disabled">SELL REPO</v-btn></v-row
    >
    <v-row>
      <v-card
        width="400"
        class="mx-2 my-2"
        :key="index"
        v-for="(item, index) in listRepo"
      >
        <v-card-title>
          <v-list-item class="grow">
            <v-list-item-content>
              <v-list-item-title>{{ item.name }}</v-list-item-title>
            </v-list-item-content>

            <v-row align="center" justify="end"> {{item.isPrivate?"Private":"Public"}}</v-row>
          </v-list-item>
        </v-card-title>

        <v-card-text class="text-md font-weight-bold">
          <v-list-item>
            <v-list-item-content>{{ item.description }}</v-list-item-content>
            <v-list-item-avatar tile size="100" color="grey">
              <v-img :src="item.openGraphImageUrl" />
            </v-list-item-avatar>
          </v-list-item>
        </v-card-text>
        <v-card-action
          ><v-row class="d-flex align-content-center mx-5">
            <v-col cols="5" class="d-flex justify-start align-content-center">
              <div
                class="d-flex align-center text-h5"
                :style="{ height: '100%' }"
                v-if="item.sell === 'SELL'&&!ownedRepo"
              >
                $ {{ item.amount }}
              </div>
              <v-text-field
                v-if="item.sell === 'UNLIST'"
                label="Amount"
                type="number"
                outlined
                prefix="$"
                :disabled="!paypalToken"
                v-model="amount"
              ></v-text-field>
            </v-col>
            <v-col class="d-flex mt-2 justify-end">
              <v-btn
                @click="sellRepo(item._id, amount)"
                color="red"
                v-if="item.sell === 'UNLIST'&&!ownedRepo"
                :disabled="!paypalToken||disabled"
                >SELL</v-btn
              ><v-btn :disabled="!paypalToken||disabled" v-if="item.sell === 'SELL'&&!ownedRepo" @click="unlistRepo(item._id)"
                >UNLIST</v-btn
              >
              <v-btn v-if="ownedRepo" target="_blank" :href="item.url"
                >GO TO URL</v-btn
              >
            </v-col>
          </v-row></v-card-action
        >
      </v-card>
    </v-row>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit } from 'nuxt-property-decorator'
@Component
export default class MyStore extends Vue {
  @Prop({ required: false }) readonly refreshRepo!: void
  @Prop({ required: false }) readonly paypalToken!: boolean
  @Prop({ required: true }) readonly listRepo!: Array<object>
  @Prop({ required: true }) readonly amountRefresh!: number
  @Prop({ required: true }) readonly ownedRepo!: boolean
    @Prop({ required: true }) readonly disabled!: boolean

  public amount: number=this.amountRefresh
  @Emit()
  getAllRepo() {

  }
  @Emit()
  sellRepo(_id: string, amount: number) {
    return { _id, amount }
  }
  @Emit()
  unlistRepo(_id: string) {
    return { _id }
  }
}
</script>

Finally add components/dashboard_components/DashboardRepoAll.vue to show all our repo from our github :

<template>
<v-row justify="center">
      <v-dialog
        v-model="dialog"
                max-width="600px"
      >
      <v-card>
          <v-card-title>
            <span class="headline">Choose Your Repo To Sell</span>
          </v-card-title>
          <v-card-text>
          <v-card
    class="mx-auto"
    max-width="344"
    outlined
    :key="index"
v-for="(item, index) in allRepo"
  >
    <v-list-item three-line>
      <v-list-item-content>
        <div class="overline mb-4">
          {{item.isPrivate?"PRIVATE":"PUBLIC"}}
        </div>
        <v-list-item-title class="headline mb-1">
          {{item.name}}
        </v-list-item-title>
        <v-list-item-subtitle>{{item.description}}</v-list-item-subtitle>
      </v-list-item-content>

      <v-list-item-avatar
        tile
        size="80"
        color="grey"
      ><v-img :src="item.openGraphImageUrl"/></v-list-item-avatar>
    </v-list-item>

    <v-card-actions>
      <v-btn
        v-if="!item.added"
        rounded

        color="blue"
        :disabled="disabled"
        @click="listRepo(item)"
      >
        LIST REPO
      </v-btn>

    </v-card-actions>
  </v-card>
            <v-row justify="center" class="mt-2">
               <v-btn
      class="mx-2"
      fab
      dark
      large
      color="cyan"
      :disabled="!pageInfo_.hasPreviousPage||disabled"
      @click="getAllRepo(undefined,pageInfo_.startCursor)"
    >
      <v-icon>
        fas fa-arrow-left
      </v-icon>
    </v-btn>
                <v-btn
      class="mx-2"
      fab
      dark
      large
      color="cyan"
      :disabled="!pageInfo_.hasNextPage||disabled"
      @click="getAllRepo(pageInfo_.endCursor,undefined)"
    >
      <v-icon>
        fas fa-arrow-right
      </v-icon>
    </v-btn>
            </v-row>

          </v-card-text>

        </v-card>
      </v-dialog>
    </v-row>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit } from 'nuxt-property-decorator'
@Component
export default class MyStore extends Vue {
  @Prop({ required: true }) readonly dialog!: boolean
  @Prop({ required: true }) readonly allRepo!: Array<object>
  @Prop({ required: true }) readonly pageInfo_!: object
  @Prop({ required: true }) readonly disabled!: boolean
@Emit()
  getAllRepo(after_: string,before_:string) {
    return { after_,before_ }
  }
  @Emit()
  listRepo(item:object) {
    return { item}
  }

}
</script>

Now in order for us to accept the redirect url we need route to save the token that we get from github login create pages/callback.vue in order to do that and write this code :

<template>
  <v-row justify="center" align="center" :class="['text-h1']"
    >REDIRECTING...</v-row
  >
</template>
<script lang="ts">
import Cookies from 'js-cookie'
import { Component, Vue } from 'nuxt-property-decorator'
import axios from 'axios'
import {configs} from '@/utils/configs.js'
@Component
export default class MyStore extends Vue {
  async mounted() {
    if (this.$route.query.token) {
      Cookies.set('token', this.$route.query.token)
      if(Cookies.get('redirect')){
        const redirect=Cookies.get('redirect');
        window.location.href=`${redirect}`;
        return
      }
      window.location.href = '/'
    } else {
      const token = Cookies.get('token')
      const { data } = await axios.post(`${configs.save_paypal_url}`, {
        token,
        email: this.$route.query.email,
      })
      if (data.status) {
        window.location.href = '/dashboard'
      } else {
        window.location.href = '/dashboard?error=save_paypal'
      }
    }
  }
}
</script>

We also need to have a link where we can share the repo that we sell go create one at pages/detail

<template>
  <v-row justify="center" align="center" :class="['text-h1']"
    >
  <v-card

    class="mx-auto my-12"
    max-width="1000"
  >
    <template slot="progress">
      <v-progress-linear
        color="deep-purple"
        height="10"
        indeterminate
      ></v-progress-linear>
    </template>

    <v-img
      height="250"
      :src="item.openGraphImageUrl"
    ></v-img>

    <v-card-title>{{item.name}}</v-card-title>

    <v-card-text>



      <div>{{item.description}}</div>
    </v-card-text>

    <v-divider class="mx-4"></v-divider>

    <v-card-title>$ {{item.amount}}</v-card-title>



    <v-card-actions>
      <v-btn
         v-if="item.username !== username_"
        color="deep-purple lighten-2"
        text
        :disabled="disabled"
        @click="buyNow(item.repo_id,item.username,item.name)"
      >
        BUY NOW
      </v-btn>

        <v-btn
        v-if="item.username === username_"
              :disabled="disabled"
                class="d-flex justify-end"
                color="deep-purple lighten-2"
                :href="item.url"
                target="_blank"
                text
              >
                GO TO URL
              </v-btn>
    </v-card-actions>
  </v-card>
</v-row>
</template>
<script lang="ts">
import Cookies from 'js-cookie'
import { Component, Vue } from 'nuxt-property-decorator'
import {configs} from '@/utils/configs.js'
import axios from 'axios'
@Component
export default class MyStore extends Vue {
public disabled:boolean=false
public username_:string=""
public item:object={}
async mounted(){
  Cookies.remove("redirect")
  const username = this.$route.query.username
      const name = this.$route.query.name
      const url=configs.repo_detail_url
      const {data}=await axios.post(`${url}`,{username,name})
this.item=data


  if(Cookies.get("token")){
        const token=Cookies.get("token")
        const _url = configs.get_profile_url
        const profile = await this.$axios.get(`${_url}?token=${token}`)
        this.username_ = profile.data.data.login
      }
}

async buyNow(id:any,username:string,name:string) {

    this.disabled=true;
    const token = Cookies.get('token')
    if(!token){
      window.location.href="/login"
       Cookies.set('redirect', `/${username}/${name}`)
      return
    }
    Cookies.remove("redirect")
    const url=<string>configs.buy_paypal_url;
    const res = await this.$axios.post(url, { id, token })
    if (res.data) {
      const link=res.data.result.links.filter((a:any)=>a.rel==="approve")[0].href
      window.location.href=link;
    }else{
      this.disabled=false;
      alert("error")
    }
  }
}
</script>

Now you finish creating the frontend let's go create the backend on step 2

Prerequisites

spiritupbro — Sun, 03 Jan 2021 03:43:20 +0000

To complete this tutorial you will need :

A text editor like Visual Studio Code or Atom.
A web browser like Firefox or Chrome.
Familiarity with JavaScript. You can look at the How To Code in JavaScript series to learn more.
Familiarity with Nuxtjs. You can take a look at Nuxtjs official documentation here.
Familiarity with TypeScript. You can look at the TypeScript Tutorial series to learn more.
Digitalocean account sign up here
Sandbox Paypal Account here
Github code of this article here