And also learn how to add drag and drop feature to upload any type of file

Image for post
Image for post
File Upload

Introduction

In this article, we will create a file upload and download functionality with a preview of the image using the MERN stack.

By creating this App, you will learn

and much more.

Instead of storing the file in the MongoDB database as base64 encoded, we will be storing the file on the server and only storing the path of the file inside the database so as to keep the database size smaller and to easily access and move the files as per the need.


Create an amazing JAMStack App from scratch

Image for post
Image for post
Bookmark Manager App

Introduction

In this article, you will create a Bookmark Manager App using FaunaDB GraphQL API and Netlify serverless functions.

By creating this app with FaunaDB, you will understand how FaunaDB helps to quickly create GraphQL apps without worrying about managing the GraphQL server and its configuration on your own.

Fauna comes with GraphQL playground so you just have to provide the schema and Fauna does all the magic behind the scenes.

You can see the live demo of the final working application in the video below


Learn the way to secure your application data using environment variables

Image for post
Image for post
Photo by Fotis Fotopoulos on Unsplash

Using Environment variables is very important to keep your private information secure.

It may contain your API keys or database credentials or any other private information. It’s always recommended to use environment variables to keep the information secure and you should never write them directly in your code.

Also, you need to make sure that, you add the environment variables file name to your .gitignore file so it will not be added to your Git repository when you push the code to the repository.

Let’s look at the various ways of using the environment variables

Using Create React App

with single .env file:

If you’re using create-react-app, then to use environment variables in your application, you need to create a .env file in the root of your project with each variable name starting with…


Create a Spotify App with OAuth Authentication

Image for post
Image for post
Spotify Music Search App

Introduction

In this article, you will create a Fully Responsive Spotify Music Search App using Spotify Music API.

By creating this App, you will learn

1. How to use Spotify API to provide OAuth authentication
2. How to search for the Albums, Artists and Playlists
3. Display the details with a beautiful UI
4. Play the songs directly from the list
5. How to add load more functionality to the app
6. How to add and maintain separate load more functionality for Albums, Artists and Playlists

and much more.

You can see the live demo of the final working application in the video…


Easily create and publish an npm module to npm repository

Image for post
Image for post

Introduction

In this tutorial, you will create your own npm package and publish it to the npm repository.

By doing this, you will understand:

To be precise, you will build a package that will return a list of GitHub repositories of the specified username sorted by the number of stars for each repository.


Generate JSON data quickly to use in any application

Image for post
Image for post
Photo by Safar Safarov on Unsplash

Introduction

In most of the applications, you need to have some static JSON data with which you can create and test the application without directly using the production data.

If you’re building an e-commerce application, you may need a list of product details with the product name, image, and price to test.

If you want to showcase something then first you will need some data to display on the UI.

Faker has around 1.4M weekly downloads (as of 19 August, 2020).


Some of the most useful and popular VS Code extensions you should use

Image for post
Image for post
Photo by Riku Lu on Unsplash

Visual Studio Code (VS Code) is the most popular IDE for Developers right now because of its simplicity and the availability of extensive extensions.

In this article, we will see some of the most useful and popular extensions in the VS Code.

1. Relative Path


A lesser-known trick for accessing elements of the webpage

Image for post
Image for post
Photo by Keila Hötzel on Unsplash

Many times when we’re writing JavaScript code, we want to quickly test if some element on the webpage is present or not or count the list of elements displayed.

For example

To count the number of jobs displayed:

document.querySelectorAll('.job-item').length

To get the text of the button:

document.querySelector('.btn').innerHTML

But it's tedious to type document.querySelector or document.querySelectorAll every time to do something.

So Chrome developer tools provide an easier way.

Instead of document.querySelector we can use $ and instead of document.querySelectorAll we can use $$

So no more need of typing the long text, just use $ or $$ and you’re done.

Check out the below gif to see that in action

Image for post
Image for post
use of $ and $$ in chrome developer tools

That’s it for today. I hope you learned something new.

Don’t forget to subscribe to get my weekly newsletter with amazing tips, tricks, and articles directly in your inbox here.


Use MongoDB + GraphQL + React + Node.js Stack to build the App.

Image for post
Image for post
Photo by Lukas Blazek on Unsplash

This is the final part of the series of building a Full Stack application using GraphQL API. Check out part one HERE and part two HERE if in case you have missed it.

In the last part, we have created all the required GraphQL APIs. In this article, we will create a React app to use those GraphQL APIs.

Let’s get started

Clone the repository code of the previous article from HERE

Switch to the code branch

git checkout part2_full_stack_app

Create and switch to the new git branch by executing the following…


Use MongoDB + GraphQL + React + Node.js Stack to build the App.

Image for post
Image for post
Photo by Carlos Muza on Unsplash

This is part two of the series of building a Full Stack Application using GraphQL API. If you have not checked part one, check that out HERE.

In the last article, we have explored the basics of GraphQL from scratch. In this article, we will create GraphQL APIs for our Full Stack Application.

Let’s get started

Clone the repository code of the previous article from HERE

Switch to the code branch

git checkout graphql_initial_code

Create and switch to the new git branch by executing the following command

git checkout -b…

About

Yogesh Chavan

Full Stack Developer | JavaScript | React | Nodejs. https://dev.to/myogeshchavan97

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