Pic Courtesy: Multidots

GraphQL, or Graph Query Language, is a query language for your API. It gives you the power to :

You can look at the official documentation to learn more about GraphQL features.

Now, let’s talk about the implementation. We will be creating an express-graphql server with MongoDB to persist the data.

Let’s get started,

  • Create a package.json by running,
npm init
  • Install dev dependencies,
npm i --save-dev babel-cli babel-preset-env…

Being a javascript user, you may have encountered some of the basic concepts like hoisting, closure, scope, and all. But, before we learn and understand these concepts, we need to understand the primary process that works in the background, and we always miss to understand.
This concept will give you the idea of the inner working of how a Javascript code compiles and run in a web browser/node server.

So, let introduce this topic of discussion that helps in understanding the working of Javascript code.

Execution Context

Execution Context

Execution context is the place where actually everything inside JS executes. Every javascript code carries…

As one starts building his application in ReactJS, one needs to keep an eye on the complexity of application state management. As the application state tree grows with more nodes, the complexity to manage them also increases widely. So, we need a state management utility to manage our states effectively. Here will be using Redux, a library coupled with our ReactJS application for state management.

React with Redux
React with Redux


  1. The package manager (npm, yarn) is installed in your system. (Download it from here, if not installed https://nodejs.org/en/download/ and follow the steps as guided).
  2. Have some prior basic knowledge of Javascript and HTML.


For the last few months, I and my senior were working on a Web Application built in ReactJS and Ant design CSS Framework. We were representing our data in a catalogic/tiles way, and it was creating sort of an infinite scroll with each increasing data. So thought of implementing a page view for the app data.

The similar design we were trying to do for our data. (Courtesy- Hotstar)

Ant Design

A design system for enterprise-level products. Create an efficient and enjoyable work experience.


$ npm install antd$ yarn add antd

After adding the dependency:

Set React initial states:

elementsPerPage is the number of elements you want to render on a single…

Akarsh Srivastava

Front-end Engineer, working on ReactJS, Redux and Javascript.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store