Today we will learn about how to build a PWA and how to convert your existing website into PWA. Before getting into the topic we want to know about progressive web app (PWA).

What is a PWA?

A progressive web app (PWA) is the set of mobile web application development techniques that entails building apps that feel and look like native ones. Using a web stack (JS, HTML, and CSS), progressive web apps combine rich functionality and a smooth user experience associated with native apps. …

In this article we will learn how to use Styled Cmponents in React. Styled components are “visual primitives components” which gives flexible way to style components. Before getting deep into the topic lets see about styled components which is nothing but a CSS in JS as a tool to bridge the gap between components and styling them to provides the styling function for components in a reusable way.

Why Styled Components?

The styled components includes the following features:

• Automatic vendor prefixing

The standard CSS properties and styled components will add the vendor prefixes when needed.

• Unique class name

The styled components are independent…

In this tutorial we’ll see how to create a quiz app and how to handle the different state hooks based on the state.

Scenarios in our Quiz App

1. When the question displays, user have to clicks a button from the options.
2. After answer button is clicked, go to next question.
3. If answer is correct, increment the score.
4. After answering all the questions, score will be displayed.

The code

Now open your starter code and go to App.js and make your questions and answers and stored it as an array called questions. Our quiz is about to ready.

Next task is going to get the question from array…

Most of the applications we are using today in our day today life will show live location and data on maps. Example from online stores to food delivery application we are using maps.

Maps are wide used to represent data and we always expect to be more interactive. There are many different libraries and plugins available for maps either paid or open source.

Google maps isn’t the right solution for your map application. It doesn’t provide any customisation option to make it more convenient for yourself. …

In this article we are going to create a real-time chat application using React, GraphQL, AWS CDK and AWS AppSync. This app contains authentication, Database and Frontend.

This is a full stack application, so you have to know some basic concepts like JavaScript, Restful API or GraphQL API.

Let’s get started.

Getting Started

To get started, first you have to install and configure the AWS CLI

npm install -g aws-cdk

After installing the CDK, run the CDK by the following commands.

• init - To initialize a new project.
• deploy - To deploy the AWS infrastructure.
• diff - Used to compare the stack…

Hello readers!

Today in this article we will see how to build an Airbnb Clone using React and Elastic. As we all familiar already about what is React?. Let’s see about little bit of Elastic Search.

Elastic search is a super fast open source search engine. It is used to store, search and analyze high volume of data fastly.

Using Elastic search we can build a fast searching query DSL. To set up elastic search correctly requires a lot of work. In Elastic search the data mapping should be set correctly. …

Hello readers!

Today in this article we will see how to create a map using React, vanilla.js and Leaflet. Before getting into the topic, let’s see about leaflet- it is a powerful tool for building maps. We can create different kinds of maps using this tool. It supports in all web browsers and mobile platforms.

In this project, we are going to represent the locations to the non-medical fire incidents. The Fire Department responded on a map. we are marking only the locations of the fire incidents and display some details about it.

Let’s create a simple example. Now we…

Hello readers!

Today in this article we will see how to create a travel list app using React, Gatsby, Leaflet and GraphCMS.

Actually travelling is always fun and we want to travel to many different places but we didn’t have enough time to do. So we have decided to create a bucket list that contains custom mapping app that shows our all destination in the bucket list.

Before getting into the topic, let’s see what are the steps we are going to follow to build this app:

• Create a new app with Leaflet.
• Managing a list of travel location in…