DEV Community: Nitish Kafle

Solving Find Pivot Index from LeetCode + Explanation

Nitish Kafle — Thu, 31 Mar 2022 20:57:53 +0000

Question Link: https://leetcode.com/problems/find-pivot-index/

Question:

Given an array of integers nums, calculate the pivot index of this array.

Explanation:

First lets look at the example and try to understand the logic behind it.

According to the example, we have an Array of numbers.

When we visualize it, along with index we get:

Now, Looking at the image, if we add 3 elements on the left, and 2 elements on the right, we get 11. So, the element in between has an index which will be pivot index.
In our case,
Array[3] = 6, therefore, 3 is our pivot index.

Logic:

Now, lets walk through the problem on how we can check for the pivot index.

First, we need to know the sum of all elements in the array and denote it as totalSum, which in our case is 28.

Then lets have sum of all elements in the left index and denote it as leftSum

Now lets create a table with these element and also lets track the element on the index tht we have and denote it as Index[e] and check what it is equal to.

Let's approach the problem from the right to the left.

Our leftSum currently is 0 because we did not add anything. And the Index[e] is the element of the array on that index.

Doing this for each item in the array, we end up in one condition where leftSum equals to the same number that is in leftSum. The next index after that condition is the pivot Index.

And our problem is to find that pivot Index.

Congrats! You have successfully diagnosed the problem!

Now, let's create the logic from the result we had:

totalSum - leftSum - Index[e] = leftSum

Now let's implement it in terms of code:
I'm using JavaScript



function(index){

  // initialize the sums, 0 because we don't know the sums yet.

   let totalSum = 0; 
   let leftSum = 0; 

   // now let's calculate the total sum

   nums.forEach((element) => totalSum += element);

/* 
now we have the sum, so we want to check for the condition.
but before that, we need to loop through each element in the array.
*/

   for(let e=0; e<nums.length; e++){
      if(totalSum - leftSum - index[e] === leftSum){
         return e;
      }
      leftSum += index[e]
   }
   return -1;
}

We checked for that condition, and returned the index if it satisfied the condition since we were looking for that pivot index.

In case, the exact condition did not pass, we had to add another element of the array to the leftSum as we did in the exercise above.

And, if there was no pivot index, it would return -1 as per the question requirement.

Congrats! You did it!

The solution might not be optimal in terms of runtime and memory distribution, but hey, you figured out the concept behind it and implemented it!

Cover Photo by Arnold Francisca on Unsplash

Thanks for reading. If you have any questions, feel free to send them my way on Twitter @developernit

Dockerizing your Next.js/React Application!

Nitish Kafle — Mon, 28 Mar 2022 17:01:57 +0000

What is Docker?

Docker is a software framework for building, running, and managing containers on servers and the cloud. Think of Docker as a CLI but for the cloud.

For this tutorial, we will be using Next.js sample application and create a Dockerfile in order to Dockerize it.

Requirements:

In order to complete Dockerizing your Next.js app, you will need the following:

Docker installed on your computer.
Node.js and npm/yarn installed on your system in order to create Next app.

Creating a sample `Next.js` app

If you already have an application that you want to dockerize then, you can proceed with further steps else let’s create a next.js app.

Run the following command on your terminal:

yarn create next-app

This command will initialize files and configurations that are required to create and run your next.js application.

Creating a `Dockerfile`

First, let’s open our app in VS Code or any Code Editor of your choice.

Run the following commands:

cd <your app name>

code .

(assuming you have vscode configured)

Here, you will see the directories of your application. That would look something similar like this.

[ Note: I am using TypeScript that’s why you are seeing tsconfig.json and files that ends with .ts ]

Go ahead and create a new file and name it Dockerfile. By default, this file is recognized by docker and it will executes bunch of commands and instructions that we will provide.

Remember: The commands will be executed in order of how they are written.

Inside the Dockerfile write these codes. I will go through each one and explain how it works at the end of the tutorial.

[Note: I am using yarn for this tutorial, you can use npm but you will have to swap those yarn executable code with npm]

FROM node:lts as dependencies
WORKDIR /<your-app-name>
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

FROM node:lts as builder
WORKDIR /<your-app-name>
COPY . .
COPY --from=dependencies /<your-app-name>/node_modules ./node_modules
RUN yarn build

FROM node:lts as runner
WORKDIR /<your-app-name>
ENV NODE_ENV production

COPY --from=builder /<your-app-name>/public ./public
COPY --from=builder /<your-app-name>/package.json ./package.json
COPY --from=builder /<your-app-name>/.next ./.next
COPY --from=builder /<your-app-name>/node_modules ./node_modules

EXPOSE 3000
CMD ["yarn", "start"]

Building Docker Image

Execute the following command to build the Docker image.

docker build . -t <project-name>

This command will build the Docker image with the name <project-name>.

Running the Docker image once the build is over with the following command.

docker run -p 3000:3000 <project-name>

Now, open the browser and navigate to

http://localhost:3000

to view your project.

CONGRATULATIONS! You have successfully dockerized your application!

Visiting contents of the `Dockerfile`

Now, let’s go through the code contents of the Dockerfile.

Remember, the code are executed based on how they are written, top-down approach.

Lets go through the code in three different stages in top-down approach:

Installing dependencies
Building our Next.js application
Configuring the runtime environment for our application

1. Installing Dependencies

FROM node:lts as dependencies
WORKDIR /<your-app-name>
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

Let’s talk about what is happening on this code.

First, we want to define what image we want to build from for which we are using the latest node version with node:lts

You could use any specific version of node. For example: FROM node:16 would build your image with Node version 16. We are using as dependencies so that we can export this code and reuse it later when building our application in docker.

Second, we want to create an application directory which holds our application code with WORKDIR.

Third, we want to copy our package.json and yarn.lock files which allows us to take advantage of cached Docker layers. A good explanation of Docker Caching is here.

Finally, we want to be able to run our yarn install to install these dependencies. We are using --frozen-lockfile because our yarn.lock or package-lock.json gets updated when running yarn install ( or npm install). We do not want to check for these changes.

If you are using npm you can use npm ci (ci means clean install / use it for production or else just use RUN npm install)

For yarn its --frozen-lockfile

2. Building our `Next.js` application

FROM node:lts as builder
WORKDIR /<your-app-name>
COPY --from=dependencies /<your-app-name>/node_modules ./node_modules
RUN yarn build

Let’s look at the build.

Here, we build our application copying dependencies from node_modules.

If you are using npm then use RUN npm build.

FROM node:lts as runner
WORKDIR /<your-app-name>
ENV NODE_ENV production

After building our project, we want to be able to run it.

3. Configuring the runtime environment for our application

COPY --from=builder /<your-app-name>/public ./public
COPY --from=builder /<your-app-name>/package.json ./package.json
COPY --from=builder /<your-app-name>/.next ./.next
COPY --from=builder /<your-app-name>/node_modules ./node_modules

EXPOSE 3000
CMD ["yarn", "start"]

Here, we want to be able to bundle the app source code inside our Docker image that’s why we are using COPY.

Finally, we want to define a command to run our app using CMD which defines the runtime.

For our runtime, we are using yarn command.

If you have Docker Application installed, you can view your container on the dashboard and run it from there which would look something like the images below.

You did it!

Thanks for reading. If you have any questions, feel free to send them my way on Twitter @developernit