Learn how to create an NASA APP using REACT.

Image for post
Image for post
Photo by Soundtrap on Unsplash

In this article, we are going to build an app that displays the photo of the day, the title of that photo, the current date, and some information about the picture using NASA APOD API, React Routing, React Fragments.

GETTING STARTED

To get started, first we have to know about NASA APOD API- It is an NASA open API, APOD means Astronomy Picture of the day. Using this API, we gonna build an app that displays the information provided by the API. That is,

1.The Photo.

2.The Photo’s Title.

3.Current Date.

4.Information about the photo.

We will be building our application with…


Learn how to build a Progressive Web App (PWA) and how to convert any website into PWA.

Image for post
Image for post
Photo by Tim Bennett on Unsplash

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


Learn the basics of styled-components and how to apply them in our React application.

Image for post
Image for post
Photo by Florian Olivo on Unsplash

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…


Learn how to create a fully functional Quiz Application using React

Image for post
Image for post

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…


Want to know the Top Maps API and Libraries in JavaScript before creating your first maps application.

Image for post
Image for post
Photo by henry perks on Unsplash

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


Learn how to create a real-time chat application using React and GraphQL.

Image for post
Image for post

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…


Learn how to build Airbnb Clone using React and Elastic Search

Image for post
Image for post

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


Learn how to create a maps using React and Leaflet.

Image for post
Image for post
Photo by Jake Davies on Unsplash

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…


Learn how to create a travel list app with React, Gatsby, Leaflet, GraphCMS.

Image for post
Image for post
Photo by Philipp Kämmerer on Unsplash

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…


Learn how to build realtime face detection and applying filters like instagram using JavaScript.

Image for post
Image for post
Photo by Aditya Ali on Unsplash

Hello readers!

Today in this article we discuss about the realtime face detection and how to apply filters like instagram or snapchat features. In this project we will create some super cool filters like spiderman mask, dog filters etc…

Detecting face features

In JavaScript there is a library available called clmtrackr. It is used to detect the face on the image. It also finds the nose, ears etc…

Generally this library provides generic model which is already pre-trained and ready to use the following number the features as well.

Sathishravi

Co-Founder and CEO at The Shopful | Full Stack developer | Flutter developer

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